@media

Директива CSS @media може вживатися для застосування частини списку стилів на основі результату одного чи більше медіазапитів. За її допомогою можна задати медіазапит і блок CSS до застосування тоді та тільки тоді, коли цей медіазапит відповідає пристроєві, на якому використовується вміст.

[!NOTE] У JavaScript правила, створені за допомогою @media, можна отримати за допомогою інтерфейсу CSSMediaRule об'єктної моделі CSS.

Спробуйте його в дії

Синтаксис

Директива @media повинна стояти на зовнішньому рівні коду або бути вкладена в якусь іншу умовну групову директиву.

/* На зовнішньому рівні коду */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Вкладена в іншу умовну директиву */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Більше про синтаксис медіазапитів дивіться в статті Використання медіазапитів.

Опис

Значення <media-query-list> медіазапиту вміщає значення <media-type>, значення <media-feature> та логічні оператори.

Типи медіа

<media-type> описує загальні категорії пристроїв. Коли не використовується логічний оператор only, тип медіа є необов'язковим, – якщо він не вказаний, то вважається, що він дорівнює all.

all

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

print

Для сторінкових матеріалів і документів, що переглядаються на екрані в режимі попереднього перегляду перед друком. (Будь ласка, дивіться сторінкові медіа для отримання інформації про проблеми форматування, які специфічні для цих форматів.)

screen

Перш за все для екранів.

[!NOTE] CSS2.1 і Медіазапити 3 визначали декілька додаткових типів медіа (tty, tv, projection, handheld, braille, embossed і aural), але вони стали нерекомендованими в Медіазапитах 4 і не повинні використовуватися.

Можливості медіа

<media feature> описує конкретні характеристики користувацького агента, пристрою виведення чи оточення. Вирази можливостей медіа перевіряють на їхню присутність, значення або діапазон значень, і є цілковито необов'язковими. Кожен вираз можливості медіа повинен бути оточений дужками.

any-hover

Чи дає який-небудь доступний механізм уведення користувачеві змогу наводити курсор на елементи?

any-pointer

Чи є який-небудь доступний механізм уведення пристроєм-вказівником, і якщо так, то наскільки він точний?

aspect-ratio

Співвідношення ширини до висоти області перегляду.

color

Число біт на колірний компонент пристрою виведення, або нуль, якщо пристрій не кольоровий.

color-gamut

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

color-index

Число записів у таблиці пошуку кольорів пристрою виведення, або нуль, якщо пристрій не використовує таку таблицю.

device-aspect-ratio

Співвідношення ширини до висоти пристрою виведення. Нерекомендований від Медіазапитів рівня 4.

device-height

Висота поверхні візуалізації пристрою виведення. Нерекомендований від Медіазапитів рівня 4.

device-width

Ширина поверхні візуалізації пристрою виведення. Нерекомендований від Медіазапитів рівня 4.

display-mode

Режим, у якому виводиться застосунок: наприклад, повноекранний або режим зображення в зображенні. Додано в Медіазапитах рівня 5.

dynamic-range

Поєднання яскравості, контрастності та глибини кольору, які підтримуються користувацьким агентом і пристроєм виведення. Додано в Медіазапитах рівня 5.

forced-colors

З'ясувати, чи обмежує користувацький агент палітру кольорів. Додано в Медіазапитах рівня 5.

grid

Чи використовує пристрій сітку або бітовий екран?

height

Висота області перегляду.

hover

Чи дає основний механізм уведення користувачеві змогу наводити курсор на елементи?

inverted-colors

Чи обертає користувацький агент або операційна система кольори? Додано в Медіазапитах рівня 5.

monochrome

Кількість біт на піксель у монохромному буфері кадру пристрою виведення, або нуль, якщо пристрій не монохромний.

orientation

Орієнтація області перегляду.

overflow-block

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

overflow-inline

Чи можна прокручувати вміст, що не вміщається в область перегляду вздовж рядкової осі?

pointer

Чи є головний механізм введення пристроєм-вказівником, і якщо так, то наскільки точним він є?

prefers-color-scheme

З'ясувати, чи віддає користувач перевагу світлій, чи темній колірній схемі. Додано в Медіазапитах рівня 5.

prefers-contrast

З'ясовує, чи вимагає користувач від системи збільшити або зменшити контрастність між сусідніми кольорами. Додано в Медіазапитах рівня 5.

prefers-reduced-data

З'ясовує, чи запитав користувач вебвміст, що менше навантажує Інтернет-канал.

prefers-reduced-motion

Користувач віддає перевагу меншому рівню руху на сторінці. Додано в Медіазапитах рівня 5.

prefers-reduced-transparency

З'ясовує, чи ввімкнув користувач на своєму пристрої налаштування для зменшення прозорих або напівпрозорих шарових ефектів.

resolution

Піксельна щільність пристрою виведення.

scan

Чи має дисплей прогресивну або черезрядкову розгортку.

scripting

Визначає, чи доступно використання сценаріїв (тобто JavaScript). Додано в Медіазапитах рівня 5.

shape

З'ясовує форму пристрою, щоб розрізнити прямокутні та круглі дисплеї.

update

Як часто пристрій виведення може змінювати вигляд вмісту.

video-dynamic-range

Поєднання яскравості, контрастності та глибини кольору, які підтримує план відео користувацького агента і пристрою виведення. Додано в Медіазапитах рівня 5.

width

Ширина області перегляду, включно з шириною смуги прокрутки.

Логічні оператори

Логічні оператори not, and, only й or можуть використовуватися для створення складних медіазапитів. Також можна поєднувати декілька медіазапитів в одне правило, розділяючи їх комами.

and

Використовується для поєднання декількох можливостей медіа в один медіазапит, вимагаючи true від кожної з можливостей, щоб запит був true. Також використовується для поєднання можливостей медіа з типами медіа.

not

Використовується для заперечення медіазапиту, повертаючи true, якщо інакше запит повернув би false. Якщо цей оператор присутній в розділеному комами списку запитів, то заперечує лише конкретний запит, до якого застосовується.

[!NOTE] На рівні 3 ключове слово not не може використовуватися для заперечення окремого виразу можливості медіа, а лише цілого медіазапиту.

only

Застосовує стиль лише тоді, коли весь запит має відповідність. Це корисно, щоб не дати старим браузерам застосувати вибрані стилі. Коли only не використовується, старі браузери тлумачать запит screen and (max-width: 500px) як screen, ігноруючи решту запиту, і застосовують його стилі на всіх екранах. Якщо використовується оператор only, обов'язково повинен бути заданий тип медіа.

, (кома)

Коми вживаються для поєднання різних медіазапитів у одне правило. Кожен запит у списку, розділеному комами, розглядається окремо від інших. Таким чином, якщо будь-який запит у списку дає true, то все твердження медіа дає true. Інакше кажучи, списки поводяться як логічний оператор or.

or

Рівносильно операторові ,. Додано в Медіазапитах рівня 4.\

Клієнтські підказки користувацькому агентові

Частина медіазапитів має відповідні клієнтські підказки користувацькому агентові. Це заголовки HTTP, що запитують вміст, який наперед оптимізований для конкретних потреб медіа. Серед них Sec-CH-Prefers-Color-Scheme і Sec-CH-Prefers-Reduced-Motion.

Доступність

Щоб якнайкраще врахувати потреби людей, які змінюють розмір тексту на сайті, слід використовувати для ваших медіазапитів одиниці em, коли потрібні значення <length>.

Як em, так і px є дійсними одиницями, але em працює краще, якщо користувач змінює розмір тексту в браузері.

Також варто розглянути медіазапити чи клієнтські підказки користувацькому агентові, щоб покращити користувацький досвід. Наприклад, медіазапит prefers-reduced-motion або відповідний заголовок Sec-CH-Prefers-Reduced-Motion) можна використати для мінімізації кількості анімації чи руху, на основі побажань користувача.

Безпека

Оскільки медіазапити надають інформацію про можливості – і, відповідно, про функції та дизайн – пристрою, з яким працює користувач, існує потенціал їхнього зловживання для створення "відбитку", який ідентифікує пристрій, або принаймні категоризує його до певної міри деталізації, що може бути небажаним для користувачів.

У зв'язку з цим потенціалом браузер може вирішити якось викривити повернені значення, щоб запобігти їх використанню для точного ідентифікування комп'ютера. Браузер може також пропонувати додаткові заходи в цій галузі; наприклад, якщо ввімкнено налаштування Firefox "Опиратися відстеженню за відбитком", то чимало медіазапитів віддає усталені значення, а не значення, що представляють реальний стан пристрою.

Формальний синтаксис

@media <media-query-list> {
  <group-rule-body>
}
де 
<media-query-list> = <media-query>#
де 
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
де 
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>
де 
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>
де 
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
де 
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ \'<\' | \'>\' ]? \'=\'? <mf-value> | <mf-value> [ \'<\' | \'>\' ]? \'=\'? <mf-name> | <mf-value> \'<\' \'=\'? <mf-name> \'<\' \'=\'? <mf-value> | <mf-value> \'>\' \'=\'? <mf-name> \'>\' \'=\'? <mf-value>
де 
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
де 
<ratio> = <number [0,∞]> [ / <number [0,∞]> ]?

Приклади

Перевірка на типи медіа – друк і екран

@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Синтаксис діапазону дає змогу писати менш об'ємні медіазапити при перевірці будь-якої можливості, що приймає діапазон, як показано в наступних прикладах:

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

Більше прикладів – на сторінці Застосування медіазапитів.

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

Сумісність із браузерами

Дивіться також

• Модуль Медіазапитів CSS
• Застосування медіазапитів
• Інтерфейс CSSMediaRule
• Розширені можливості медіа Mozilla
• Розширені можливості медіа WebKit