Вендорные префиксы - это просто
Сегодня поговорим об Вендорных префикасах зачем они нужны и как их использовать.
Зачем нужны
Вендорные префиксы нужны чтобы "разделять" css свойства для браузеров. К примеру, Вы хотите, чтобы в Opera блоки div был синего цвета, а в Google Chrome был жёлтого, то Вам помогут Вендорные префиксы. Префиксы помогут Вам с кроссбраузерностью.
К примеру, если хотите использовать свойство, которое ещё разрабатывается.
В своё время, они позволяли уже года 3 назад использовать некоторые анимации без JavaScript
Как использовать
Все Вендорные префиксы начинаются либо с "_" (Нижнее подчёркивание) или с "-"(тире). Префиксы зарезервированы.
Давайте рассмотрим какие префиксы к каким браузерами относятся.
- -o-, -op-, -xv- относится к Opera.
- -moz- к Mozilla FireFox.
- -ms- к Microsoft.
- -khtml- к ранним версиям Safari.
- -webkit- к более поздним Safari, Google Chrome.
- -icab- к iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
- -khtml- используется в среде KDE в UNIX-системах
Если быть точнее - лучше смотреть на движок, на котором сделан браузер(всегда можно подглядеть в UserAgent)
Вендорный префикс | Производитель | Браузер | Браузерный движок |
---|---|---|---|
-o-, -op-, -xv- | Opera Software | Opera | Presto |
-moz- | проект Mozilla | Firefox, SeaMonkey, Camino и др. | Gecko |
-ms- | Microsoft | Internet Explorer 8 | Trident |
-khtml- | проект KDE | Safari до версии 3, Konqueror и др. | KHTML послужил основой для WebKit |
-webkit- | Apple | Safari 3+, Google Chrome и др. | WebKit |
Пример кода:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity:0.5;
-khtml-opacity:0.5;
-webkit-opacity:0.5;
или так:
-moz-border-radius: 5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-op-border-radius: 5px;
Этот код кроссбраузерно реализует прозрачность и скругление.
Вместо заключения
Усть так-же удобный онлайн-инструмент, который дописывает нудные префиксы и удаляет ненужные
http://autoprefixer.github.io/ru/
Фото взято с сайта
Материал подготовлен автором @zheev