Медіа-запити

Медіа-запити

Поряд із типами носіїв у CSS3 включено підтримку різних технічних параметрів пристроїв, на основі яких потрібно завантажувати ті чи інші стилі. Наприклад, можна визначити смартфон з максимальною роздільною здатністю 640 пікселів і для нього встановити одні стильові властивості, а для інших пристроїв інші. Також можна виявити різні характеристики на кшталт наявності монохромного екрана, орієнтації (портретна або альбомна) тощо. Усі характеристики легко комбінуються, тому допустимо задати стиль тільки для пристроїв в альбомній орієнтації із заданою роздільною здатністю екрана.

Можливості медіа-запитів не обмежуються виявленням мобільних пристроїв, з їхньою допомогою можна створювати адаптивний макет. Такий макет підлаштовується під роздільну здатність монітора і вікна браузера, змінюючи за необхідності ширину макета, кількість колонок, розміри зображень і тексту. Медіа-запити обмежують ширину макета і в разі досягнення цього значення (наприклад, за рахунок зменшення вікна або під час перегляду на пристрої із зазначеним розміром) уже застосовується інший стиль.

Усі запити починаються з правила @media, після чого слідує умова, в якій використовуються типи носіїв, логічні оператори та медіа-функції. Типи носіїв перелічено в табл. 1.

Табл. 1. Типи носіїв та їх опис

Наступні типи є коректними, але застарілими і не дають жодного результату (табл. 2).

Табл. 2. Застарілі типи носіїв

Логічні оператори, що застосовуються в медіа-запитах
and
Логічне І. Вказується для об'єднання кількох умов.

Приклад. Стиль для всіх кольорових пристроїв

@media all and (color) { ... }

not
Логічне НЕ. Вказується для заперечення умови.

Приклад. Стиль для всіх пристроїв крім принтера

@media all and (not print) { ... }
Оператор not оцінюється в запиті останнім, тому вираз

@media not all and (color) { ... }

слід розуміти як

@media not (all and (color)) { ... }
а не

@media (not all) and (color) { ... }

only
Застосовується для старих браузерів, які не підтримують медіа-запити. Старі браузери вважають ключове слово only типом носія, але оскільки такого типу не існує, то ігнорують весь стиль цілком. Сучасні браузери сприймають запис з only і без нього однаково.

Пример. Стиль для новых браузеров

@media only all and (not print) { ... }

У списку немає логічного оператора АБО, його роль виконує кома. Перерахування кількох умов через кому говорить про те, що якщо хоча б одна умова виконується, то стиль буде застосовано.

Приклад. Стиль для пристроїв з альбомною орієнтацією або мінімальною шириною 480 пікселів. @media all and (orientation: landscape), all and (min-width: 480px) { ... }
Також під час використання операторів слід вказувати дужки, щоб змінювати пріоритет операцій.

Медіа-функції
Медіа-функції задають технічні характеристики пристрою, на якому відображається документ. Стиль виконується в тому разі, якщо запит повертає істину, іншими словами, зазначені умови виконуються.

Більшість функцій містять приставку min- і max-, яка відповідають мінімальному і максимальному значенню. Так, max-width: 400px означає, що ширина вікна браузера менша за 400 пікселів, а min-width: 1000px, навпаки, повідомляє, що ширина вікна більша за 1000 пікселів.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)
Тип носія: print, screen
Значення: ціле число/ціле число

Визначає співвідношення ширини і висоти відображуваної області пристрою. Значення вказується у вигляді двох цілих чисел, що розділяються між собою слешем (/).

color (min-color, max-color)
Тип носія: print, screen
Значення: ціле число

Визначає кількість біт на канал кольору. Наприклад, значення 3 означає, що червоний, зелений і синій канал можуть відображати 23 кольори кожен, що загалом становить 512 кольорів (8×8×8). Якщо значення не вказано, тоді перевіряється, що пристрій кольоровий. @media screen and (color) { /* Для кольорових екранів */ body { background: #fc0; } } @media screen and (min-color:3) { /* Мінімум 512 кольорів */ body { background: #ccc; } }
color-index (min-color-index, max-color-index)
Тип носія: print, screen
Значення: ціле число

Визначає кількість кольорів, яку підтримує пристрій. У прикладі нижче показано стиль для екранів, що відображають не менше 256 кольорів. @media all and (min-color-index: 256) { ... }
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Тип носія: print, screen
Значення: ціле число/ціле число

Визначає співвідношення сторін екрана пристрою. Значення вказується у вигляді двох цілих чисел, розділених між собою слешем (/). У прикладі нижче показано, як встановити стиль для екранів зі співвідношенням сторін 16:9 і більше.

@media screen and (min-device-aspect-ratio: 16/9) { ... }
device-height (min-device-height, max-device-height)
Тип носія: print, screen
Значення: розмір

Визначає всю доступну висоту екрана пристрою або друкованої сторінки.

device-width (min-device-width, max-device-width)
Тип носія: print, screen
Значення: розмір

Визначає всю доступну ширину екрана пристрою або друкованої сторінки. У прикладі нижче залежно від роздільної здатності монітора встановлюється ширина шару. Так, для значення 1280 пікселів ширина макета задається як 1100px.

Браузери