Медіа запити в CSS

• Зміст
  • Специфікація
  • Браузери

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

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

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

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

Тип	Опис
all	Всі типи . Це значення використовується за замовчуванням.
print	Принтери та інші принтери.
screen	Екран монітора.
speech	Мовні синтезатори, а також програми для відтворення тексту вголос. Сюди, наприклад, можна віднести мовні браузери. class="data">
Тип	Опис
braille	Пристрої на основі системі Брайля, які призначені для читання сліпими людьми.
embossed	Принтери, які використовують для друку систему Брайля.>	handheld	Налагоджені комп'ютери та аналогічні апарати.
projection	Проектори.
tty	Пристрої з фіксованим розміром символів (телетайпи, термінали, пристрої з обмеженнями дисплея).
tv	Телевізори.

Логічні оператори, що застосовуються в медіа-запитах

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) { ... }

Також під час використання операторів слід вказувати дужки, щоб міняти пріоритет операцій.

Медіа-функції

Медіа-функції встановлюють технічні характеристики пристрою, на якому відображається документ. Стиль виконується в тому випадку, якщо запит повертає істину, іншими словами зазначені умови виконуються. Так, 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 означає, що червоний, зелений і синій канал можуть відображати 2³ кольорів кожен, що становить 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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ширина макета</title> <style> div { padding: 10px; background: #e8bfad; margin: auto; } 
@media screen and (min-device-width: 1600px) { div {width: 1500px;} 
} 
@media screen and (device-width: 1280px) { div {width: 1100px;} 
} 
@media screen and (device-width: 1024px) { div {width: 980px;} 
}
</style>
</head>
<body> <div> Діабаз, формуючи аномальні геохімічні ряди, змінює вапняк, утворюючи на кордоні із Західно-Карельським підняттям своєрідну систему грабенів.
</div>
</body>
</html>

grid

Тип носія: print, screen

Значення: ні

Визначає, що це пристрій з фіксованим розмір символів. Розміри літер на такому пристрої займають однакову ширину та висоту і вишиковуються по заданій сітці. До таких пристроїв можна віднести термінали, а також телефони, які підтримують лише один шрифт.

Якщо вам потрібно форматувати текст, не вказуйте його розмір у пікселях, для подібних пристроїв використовується одиниця em.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Стиль для бабусяфону</title> <style> @media screen and (grid) and (max-width: 15em) { body { font-size: 2em; } 
}
</style>
</head>
<body> <p>Привіт! Як справи? Як сажа біла?</p>
</body>
</html></code> 

height (min-height, max-height)

Тип носія: print, screen

Значення: розмір

Висота області, що відображається.

monochrome (min-monochrome, max-monochrome)

Тип носія: print, screen

Значення: ціле число

Визначає, що пристрій є монохромним. Якщо вказано число, воно означає число біт на піксель. Так, значення 8 рівнозначне 256 відтінкам сірого (або іншого кольору). У цьому прикладі показаний стиль для монохромного та кольорового принтера.

@media print and (monochrome) { body { font-family: Times, 'Times New Roman' , Serif; }
 h1, h2, p { color: black; } 
} 
@media print and (color) { body { font-family: Arial, Verdana, sans-serif; }
 h1, h2, p { color: #556b2f; } 
}</code> 

orientation

Тип носія: print, screen

Значення: landscape | portrait

Визначає, що пристрій знаходиться в альбомному режимі (ширина більше висоти) або портретному (ширина менше висоти).

У цьому прикладі встановлюється різна фонова картинка у випадку альбомної (landscape) або портретної орієнтації (portrait).

@media screen and ( orientation: landscape) { #logo { background: url(logo1.png) no-repeat; } 
} 
@media screen and (orientation: portrait) { #logo { background: url(logo2.png) no-repeat; } 
}</code> 

resolution (min-resolution, max-resolution)

Тип носія: print, screen

Значення: дозвіл у dpi (точок на дюйм) або dpcm (точок на сантиметр)

Визначає роздільну здатність пристрою, наприклад, принтера. У прикладі нижчий стиль буде працювати для принтера з мінімальною роздільною здатністю 300 точок на дюйм.

@media print and (min-resolution: 300dpi) { ... } 

scan

Тип носія: tv

Значення: interlace | progressive

Визначає тип розгортки телевізора — черезрядкова (interlace) або прогресивна (progressive). При надстроковій розгортці телевізор спочатку показує непарні рядки кадру, потім парні, що дозволяє скоротити дані, що передаються. У прогресивній розгортці кадр передається і показується повністю.

width (min-width, max-width)

Тип носія: print, screen

css/value/size">розмір

Описує ширину області, що відображається. Це може бути вікно браузера або сторінка друку. У цьому прикладі при зменшенні вікна до 600 пікселів і менше змінюється колір фону веб-сторінки.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ширина сторінки</title> <style> body {background: #f0f0f0; } 
@media screen and (max-width: 600px) { body { background: #fc0; } 
}
</style>
</head>
<body> <p>Поки магма залишається в камері, мусковіт сингонально піднімає шток, у той час як значення максимумів змінюються в широких межах.
</p>
</body>
</html>

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

• Recommendation (Рекомендація) — специфікація про Добрена W3C і рекомендована як стандарт. потрібна допомога спільноти розробників з реалізації стандарту.
• Proposed Recommendation (Пропонована рекомендація) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження.
• Working Draft (Робочий проект) — більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
• Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення правок редакторами проекту.
• Draft (Чернетка специфікації) — перша чорнова версія стандарту.