• Статья
Уголок CSS: Медиа-запросы CSS3

Как было объявлено в нашей второй предварительной версии платформы в прошлом году, IE9 поддерживает медиа-запросы CSS3 (Media Queries). Медиа-запросы CSS3 позволяют задавать стили страниц на основе разных факторов отображаемых областей, таких как ширина, высота, ориентация, разрешение и пр. Разработчики могут использовать эти факторы, чтобы настроить свои сайты для просмотра на разных устройствах, таких как нетбук с маленьким экраном или широкоэкранный монитор. В этой статье я подробнее расскажу о медиа-запросах CSS3 и о разных сценариях, которые они позволяют.

Развитие медиа-запросов

Internet Explorer начиная с версии IE5 поддерживал типы медиа CSS2 "screen" и "print". Тип медиа "print" особенно удобен, если требуется изменять макет печатной страницы. Он исключает необходимость размещать на веб-сайтах отдельные копии сайтов, предназначенные для печати, и включает несколько полезных усовершенствований для печати, например разворачивание гиперссылок. Спецификация типов медиа CSS 2.1 включает определения для многих типов медиа, включая наладонные устройства, синтезаторы речи и телевизионные системы. Однако на практике широко применяются только типы "screen" и "print".

Медиа-запросы CSS3 расширяют понятие оптимизации для конкретных типов медиа, делая возможной оптимизацию для конкретных свойств медиа. Хотя тип медиа "screen" был вполне удобным, но существует много типов экранов — от мобильных телефонов с миниатюрными экранами и ноутбуков со средними экранами до настольных компьютеров, подключенных к широкоэкранным мониторам в 30 дюймов; современные экраны могут иметь более высокое разрешение, чем экраны недавнего прошлого. Как веб-разработчик, вы можете захотеть изменять свою веб-страницу для каждого из этих устройств, чтобы предоставить посетителям сайта возможность более удобной работы на их устройствах. Медиа-запросы CSS3 позволяют нацеливать CSS с нужной степенью обобщения или конкретизации.

Базовый пример

Чтобы создать медиа-запрос для целевых экранов шириной 1250 пикселей, можно написать следующее (примечание: ширина и высота экрана ("screen") в действительности относится к ширине и высоте окна браузера, а не к физическому экрану).

@media screen and (width:1250px) { ... }

Однако указание ширины целевого экрана (браузера) точно в 1250 пикселей на самом деле не так уж полезно, поскольку окно браузера не часто будет иметь ширину ровно в 1250 пикселей. Более целесообразно указывать диапазон размеров, например от 900 до 1300 пикселей:

@media screen and (min-width:900px) and (max-width:1300px) { ... }

На сайте тестового выпуска IE можно найти демонстрацию медиа-запросов CSS3, которая показывает использование нескольких разных медиа-запросов для изменения макета страницы на основе ширины вашего экрана (браузера). Страница оптимизируется как для широких, так и для очень узких экранов. Для просмотра результата измените окно вашего браузера в соответствии с тем, что вы видите на странице.

В широкоэкранном представлении страница использует макет с параллельным размещением больших изображений и описательного текста:

В узком представлении на странице используются обрезанные изображения, а также удаляются заголовки и описания.

Кроме создания правил @media в файлах CSS, медиа-запросы CSS3 можно также использовать в атрибуте media ссылки и в тегах style, а также в блоке @import. Несколько примеров:

<link rel="stylesheet" media="screen and (min-width:100px)" href="widescreenStyleSheet.css" />
<style type="text/css" media="print and (orientation:portrait)"> ... </style>
@import "widescreenStyleSheet.css" screen and (min-width:100px);

Характеристики медиа

Кроме ширины (width), IE9 поддерживает следующие характеристики медиа:

  • width — ширина области просмотра;
  • height — высота области просмотра;
  • device-width — ширина области отображения устройства;
  • device-height — высота области отображения устройства;
  • orientation — альбомная или книжная ориентация;
  • aspect-ratio — отношение характеристики медиа "width" к "height";
  • device-aspect-ratio — отношение характеристики медиа "device-width" к "device-height";
  • resolution — разрешение выходного устройства;
  • color — число бит на компонент цвета выходного устройства;
  • color-index — число записей в таблице подстановки цветов выходного устройства;
  • monochrome — число бит на пиксель в буфере монохромных кадров (0, если устройство не монохромное).

За исключением ориентации (orientation) все поддерживаемые в IE9 характеристики медиа можно использовать с префиксами "min-" и "max-".

Дальнейшие действия

Типы, размеры и возможности экранов, которые пользователи применяют для просмотра, становятся все более и более разнообразными. Медиа-запросы CSS3 облегчают веб-разработчикам задачу создания одного сайта, который обеспечивает прекрасное взаимодействие с пользователями на всех устройствах.

Если вы обнаружили ошибки медиа-запросов CSS3 при тестировании бета-версии IE9 или предварительных версий платформы, отправьте их на сайт Microsoft Connect.

— Шарон Ньюман (Sharon Newman), руководитель программы