Використання медіазапитів

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

Медіазапити використовуються для наступних речей:

Для умовного застосування стилів за допомогою директив CSS @media та @import.
Для націлення на певні медіа <style>, <link>, <source> та інших HTML елементів за допомогою атрибуту media= або sizes=".
Для перевірки та відстеження станів медіа за допомогою методів Window.matchMedia() та EventTarget.addEventListener().

Примітка: Приклади на цій сторінці використовують медіазапит CSS @media для ілюстративних потреб, однак базовий синтаксис залишається однаковим для всіх типів медіазапитів.

Синтаксис

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

Типи медіа визначають широкі категорії пристроїв, до яких застосовується медіазапит: all (усі), print (друк), screen (екран), speech (мовлення).

Тип є необов'язковим (усталено вважається рівним all), крім випадків використання логічних операторів not або only.
Ознаки медіа описують певну характеристику користувацького агента, пристрою виведення чи середовища:
Наприклад, риса hover дає змогу запитові перевірити, чи підтримує пристрій наведення курсора. Вирази ознак медіа перевіряють присутність таких ознак або певних значень, і є цілком необов'язковими. Кожен вираз ознаки медіа мусить бути оточений дужками.
Логічні оператори можуть використовуватись для створення складних медіазапитів: not (не), and (і) та only (лише). Також можна поєднувати кілька медіазапитів в одне правило, розділяючи їх комами.

Медіазапит обчислюється в true, коли тип медіа (якщо вказаний) відповідає пристроєві, на котрому відбувається перегляд документа і всі вирази ознак медіа обчислюються в true. Запити, що включають невідомі типи медіа, завжди обчислюються в false.

Примітка: Файл стилів із медіазапитом, прикріпленим до відповідного тега <link>, буде стягнений (англ.) навіть якщо запит обчислюється у false; стягнення відбудеться, але пріоритет такого стягнення буде куди нижчим. Попри це, такі стилі не будуть застосовані, якщо (або поки) медіазапит не матиме значення true. Про причини такої поведінки можна прочитати в блозі Tomayac: Чому браузер стягує файли стилів із невідповідними медіазапитами (англ.).

Націлення на типи медіа

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

@media print {
  /* … */
}

Також можна цілитись на кілька категорій пристроїв. Наприклад, наступна директива @media використовує два медіазапити, щоб націлитись як на пристрої з екраном, так і на принтери:

@media screen, print {
  /* … */
}

Перелік доступних медіатипів можна переглянути в розділі типів медіа. У зв'язку з тим, що медійні типи описують дуже широкі категорії пристроїв, більшість колись визначених медійних типів стали нерекомендованими, а залишаються лише screen, print та all. Щоб націлюватись на більш конкретні атрибути, слід натомість використовувати медійні ознаки.

Націлення на ознаки медіа

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

@media (hover: hover) {
  /* … */
}

Медійні ознаки бувають або неперервними, або дискретними.

Дискретні ознаки набувають значень з обмеженого набору можливих ключових слів. Наприклад, дискретна ознака orientation набуває значень landscape і portrait.

@media print and (orientation: portrait) {
  /* … */
}

Чимало неперервних ознак можуть використовуватися з префіксами "min-" або "max-" для вираження обмежень "умови мінімуму" або "умови максимуму". Наприклад, наступний CSS застосує стилі лише якщо ширина області перегляду браузера рівна або менша як 1250 пікселів:

@media (max-width: 1250px) {
  /* … */
}

Також це можна записати так:

@media (width <= 1250px) {
  /* … */
}

За допомогою медійних запитів неперервної ознаки можна або використовувати префікси зі включенням min- і max-, або стисліші оператори неперервного синтаксису <= і =>.

Наступні медіазапити – рівносильні:

@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

@media (30em <= width <= 50em) {
  /* … */
}

Неперервні порівняння вище – включні. Щоб не включати значення порівняння, використовуйте < і >.

@media (30em < width < 50em) {
  /* … */
}

Якщо створити запит медійної ознаки, не задавши значення, то вкладені стилі будуть застосовуватися, поки значення ознаки буде відмінним від 0 або none. Наприклад, наступний CSS буде застосований на будь-якому пристрої із кольоровим екраном:

@media (color) {
  /* … */
}

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

@media speech and (aspect-ratio: 11/5) {
  /* … */
}

Для отримання більшої кількості прикладів медіазапитів з ознаками медіа, дивіться довідкові сторінки відповідних ознак.

Створення складних медіазапитів

Іноді хочеться створити медіазапит, що залежить від кількох умов. Тоді на сцену виходять логічні оператори: not (не), and (і) та only (лише). Крім того, можна поєднувати кілька медіазапитів у розділений комами список; це дає змогу застосовувати однакові стилі в різних ситуаціях.

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

Примітка: У більшості випадків використовується тип медіа all – коли не вказаний інший. Втім, якщо використовується оператор not або only, то вказання типу медіа є обов'язковим.

Поєднання кількох типів або ознак

Ключове слово and поєднує ознаку медіа із типом медіа або з іншими ознаками медіа. Наступний приклад поєднує дві ознаки медіа, щоб обмежити застосування стилів пристроями з альбомною орієнтацією та шириною не меншою 30 емів:

@media (min-width: 30em) and (orientation: landscape) {
  /* … */
}

Аби обмежити дію стилів пристроями з екраном, можна приєднати ознаки медіа ланцюжком до типу медіа screen:

@media screen and (min-width: 30em) and (orientation: landscape) {
  /* … */
}

Перевірка кількох запитів

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

Наступне правило містить два медіазапити. Стилі блоку будуть застосовані, якщо пристрій користувача має висоту 680 пікселів або більше чи якщо область перегляду браузера перебуває в портретному режимі (висота області перегляду більша за її ширину):

@media (min-height: 680px), screen and (orientation: portrait) {
  /* … */
}

У цьому прикладі, якщо користувач друкує в PDF і висота сторінки – 800 px, то медіазапит повертає істину, тому що перший запит-компонента – той, що перевіряє, чи область перегляду має висоту 680px або більше – істинний. Аналогічно, якщо користувач користується смартфоном у портретному режимі з висотою області перегляду 480px, то медіазапит повертає істину, тому що істинний другий запит-компонента.

У розділеному комами списку медійних запитів окремі медійні запити закінчуються комою або, у випадку останнього медіазапиту в списку, початковою дужкою ({).

Обертання значення запиту

Ключове слово not обертає значення одного медіазапиту. Наприклад, стилі CSS у цьому медіазапиті застосуються до всього, крім друкованих медіа:

@media not print {
  /* … */
}

Слово not заперечує лише той медіазапит, до якого застосовується. Воно, коли не скористатися дужками, заперечує всі ознаки в медах медіазапиту, в якому вміщене. Це означає, що в розділеному комами списку медіазапитів кожне not застосовується до одного запиту, в якому вміщене, застосовуючись до всіх ознак цього єдиного запиту. У цьому прикладі not застосовується до першого медіазапиту, який закінчується першою комою:

@media not screen and (color), print and (color) {
  /* … */
}

Наведений вище запит обробляється так:

@media (not (screen and (color))), print and (color) {
  /* … */
}

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

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

Наступний запит:

@media not all and (monochrome) {
  /* … */
}

обчислюється як цей:

@media not (all and (monochrome)) {
  /* … */
}

Але не як цей:

@media (not all) and (monochrome) {
  /* … */
}

Щоб заперечити одну ознаку в медіазапиті, слід використовувати дужки. Обмеження not і ознаки медіа дужками обмежує компоненти запиту, які заперечуються.

У цьому прикладі заперечується медійна ознака hover, але не медійний тип all:

@media all and (not(hover)) {
  /* … */
}

Умова not(hover) дає збіг, якщо пристрій не має можливості наведення курсора. У цьому випадку, у зв'язку з дужками, not застосовується до hover, але не до all.

Покращення сумісності зі старими браузерами

Ключове слово only не дає старим браузерам, які не підтримують медіазапити з медійними ознаками, застосовувати дані стилі. Це ніяк не діє в сучасних браузерах.

@media only screen and (color) {
  /* … */
}

Перевірка кількох ознак з `or`

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

@media (not (color)) or (hover) {
  /* … */
}

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

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.