Страницы

Поиск по вопросам

четверг, 18 октября 2018 г.

css: background в разных браузерах

Есть вот такой фон на 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-? Спрашиваю, потому как не совсем понимаю, как это правильно сделать, т.к. в этом случае добавление к селектору одной приставки мало, и в блоке объявления стилей это прописывается для каждого браузера по-разному.


Ответ

Нужно добавить соответствующие префиксы к 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: А вообще, стоило бы воспользоваться автопрефиксером или генератором градиентов.

Комментариев нет:

Отправить комментарий