Pull to refresh

Динамический css

Reading time 2 min
Views 3.5K
Browsers-small
При подгонке сайтов до единого вида во всех браузерах, верстальщик использует не один css хак.
Но зачем обычному пользователю с IE получать избыток кода для других браузеров firefox, opera, safari?!
Это проблема легко решается с помощью динамического css.

Первый раз я услышал о динамических css стилях на сайте cms «ModX», но так как эта cms меня не устраивала, я не стал вникать и в динамические стили.

На сегодняшний день существует отличное готовое решение для генерирования динамических css файлов под названием «Conditional-CSS». Оно имеет открытый код и распространяется под лицензией CDDL license.

Приведу пример 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.
Более подробно с этой библиотекой вы можете ознакомится на офиц. сайте, ссылка указана ниже.

Пример использования
Официальный сайт «Conditional-CSS»
Подписаться на заметки от Чернева(RSS)
Tags:
Hubs:
+43
Comments 129
Comments Comments 129

Articles