Условия в CSS
2012-12-26
css
media
if
Условия в CSS они же медиа запросы (CSS media queries), используются для переключения/подключения CSS в зависимости от некоторых условий (свойств аппаратуры), часто применяются в css фреймворках.
Пример использования:
@media screen and (min-width: 1024px) {
#sidebar { width: 220px; }
}
@media screen and (max-width: 1023px) {
#sidebar { width: 110px; }
}
В данном примере условия работают для экранов мониторов (screen), и если ширина окна будет 1024px и более то будет активный 1-ый блок (=220px), если ширина окна будет 1023px и менее то будет активный 2-й блок (=110px).
Пример использования условий при подключении css файла:
<link rel="stylesheet" media="all and (min-device-width: 600)" href="/style.css" />
Некоторые из параметров:
min-width, max-width | Минимальная/максимальная ширина окна |
min-height, max-height | Минимальная/максимальная высота окна |
min-device-width, max-device-width | Минимальная/максимальная ширина экрана |
min-device-height, max-device-height | Минимальная/максимальная высота экрана |
Условия по девайсам:
all | Любые устройства |
screen | Экраны мониторов |
print | Принтеры |
handheld | Смарфоны и аналоги |
tv | Телевизоры |
projection | Проекторы |
Совместимость
Эта возможность появилась в CSS3, работает в:
Chrome, Firefox 3.6+, Safari 4+, Opera 10, IE 9+, Android 2+, iOS 2+
О других свойствах можно прочитать тут developer.mozilla.org