Вендорные префиксы — своего рода приставки для CSS свойств, используемые производителями браузеров для экспериментальных CSS свойств, не принятых W3C. Например, -o-border-radius, -moz-opacity или —ms-filter.
Согласно спецификации CSS 2.1 CSS идентификаторы, которые начинаются с - или _ зарезервированы для CSS расширений браузеров. Наличие этих знаков в начале свойства гарантирует то, что в будущем расширения браузеров никогда не пересекутся со стандартными CSS свойствами. Т.е. ни один браузер не начнет «случайно» понимать свойство, которое для него не предназначено.
| Префикс | Вендор | Движок | Браузер |
|---|---|---|---|
| -moz- | Mozilla | Gecko | Mozilla, Firefox, SeaMonkey, Camino |
| -webkit- | Apple | WebKit | Google Chrome, Safari > 3 |
| -khtml- | KDE | KHTML | Konqueror, Safari |
| -o-, -op-, -xv- | Opera Software | Presto | Opera |
| -ms-, mso- | Microsoft | Trident | Internet Explorer 8 |
| -icab- | iCab Company | — | iCab |
| -atsc- | Advanced Television Standards Committee | — | — |
| -wap- | The WAP Forum | — | — |
| prince- | YesLogic | — | — |
| -ah- | Antenna House | — | — |
| -hp- | Hewlett Packard | — | — |
| -ro- | Real Objects | — | — |
| -rim- | Research In Motion | — | — |
| -tc- | TallComponents | — | — |
Причины появления вендорных префиксов
- CSS cвойство разработано только для конкретного браузера и не описано в спецификации
- CSS модуль находится в разработке W3C и не достиг статуса Candidate Recommendation
- CSS cвойство только частично реализует функции свойства, описанного в CSS модуле или спецификации
Как использовать?
Использовать проще некуда. Достаточно перечислить их все, а в конце поставить утвержденное W3C CSS свойство (если оно, конечно, имеется)
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-icab-border-radius: 5px;
border-radius: 5px;
}
Свойства с вендорными префиксами не соответствуют стандартам и не проходят валидацию
Ссылки
- CSS 2.1 Specification:: Vendor-specific extensions
- Microsoft CSS Vendor Extensions
- Mozilla CSS Extensions
- CSS vendor prefixes considered harmful
- Префикс или постхак
- Autoprefixer online (удаляет лишние вендорные префксы и добавляет недостающие)
Статья не завершена. Материал постоянно пополняется.
