Что такое CSS хаки или Вендорные префиксы
21-02-2011, 20:00. Разместил: Admin
Что такое CSS хаки или Вендорные префиксыЕсли браузер не поддерживает и не понимает какое-то определённое CSS свойство, то каким образом начинает вдруг понимать это свойство после применения хака?
Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.
CSS хаки они же - Вендорные префиксы, вендорные суффиксы и вендорные окончания - это приставки, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств.
Вендорные префиксы заточенны под конкретный браузер и позволяют ему понимать экспериментальные CSS свойства и одновременно игнорировать записи, предназначенные для других браузеров, т.е. ни один браузер не начнет "случайно" понимать свойство, которое для него не предназначено.
Следует помнить, что свойства с вендорными префиксами не соответствуют стандартам и не пройдут валидацию, однако, их можно применять, т.к. в умелых руках это очень мощный инструмент. И многие ведущие студии рунета этим пользуются.
Использование вендорных префиксов(хаков) несложное, для элемента прописывается CSS свойство в прямом виде для браузеров, которые его понимают. Следом за ним через точку с запятой перечисляется то же самое свойство, но с разными вендорными префиксами для разных браузеров. Браузер из такого кода интерпретирует только то свойство, которое написано под него, а написанные для других браузеров игнорирует.
Основные причины использования вендорных префиксов:
1. Если это свойство разработано только для определённого браузера и не описано в спецификации или CSS модуле
2. Если CSS модуль, к которому относится это свойство находится в разработке W3C и еще не достиг статуса кандидата в рекомендацию (Candidate Recommendation)
3. Если свойство только частично реализует функции свойства, описанного в CSS модуле или спецификации
2. Если CSS модуль, к которому относится это свойство находится в разработке W3C и еще не достиг статуса кандидата в рекомендацию (Candidate Recommendation)
3. Если свойство только частично реализует функции свойства, описанного в CSS модуле или спецификации
Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.
Верстальщик уже сейчас может реализовать большинство возможностей предоставляемых CSS3, в том числе разнообразные переходы и анимации без использования скриптов, но используя вендорные префиксы.
Вендорные префиксы самых распространенных браузеров:
| Вендорный префикс | Производитель | Браузер | Браузерный движок |
| -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- | Apple | Safari 3+, Google Chrome и др. | WebKit |
| -icab- | Apple | iCab | WebKit |
Пример написания:
border-radius:15px 0 15px 0; /* Валидное свойство CSS 3 скругление углов, значение(цифра) задаёт радиус скругления*/
-moz-border-radius:15px 0 15px 0; /* Firefox */
-webkit-border-radius:15px 0 15px 0; /* Safari, Chrome */
-khtml-border-radius:15px 0 15px 0; /* Konqueror */
-moz-border-radius:15px 0 15px 0; /* Firefox */
-webkit-border-radius:15px 0 15px 0; /* Safari, Chrome */
-khtml-border-radius:15px 0 15px 0; /* Konqueror */
Вернуться назад