Уголок CSS: Media Queries в CSS3

  • Article

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

Развитие Media Queries

Начиная с версии IE5 Internet Explorer поддерживал носители типов “screen” и “print”. Носители печатного типа особенно полезны при изменении макета печатаемой страницы. Они устраняют необходимость иметь отдельную версию сайта, предназначенную для печати, и допускают некоторые полезные типы оптимизации печати, вроде разворачивания гиперссылок. Спецификация типов носителей CSS2.1 включает определения многих типов носителей, в том числе портативных устройств, синтезаторов речи и телевизоров. Однако на практике наиболее широкое распространение получили экран и принтер.

CSS3 Media Queries расширяют понятие оптимизации на специфические типы носителей, допуская оптимизацию для особых свойств носителя. Экран – полезный тип носителя, но существует много разновидностей экранов – от мобильных телефонов с крошечными экранами, через лэптопы со средними экранами, и до настольных ПК, подсоединенных к широкоэкранным 30-дюймовым мониторам; более новые экраны могут иметь более высокое разрешение, по сравнению с выпущенными прежде. Как веб-разработчик вы, наверное, захотите переформатировать свою страничку для каждого из этих устройств, чтобы предоставить посетителю сайта наилучшее представление на каждом из них. CSS3 Media Queries позволяют настроить ваш CSS-код с такой степенью общности и с такой определенностью, как хочется.

Основной пример

Чтобы создать Media Querу, предназначенный для экранов шириной 1250 px можно написать следующее (замечание: ширина и высота экрана в действительности относятся к ширине и высоте окна браузера, а не физического дисплея):

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

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

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

На сайте IETestDrive можно найти демонстрацию CSS3 Media Queries, иллюстрирующую несколько разных media queries для изменения макета страницы, исходя из ширины экрана (браузера). Страница оптимизирована как для очень широких экранов, так и для очень узких. Чтобы наблюдать эффект измените размер окна браузера при просмотре.

При широкоэкранном просмотре на странице используется расположение изображений бок о бок с большими картинками и описательным текстом:

clip_image002

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

clip_image004

Вдобавок к созданию правил @media в CSS-файлах можно использовать CSS3 Media Queries в атрибуте media тэгов link и 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);

Параметры Media

IE9 поддерживает следующие параметры media:

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

За исключением ориентации все поддерживаемые IE9 параметры могут использоваться с префиксами «min-» и «max-».

Дальнейшие шаги

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

Если вы обнаружите ошибке в механизме CSS3 Media Query при тестировании бета-версии IE9 или Platform Previews, пожалуйста, сообщите о них на MicrosoftConnect .

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