Условные CSS

Автор: Евгений Рыжков Дата публикации:

кроссбраузерный кошмар Все браузеры поддерживают самые новые стандарты, на код реагируют полностью одинаково, лишены каких-либо багов — все это пока не имеет никакого отношения к реальности. Браузеры глючат, глючат по разному и это иногда выводит из себя.

Да, у нас конечно есть в арсенале CSS хаки. Но это не надежный метод, да к тому же к современным браузерам все сложнее найти хак: браузеры все лучше поддерживают стандарты. Хаки, основанные на том, что одни браузеры понимают такое-то CSS правило, а другие нет теряют свою актуальность. А разработчики браузеров нас не снабжают особыми конструкциями.

Исключением из правил тут только IE со своими условными комментариями. По видимому им пришлось ввести подобную конструкцию из-за бесчисленного перечня багов IE 5 и 6. Тут Microsoft обошел своих конкурентов и подумал о нас с тобой — web-разработчиках. Это ведь очень удобно: написал особое правило для определенной версии IE и у тебя не болит голова о том, что послезавтра выходит новый релиз браузера. Да и код к тому же валидный. Просто идеальное решение. Не могу только понять, почему же остальные передовые браузеры не переняли такую временами жизненно необходимую фичу.

Но в мире еще не перевелись энтузиасты! Один из них Allan Jardine — отец условных CSS.

Условные CSS. Что это?

Это CSS конструкция, которая позволяет указать точно, для какого браузера предусмотрено CSS правило. Перечень поддерживаемых браузеров:

IE — Internet Explorer
Gecko — Gecko браузеры (Firefox, Camino и т.п.)
Webkit — Webkit браузеры (Safari, Shiira и т.п.)
Opera
IEMac — Internet Explorer под Mac OS
Konq — Konqueror
IEmob — IE для мобильных устройств
PSP — Playstation
NetF — Net Front

Пример:

[if IE].container {
	height: 100%;
	width: 100%;
	[if IE 7]background: url(../images/ie7.png) no-repeat center center;
	[if lte IE 6]background: url(../images/ie.jpg) no-repeat center center;
}
[if Webkit].container {
	height: 70px;
	width: 400px;
	-webkit-border-radius: 30px;
	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	background: url(../images/webkit.png) no-repeat center 30px;
	background-color: #eee;
}

Прелесть в том, что CSS условия можно применять как классу, так и к отдельному правилу. В добавок к этому, данный скрипт «клеит» отдельные CSS файлы в один, уменьшая тем число обращений к серверу.

Как это использовать

пишем подобный CSS
отправляемся на сайт разработчика, перечисляем используемые CSS файлы
получаем php-файл, который кладем в папку с CSS файлами и подключаем его вместо стилей с помощью @import (по желанию можно получить C-файл)

<style type="text/css">
	@import url("path-to/css.php");
</style>

А как же валидность?

Браузер получает код без CSS условий, только код, который ему предназначался. Т.е. сами CSS условия браузер (и соответственно валидатор) не видит.

Простой наглядный демо пример с таким CSS:

.test {
	width: 500px;
	height: 500px;
	margin: 100px auto;
	[if IE] background: url(../img/ie.jpg) center center no-repeat;
	[if Opera] background: url(../img/opera.jpg) no-repeat;
	[if Gecko] background: url(../img/mozilla.png) no-repeat;
}

Недостатки

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

Ссылка на сервис

Conditional-CSS

Xiper