Динамический css
При подгонке сайтов до единого вида во всех браузерах, верстальщик использует не один css хак.
Но зачем обычному пользователю с IE получать избыток кода для других браузеров firefox, opera, safari?!
Это проблема легко решается с помощью динамического css.
Первый раз я услышал о динамических css стилях на сайте cms «ModX», но так как эта cms меня не устраивала, я не стал вникать и в динамические стили.
На сегодняшний день существует отличное готовое решение для генерирования динамических css файлов под названием «Conditional-CSS». Оно имеет открытый код и распространяется под лицензией .
Приведу пример css кода с использованием «Conditional-CSS»:
[if IE].container {
height: 100%;
width: 100%;
[if IE 7]background: url('ie7.png') no-repeat center center;
[if lte IE 6]background: url('ie.jpg') no-repeat center center;
}
[if Webkit].container {
height: 70px;
width: 400px;
background: url('webkit.png') no-repeat center 30px;
}
[if Opera].container {
height: 60px;
width: 100%;
background: url('opera.png') no-repeat center 10px;
}Это работает так — для пользователя, к примеру, браузера opera будет отдаваться код только для браузера опера.
Основные конструкции:
- [if {!} browser]
- [if {!} browser version]
- [if {!} condition browser version]
Поддерживаемые браузеры:
- IE - Internet Explorer
- Gecko - Gecko браузеры (Firefox, Camino etc)
- Webkit - Webkit браузеры (Safari, Shiira etc)
- Opera
- IEMac - Internet Explorer для Mac
- Konq - Konqueror
- IEmob - IE мобайл
- PSP - Playstation Portable
- NetF - Net Front
Ну и конструкции для версии:
- lt - Ниже
- lte - Ниже или равно
- eq - Равно
- gte - Выше или равно
- gt - Выше
Conditional-CSS написан на трех языках: PHP, С, С#. Мой выбор конечно падает на родной любимый php.
Более подробно с этой библиотекой вы можете ознакомится на офиц. сайте, ссылка указана ниже.
Спасибо, добавим в копилку опыта)
Полезно.
Усложнение по-моему, дополнительные стили для ИЭ прописываются очень легко и без такой заморочки, а во всех остальных можно добиться максимального совпадения…
спасибо. интересно.
Только не совсем понял юмор по-поводу «обычного пользователя IE» и «избыток кода для других браузеров».
В моей практике получается совсем наоборот. Пишеться код для «обычного пользователя для FF, Op, Sa» а потом добавляется «избыток кода» для не совсем «обычных» пользователей IE.
P.S. Правда, я тут тоже погорячился: «не совсем обычный пользователь IE» – это я про IE6 говорил ;)
Ну это был простой пример.
К примеру, пользователю IE не нужен хак для сафари, так же как и Safari хак для IE ;-)
Да, вещь отличная. Конечно, можно заморочиться и сделать верстку одинаковой для большего количества браузеров, но это не спасает. И все же двойная ситуация. Абстракция от кроссбраузерной верстки – одновременно плюс, но так же и минус.
Спасибо. Пригодится.
ррр… месяц назад то же самое написал на пхп :)
Неплохая статья, возьму на заметку.
Кто то сталкивался с отправкой заголовков для CSS файлов?
(для кеширования документов браузерами)
Очень много времени трачу на подгонку верстки и дизайна под различные браузеры. Знающие люди, дайте ссылку на какой нибудь полезный архив по хакам и тому подобным вещам, чем сами пользуетесь.
ничем особым не ользуюсь, опытом разве что.
А статья гут! делаем в моске закладочку ))
Статье год, а я только что ее нашел, сайт перекосило в эксплорере. В опере и мазиле все ок, нашел эту статью, но пока не понял что к чему в динамических css. пойду искать дальше :) успехов!
оперу на помойку! Сначала не понравилась как пользователю, через 3 года как сайтоделателю. В общем лажа полная.