Что такое CSS хаки или Вендорные префиксы
Если браузер не поддерживает и не понимает какое-то определённое CSS свойство, то каким образом начинает вдруг понимать это свойство после применения хака?
Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.
CSS хаки они же - Вендорные префиксы, вендорные суффиксы и вендорные окончания - это приставки, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств.
Вендорные префиксы заточенны под конкретный браузер и позволяют ему понимать экспериментальные CSS свойства и одновременно игнорировать записи, предназначенные для других браузеров, т.е. ни один браузер не начнет "случайно" понимать свойство, которое для него не предназначено.
Следует помнить, что свойства с вендорными префиксами не соответствуют стандартам и не пройдут валидацию, однако, их можно применять, т.к. в умелых руках это очень мощный инструмент. И многие ведущие студии рунета этим пользуются.
Использование вендорных префиксов(хаков) несложное, для элемента прописывается 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 |
Пример написания:
-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 */
Понравилась новость Что такое CSS хаки или Вендорные префиксы на MegaWeb.su? Сохрани в закладках или распечатай!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Что такое CSS хаки или Вендорные префиксы из категории Основы / CSS
- Основы / Шаблоны ⋙ CSS3 книга с эффектом перелистывания страниц
- Основы / CSS ⋙ Текст с тенью css3 text-shadow примеры
- Меню навигации ⋙ CSS3 горизонтальное выпадающее меню в стиле web 2.0
- Меню навигации ⋙ Простое горизонтальное CSS3 слайдер меню
- Меню навигации ⋙ Горизонтальное Lavalamp меню на CSS3
- Меню навигации ⋙ Горизонтальная раздвижная CSS3 навигация
- Меню навигации ⋙ Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
- Меню навигации ⋙ Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации
- Основы / CSS ⋙ Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
- Основы / Шаблоны ⋙ Блок DIV с закруглёнными углами и тенью с помощью CSS3
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.