Кроссбраузерный CSS3 градиент

Кроссбраузерный CSS3 градиент

Когда дизайнер передает Вам макет, он зачастую не думает о том, как Вы будите это верстать, ему лишь необходимо, чтобы это максимально одинаково выглядело во всех популярных браузерах, включая Internet Explorer. Одним из камней преткновения при верстке являются градиенты, собственно в этом посте я хотел бы поделится способом решения данной задачи.

Сразу хочу оговорится, что в статье пойдет речь про линейные градиенты, не затрагивая более сложные радиальные.

CSS3: linear-gradient

В CSS3 введено стилевое свойство для рисования градиентов, синтаксис которого, применительно к атрибуту background-image, на данный момент выглядит так:

background-image: linear-gradient(
                               [ [ <angle> | to <side-or-corner> ] ,] 
                               <color-stop> 
                               [, <color-stop>]+
                           ):

К примеру нам нужен градиент от черного(#000000) до белого(#ffffff) сверху-вниз:

/*по дефолту направление идет сверху-вниз, поэтому можно так:*/
background-image: linear-gradient(#000000, #ffffff);
 
/*или указываем направление словами:*/
background-image: linear-gradient(to bottom, #000000, #ffffff);
 
/*или в градусах:*/
background-image: linear-gradient(270deg, #000000, #ffffff):
 
/*или направление к вверху, тогда цвета меняются местами:*/
background-image: linear-gradient(to top, #ffffff,  #000000);
 
/*еще можно указать "точки старта" для каждого цвета:*/
background-image: linear-gradient(to bottom, #000000 0%, #ffffff 100%);

Браузеры и linear-gradient

Пока linear-gradient не устаканился и не имеет статуса «Рекомендации w3c», браузеры используют вендорные префиксы и свой набор параметров для градиентов, но благо за последние полгода применение линейного градиента для разных браузеров стало отличатся только тем, какой префикс использует тот или иной браузер.

Теперь, для того, чтобы получить градиент в разных браузерах нам необходимо описать его, используя вендорные свойства.

Google Chrome/Safari (Webkit)

background-image: -webkit-linear-gradient(270deg, #000000, #ffffff):

Mozilla Firefox (Gecko)

background-image: -moz-linear-gradient(270deg, #000000, #ffffff):

Opera (Presto)

background-image: -o-linear-gradient(270deg, #000000, #ffffff):

Internet Explorer 10

background-image: -ms-linear-gradient(270deg, #000000, #ffffff):

В примерах я использую градусы для указания направления градиента, т.к. на текущий момент w3c предлагает новый вариант с указанием предлога «to»(to top, to botttom), а последние версии браузеров в своих вариантах не воспринимают данный предлог, только ключевые слова(top, bottom, left, right).

Internet Explorer и linear-gradient

Как вы наверное заметили, это решение не является, кроссбраузерным и огромная аудитория Internet Explorer ниже 10-й версии не учтена. Тут перед нами встает вопрос: «Забить или париться?». Первый вариант нас не устраивает? Значит идем дальше.

Казалось бы старый проверенный способ, использовать filter в CSS:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000,endColorstr=#ffffff);

Плюсы:

  • не нужна картинка для фона
  • понимает только IE

Плюсы меркнут на фоне того, какие значимые минусы присутствуют:

  • только 2 цвета
  • у элемента должен быть выставлен hasLayout
  • не совместим с border-radius в IE9
  • баги с box-shadow в IE9

Как видно, существенные минусы пришли вместе с CSS3, которые имеют место только в IE9+: градиент с помощью filter'а перекрывает скругленные края, у блока возникают проблемы с отображением теней. Данные минусы довольно весомые, поэтому стоит подумать об отказе от filter.

Кроссбраузерный linear-gradient

Прежде чем перейти непосредственно к сути статьи, хотелось бы напомнить про то, что если в стилях для конкретного селектора встречаются множественные(>1) описания одного и того же свойства, то браузер применит последнее «понятое»(которое смог распознать) описание, т.е. если мы сделаем так:

.selector {
    color: red;
    color: black;
}

То текст в селекторе .selector будет черным, а никак не красным — поэтому принципу и построено решение с кроссбраузерным градиентом.

Итак, кульминация поста, кроссбраузерный линейный градиент и разбор полетов следом:

background-color: #000000;
 
background-repeat: repeat-y;
 
/* Картинка градиента для всех, "по-старинке" */
background-image: url(path/to/gradient.png);
 
/* Google Chrome/Safari (webkit) */
background-image: -webkit-linear-gradient(270deg, #000000, #ffffff):
 
/* Mozilla Firefox (gecko)*/
background-image: -moz-linear-gradient(270deg, #000000, #ffffff):
 
/* Opera (presto)*/
background-image: -o-linear-gradient(270deg, #000000, #ffffff):
 
/* Internet Explorer 10 */
background-image: -ms-linear-gradient(270deg, #000000, #ffffff):
 
/* CSS3 */
background-image: linear-gradient(270deg, #000000, #ffffff):

Суть: сначала описываем градиент «по-старинке», используя фоновое изображение, а после начинаем разгонять конкретные браузеры с помощью CSS3 PREFIX-linear-gradient. В последнюю очередь объявляем градиент так, как предписано в CSS3 — в надежде на светлое будущее, когда браузеры начнут понимать и применять именно последнюю строчку.

При данном подходе, фоновая картинка будет загружена только в IE9 и ниже. Во всех остальных браузерах описание с картинкой будет проигнорировано.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *