Media-запросы
14.03.08 мобильные устройства, css3
Media-запросы это расширение CSS3 для различных media-типов, позволяющее контролировать отображение документа в зависимости от устройства, не задавая при этом media-тип отдельно. Это логическое выражение имеет два значения true или false, проверяющее одно или несколько свойств устройства вывода, для которого они применяются. Media запросы могут использоваться в тэге <link>, в т.н. at-rule правилах @import и @media, а также в XML processing instructions. Свойство CSS, связанное с выражением media-запроса работает только в случае, если выражение имеет значение true.
Логическое выражение может состоять из media-свойства или свойства с двоеточием (:) и значением, аналогично паре свойство/значение. Логическое варажение в media-запросе должно помещаться в круглые скобки (…). Примеры:
<link rel="stylesheet" type="text/css" href="/style.css"
media="all and (color)">
<?xml-stylesheet media="all and (color)" rel="stylesheet"
href="example.css" ?>
@import url(/style.css) all and (color);
@media all and (color) {
? one or more rule sets…
}В приведенных примерах media-запросы используются в атрибуте media элемента <link> и в инструкции обратки XML (XML processing instruction) и необязательным списком media-типов в правилах @import и @media. Во всех трех примерах media-запрос использует выражение all and (color) и означает, что запрос применяется ко всем media-типам, с возможностью показывать цвет.
Следующий пример применяется к переносным мобильным устройствам с размером экрана не менее 20em:
@media handheld and (min-width:20em) {
? one or more rule sets…
}В media-запросе можно использовать несколько выражений, разделяя их словом and. Следующее выражение задает стили CSS для экранных устройств с размером от 800 до 1280 px:
@import url(/style.css) screen and (min-width:800px)
and (max-width:1280px);В правилах at-rule можно также указывать несколько media-типов, разделяя их запятой:
@import url(/style.css) screen and (color), projection and (color);Запятая работает как «или» и в примере, приведенном выше задаются стили для цветных экранов и проекторов.
Как видно из примеров, для указания границ в media-свойствах могут использоваться префиксы min- или max-. Означают они соответственно «больше или равно» и «меньше или равно». W3C решил не использовать знаки < и >, поскольку в HTML и XML они имеют несколько другое назначение и заменить их на префиксы.
Как правило media-свойства применяются к определенным media-типам. Нет смысла задавать цвет, например, для "speech" media-типов или указывать ширину в px для "tty" — в данном случае выражения принимают значение false.
Список Media-свойств можно найти в последней рекомендации W3C media queries, от 6 Июня 2007.
| Свойство | Значение | Min/Max | Описание |
|---|---|---|---|
| color | integer | yes | number of bits per color component |
| color-index | integer | yes | number of entries in the color lookup table |
| device-aspect-ratio | integer/integer | yes | aspect ratio |
| device-height | length | yes | height of the output device |
| device-width | length | yes | width of the output device |
| grid | integer | no | true for a grid-based device |
| height | length | yes | height of the rendering surface |
| monochrome | integer | yes | number of bits per pixel in a monochrome frame buffer |
| resolution | resolution ("dpi" or "dpcm") |
yes | resolution |
| scan | "progressive" or "interlaced" |
no | scanning process of "tv" media types |
| width | length | yes | width of the rendering surface |
Свойства device-width и device-height относятся к размерам устройства, например размеру экрана.
Свойства width и height относятся к размерам окна просмотра, например окна браузера для экранных устройств или к размерам страницы для печатных устройств.
Разрешение указывается в dpi (dots per inch) или dpcm (dots per centimeter).
Соотношение сторон экрана (Aspect ratio) обозначается как 16/9 или 1280/1024 (ширина/высота).
В настоящее время поддержка media-запросов является ограниченной. Частичная поддержка включена в Opera 9, Safari 3, Opera Mini 4, Opera для Nintendo Wii, iPhone и Nokia S60. Apple предлагает использовать media-запросы для браузера iPhone, поскольку iPhone не поддерживает media-тип "handheld".
