Всем привет. Сегодня я вам расскажу, что такое вендорные префиксы, нужно ли их использовать и для чего они вообще нужны при создании интернет-ресурса.
Что такое вендорные префиксы?
Можно сказать, что это такие приставки к css-свойствам, которые позволяют этим самым свойствам работать в более старых версиях браузеров. Наверняка вы знаете, что технологии css развивается и в ней появляются новые возможности. Браузеры не успеют их поддерживать. Кстати, как проверить сайт на кроссбраузерность я писал здесь.
Таким образом, старые версии веб-обозревателей не могут интерпретировать их, а веб-разработчик старается угодить всем. Вот и используются вендорные префиксы, чтобы и старые версии браузеров начали поддерживать свойство.
Какие они бывают
- -webkit — для Google Chrome, Yandex Browser, Safari и iOs;
- -moz — для Mozilla;
- -o — для Оперы;
- -ms — для Internet Explorer;
Собственно, все, это все вендорные префиксы, о которых нужно знать.
Как их использовать?
Тут все предельно просто на самом деле. Пишем сначала сам префикс, а потом через дефис само свойство. Например:
-moz-linear-gradient
— теперь линейный градиент будет поддерживаться в старых версиях Firefox. А именно, с 6-й по 15-ю версии.
-ms-border-radius
— некоторые старые версии IE будут поддерживать свойство. Очень старые не поддерживают его даже с префиксом.
Стоит ли использовать?
Поскольку все еще появляются новые свойства, префиксы придется использовать во многих ситуациях. Но все же многие новые свойства сегодня настолько хорошо поддерживаются в новых браузерах, что для них практически отпала необходимость в префиксах. Это касается, например, border-radius
.
Свойства, для которых иногда все еще применяют префиксы:
- тени (
box-shadow
) - градиенты
background-size
- трансформации (
transform
) - фильтры (
filter
)
Хочу сказать, что сегодня с каждым днем необходимость в префиксах снижается, но все же они по-прежнему не умирают и так будет еще долго. Просто очень многие люди, просто подавляющее число пользователей сидят сегодня в современных версиях браузеров, которые никакие префиксы для работы этих свойств не нужны.
С другой стороны, есть веб-разработчики перфекционисты, которые хотят, чтобы их творения хорошо работали везде, вот они и используют эти приставки. В общем, если вы работаете с CSS3, то вам полезно будет знать о существовании таких приставок.
Для облегчения написания кода с префиксами сегодня советуют использовать постпроцессор AutoPrefixer
, но лично я им не пользовался. Ну а что вы думаете о будущем вендорных префиксов?