представлять
Нет сомнений в том, что любой веб-дизайнер или разработчик, попытавшийся использовать CSS, обнаружит, что разные браузеры требуют разных объявлений стилей. Эти неприятности возникают из-за разной степени целостности реализации CSS в разных браузерах и их версиях. Условный CSS — решение этой проблемы, взяв идею синтаксиса условных комментариев Internet Explorer и встроив ее в объявление CSS.
Основное использование
Условный CSS в основном используется для указания того, следует ли использовать конкретный оператор CSS в конкретном браузере. Конечно, вы не захотите делать это очень часто, но это может быть очень полезно, когда вам нужно настроить таргетинг на браузер. В списке поддержки U4EA вы можете увидеть, что большинство браузеров поддерживают этот метод.
Любое объявление или блок CSS может иметь префикс условных объявлений. Существует три основных типа префиксов:
[если {!} браузер]
[если {!} версия браузера]
[if {!} условие версии браузера]
! — отрицание утверждения (например, НЕ) — необязательно.
браузер - браузер, для которого сделано объявление
«IE» — Internet Explorer
«Gecko» — браузер на базе Gecko (Firefox, Camino и т. д.).
«Webkit» — браузеры на основе Webkit (Safari, Shiira и т. д.).
«SafMob» — мобильное Safari (iPhone/iPod Touch)
«Опера» — браузер Opera.
«IEMac» — версия Internet Explorer для Mac.
«Конк» — Конкерор
«IEmob» — IE для мобильных устройств.
«PSP» — портативная PlayStation
'NetF' - Net Front (Извините за незнание Сахара и Помидоров, я не знаю, что это такое)
версия - целевая версия браузера
условие — арифметический оператор
лт - меньше чем
lte - меньше или равно
экв - равно
gte — больше или равно
гт - больше, чем
Некоторые примеры условных операторов:
// Пример синтаксиса условного CSS
[if IE] — если браузер IE
[if ! Opera] — если браузер не Opera.
[if IE 5] — если браузер IE 5
[if lte IE 6] — Если браузер IE 6 или ниже (IE 5, IE 4 и т. д.)
[if ! gt IE 6] — эквивалент приведенному выше утверждению, если версия браузера не выше IE 6.
Потому что многие экземпляры думают, что div — это класс блока с шириной и отступом. Так что в IE 5 он также должен вести себя нормально (я вижу, что многие люди отказались от поддержки IE 5, но это классический пример). Боксовая модель IE 5 не является стандартной, поэтому ее можно решить с помощью условного CSS:
// Пример условной блочной модели CSS
div.box {
ширина: 400 пикселей;
[если IE 5] ширина: 600 пикселей;
отступ: 0 100 пикселей;
}
Как видите, условный CSS позволяет поддерживать только один файл CSS вместо нескольких файлов, требующих использования условных комментариев IE. Это помогает упростить обслуживание и делает код более понятным.
Идя еще дальше, важной особенностью условного CSS является то, что когда он находит декларацию @import CSS, он автоматически открывает и вставляет файл, который необходимо импортировать. Это сокращает время загрузки страницы, поскольку браузеру нужно выполнить только один HTTP-запрос для файла CSS.
Хотя условный CSS в основном используется для разных версий браузеров IE, условный CSS также весьма полезен, когда вы сталкиваетесь с ошибками в других браузерах, которые трудно исправить (в основном с использованием Javascript для исправления). Примеры включают ошибки фонового изображения в Firefox 2 и Safari 2, в которых отсутствовала поддержка display: inline-block. Эти ошибки исправлены в последних версиях этих браузеров, но когда эти браузеры занимают определенную долю рынка, обратная совместимость очень важна.