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

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

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

Для умовного застосування стилів за допомогою директив CSS @media та @import.
Для націлення на певні медіа <style>, <link>, <source> та інших HTML елементів за допомогою атрибуту media=.
Для перевірки та відстеження станів медіа за допомогою методів 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 {
  /* … */
}

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

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

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

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

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

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

Якщо створити запит на ознаку медіа, не вказуючи значення, то вкладені стилі будуть використовуватись, поки значення ознаки не рівне нулю (або, на Рівні 4 (англ.), 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) {
  /* … */
}

Щодо прикладу вище, якщо користувач має принтер із висотою сторінки 800 пікселів, то виказ медіа матиме значення true, оскільки спрацює перший запит. Так само, якщо користувач користується смартфоном у книжному режимі з висотою вікна перегляду 480 пікселів, спрацює другий запит, і виказ медіа знову матиме значення true.

Розворот значення запиту

Ключове слово not обертає значення цілого медіазапиту на протилежне. Воно заперечить лише той певний медіазапит, до котрого застосовано. (Отже, воно не буде застосовано до кожного медіазапиту в розділеному комами списку медіазапитів.) Ключове слово not не може бути використане для заперечення одного запиту ознаки, а лише цілого медіазапиту. not обробляється останнім у наступному запиті:

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

Це означає, що запит вище обробляється в наступному порядку:

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

Тобто його буде обчислено не так:

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

Ось іще один приклад, наступний медіазапит:

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

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

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

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

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

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

Покращення синтаксису в Рівні 4

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

Примітка: Специфікація "Медіазапити, рівень 4" має прийнятну підтримку у сучасних браузерах, втім, деякі ознаки медіа підтримуються недостатньо добре. Дивіться таблицю сумісності з браузерами @media для заглиблення.

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

На "Медіазапитах, рівень 4" це може бути переписано як:

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

За допомогою min- і max- можна було б перевірити попадання ширини в діапазон так:

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

На Рівні 4 це було б переписано так:

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

"Медіазапити, рівень 4" також додає способи поєднання медіазапитів за допомогою повної булевої алгебри з and, not і or.

Заперечення ознаки з `not`

Застосування not() до ознаки медіа заперечує таку ознаку в запиті. Наприклад, not(hover) дасть збіг, якщо пристрій не має функціоналу наведення:

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

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

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

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

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

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

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

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

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