6

Есть вот такой фон на css:

background-image: linear-gradient(45deg, transparent,transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);

Подскажите, пожалуйста, как правильно в стиле прописать этот фон для браузеров -webkit-, -moz-, -ms-, -o-? Спрашиваю, потому как не совсем понимаю, как это правильно сделать, т.к. в этом случае добавление к селектору одной приставки мало, и в блоке объявления стилей это прописывается для каждого браузера по-разному.

5 ответов 5

6

На седьмое июля 2017-го года градиенты поддерживает 94.62% общей массы браузеров, а градиенты без префиксов — 93.75% (согласно статистике Can I use). А значит, добавляете префиксы вы для 0.87% юзеров, при условии, что ваш сайт посещает полноценная выборка пользователей.

Посмотрим, какие браузеры вы поддерживаете, добавляя префиксы:

  • Opera Mobile 12-
  • Android Browser 4.3-
  • IOS Safari 6.1-
  • Safari 4...6
  • Chrome 25-
  • Firefox 15-

И я полагаю, что сознательно тестировать свой продукт в этих браузерах уже бессмысленно. Даже более — по интернету кочует сниппет с градиентами из года в год, разработчики его добавляют «для кроссбраузерности», но уверен, что на практике кроссбраузерность проверяется совсем не в этих браузерах.

P. S. нигде не нашел упоминания, что ИЕ поддерживал когда-либо синтаксис -ms-linear-gradient, кажется имеет место карго-культ.

Вывод: добавлять префиксы к линейным градиентам не нужно!

3
  • В соседнем ответе для -ms написан комментарий /* IE10 Consumer Preview */ Хотя, пожалуй, это действительно не стоит добавлять в css :)
    – Qwertiy
    7 июн 2017 в 13:22
  • @Qwertiy насколько я помню, для ИЕ всегда были фильтр-хаки, странно что этого в ответах не нашлось ) 7 июн 2017 в 13:36
  • 1
    Они настолько костыльные, что даже в генераторе градиентов их надо включать флажком)) А ещё IE от них тормозит :D
    – Qwertiy
    7 июн 2017 в 13:43
3

Нужно добавить соответствующие префиксы к linear-gradient.

При этом, если некий браузер поддерживает несколько реализаций, то более новые должны идти позже более старых (поскольку с ними меньше проблем). По той же причине вариант без префиксов должен идти последним.

Замечу, что у браузеров появилась тенденция поддерживать префикс -webkit, поэтому его стоит написать первым. Да и вообще, довольно распространённая практика - писать префиксы в порядке убывания длины:

-webkit-smth
-khtml-smth
-moz-smth
-ms-smth
-o-smth
smth

Возвращаясь к linear-gradient и вспоминая, что у webkitа есть более старая форма, получим такой порядок:

background-image: -webkit-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -webkit-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -moz-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -ms-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -o-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);

Ещё про градиенты стоит отметить, что префиксные варианты используют from-синтаксис, а принят в итоге был to:

background: -webkit-linear-gradient(top, white 0%, black 100%);
background: linear-gradient(to bottom, white 0%, black 100%);

PS: А вообще, стоило бы воспользоваться автопрефиксером или генератором градиентов.

1
  • 1
    @LADYX, это штука, которая автоматически добавляет префиксы к css. Раньше была самостоятельной, но сейчас превратилась в плагин для postcss: github.com/postcss/autoprefixer
    – Qwertiy
    7 июн 2017 в 13:10
3
background-image: -ms-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -moz-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -o-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -khtml-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -webkit-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);

А еще есть инструмент для создания кроссбраузерных градиентов: http://www.colorzilla.com/gradient-editor/

2
  • В таком порядке не надо.
    – Qwertiy
    7 июн 2017 в 10:32
  • Ok, теперь лучше.
    – Qwertiy
    7 июн 2017 в 10:45
3

Префикс добавляется не к background-image, а к linear-gradient():

background-image: prefix-linear-gradient(options)

Ваш случай:

background-image: -ms-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* IE10 Consumer Preview */ 
background-image: -moz-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* Mozilla Firefox */
background-image: -o-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* Opera */ 
background-image: -webkit-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* Webkit (Chrome 11+) */ 
background-image: linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* W3C Markup, IE10 Release Preview */ 

Microsoft создали кроссбраузерный генератор градиента здесь. Также можете воспользоваться этим сервисом, здесь больше кастомизации.

0

Есть еще вариант, при котором можно забыть об проблеме. Прогнать готовый css https://autoprefixer.github.io/ru/ Если используеш таск-ранер: gulp-autoprefixer или аналоги.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.