MegaWeb.su Главная > CSS > Что такое CSS хаки или Вендорные префиксы

Что такое CSS хаки или Вендорные префиксы


21-02-2011, 20:00. Разместил: Admin
Что такое CSS хаки или Вендорные префиксыЧто такое CSS хаки или Вендорные префиксы
Если браузер не поддерживает и не понимает какое-то определённое CSS свойство, то каким образом начинает вдруг понимать это свойство после применения хака?
Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.

CSS хаки они же - Вендорные префиксы, вендорные суффиксы и вендорные окончания - это приставки, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств.

Вендорные префиксы заточенны под конкретный браузер и позволяют ему понимать экспериментальные CSS свойства и одновременно игнорировать записи, предназначенные для других браузеров, т.е. ни один браузер не начнет "случайно" понимать свойство, которое для него не предназначено.

Следует помнить, что свойства с вендорными префиксами не соответствуют стандартам и не пройдут валидацию, однако, их можно применять, т.к. в умелых руках это очень мощный инструмент. И многие ведущие студии рунета этим пользуются.

Использование вендорных префиксов(хаков) несложное, для элемента прописывается CSS свойство в прямом виде для браузеров, которые его понимают. Следом за ним через точку с запятой перечисляется то же самое свойство, но с разными вендорными префиксами для разных браузеров. Браузер из такого кода интерпретирует только то свойство, которое написано под него, а написанные для других браузеров игнорирует.

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

1. Если это свойство разработано только для определённого браузера и не описано в спецификации или CSS модуле
2. Если CSS модуль, к которому относится это свойство находится в разработке W3C и еще не достиг статуса кандидата в рекомендацию (Candidate Recommendation)
3. Если свойство только частично реализует функции свойства, описанного в CSS модуле или спецификации


Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.

Верстальщик уже сейчас может реализовать большинство возможностей предоставляемых CSS3, в том числе разнообразные переходы и анимации без использования скриптов, но используя вендорные префиксы.

Вендорные префиксы самых распространенных браузеров:

Вендорный префиксПроизводительБраузерБраузерный движок
-o-, -op-, -xv-Opera SoftwareOperaPresto
-moz-проект MozillaFirefox, SeaMonkey, Camino и др.Gecko
-ms-MicrosoftInternet Explorer 8Trident
-khtml-проект KDESafari до версии 3, Konqueror и др.KHTML
-webkit-AppleSafari 3+, Google Chrome и др.WebKit
-icab-AppleiCabWebKit


Пример написания:
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 */

Вернуться назад