Вендорные префиксы - верный путь к кроссбраузерности

Хотелось бы затронуть тему вендорных префиксов и их значения. Мы частично коснулись их в этой статье. Не откладывая эту тему в долгий ящик — начнем поэтапно рассматривать что есть что, и с чем это есть.

Префиксы — это приставки к некоторым свойствам CSS, которые ещё не успели принять в стандарт. Что-то вроде демо-версии. Каждый из нас понимает, что веб-разработка не стоит на месте! Вводятся всё новые стандарты, добавляются новые возможности и появляются новые браузеры. Естественно, не все нововведения удачно уживаются среди нашего с вами веб-мира.

Существует множество префиксов, но мы с вами рассмотрим лишь самые популярные. Почему не все? Не думаю, что кто-то из нас будет делать свой проект под каждый браузер в мире: хотя бы потому, что большинство людей ими не пользуются! Впрочем, про популярные браузеры и контингент их пользователей мы поговорим позже — это тоже немаловажная тема.

Префиксы и браузеры

Вернемся к префиксам:

-o- — префикс для Opera (с выходом 12 версии, практически потерял свой смысл)
-moz- — префикс для Mozilla
-ms- — префикс для Internet Explorer 8
-webkit- — Префикс для Chrome, Яндекс.Браузер, Амиго, Комета и Safari (иными словами этот префикс подходит для платформы Webkit)
-icab- — префикс для iCab

Итак, тонкую нить от префикса к соответствующему браузеру провели. А как ими пользоваться и когда?

Использование префиксов

Всё предельно просто (хоть и покажется сложно, на первый взгляд).

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)     //устанавливает прозрачность элемента

1	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) //устанавливает прозрачность элемента

Выше приведен пример использования префикса для Internet Explorer (-ms-).

Очень часто встречаются префиксы, при использовании таких свойств, как:

background-image
border-box
transition
box-shadow
linear-gradient

Вот небольшой пример, как сделать элемент кроссбраузерным:

background: rgba(248,80,50,1);
background: <strong>-moz-linear-gradient</strong>(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: <strong>-webkit-gradient</strong>(left top, right top, color-stop(0%, rgba(248,80,50,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(51%, rgba(246,41,12,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));
background: <strong>-webkit-linear-gradient</strong>(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: <strong>-o-linear-gradient</strong>(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: <strong>-ms-linear-gradient</strong>(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: <strong>linear-gradient</strong>(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1 );

background: rgba(248,80,50,1);

background: -moz-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,80,50,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(51%, rgba(246,41,12,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));

background: -webkit-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: -o-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: -ms-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);