Медіа-запити
Характеристики властивості
У яких браузерах працює?
| 9.0+ | 1.0+ | 10.0+ | 4.0+ | 3.6+ | 2.0+ | 2.0+ |
Які версії CSS використовуються?
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| - | - | - | + |
Навіщо використовується?
Як відомо зі специфікації CSS, особливий стиль оформлення можна створювати для окремого типу пристрою. З виходом специфікацій версії CSS3 стало ще коригувати оформлення в залежності від технічних можливостей цих самих пристроїв. Як приклад, можна обчислити девайс, у якого максимальна роздільна здатність екрану 640 пікселів і скласти для нього окрему таблицю стилів, а для інших пристроїв можна генерувати своє оформлення. Крім цього, з легкістю можна визначати такі показники, як монохромність екрану, орієнтації сторінок при виведенні та інші корисні характеристики. Також варто зазначити, що ці параметри можна кооперувати. Таким чином ми можемо визначити унікальний стиль для пристрою, який має певну роздільну здатність та орієнтацію сторінок.
Покладаючись на всі ці переваги CSS3, стало можливим створювати адаптивні ресурси, які гармонійно відображатимуться за будь-яких умов та певних індивідуальних технічних характеристик. Так, при зменшенні ширини вікна браузера чи екрану можна перевизначати кількість колонок на веб-сайті або розміри ключових блоків, підганяючи їх під потрібні габарити.
Як правильно задавати?
Ключова характеристика медіа-запиту це правило @media, з нього необхідно починати всі запити. Після нього вказують певний тип пристрою, для якого складаєтьсяоформлення. За цим слідує вказівка логічного оператора та медіа-функції. Різновид типів носіїв, через які може виводитись інформація, представлені нижче:
| Носій | Пояснення |
| all | Відповідає всім можливим носіям. Це значення встановлено за замовчуванням |
| braille | Носій, який працює за принципом Брайля. Такі пристрої призначені для людей, які не бачать. |
| embossed | Принтери, які друкують інформацію за принципом Брайля (призначено для людей з обмеженим зором). |
| handheld | Відповідає КПК та схожим пристроям. |
| Друкуючі пристрої. | |
| проектування | Проектор. |
| screen | Монітор. |
| speech | Пристрій, який зчитує інформацію та перетворює її на голосовий формат. Як приклад виступає мовний браузер. |
| tty | Пристрої, у яких прописано стандартний розмір символів та дисплеїв (наприклад, телетайп). |
| tv | ТБ. |
Логічні оператори з прикладами використання у коді
Союз, який призначений для поєднання різних умов. Його логічне значення -і. Нижче наведено приклад, який формує стильове оформлення для кольорових носіїв.
Варто зазначити, що цей оператор має не високий пріоритет зчитування, тому він береться до уваги системою в останній момент.
Застосування цього оператора розраховане на оптимізацію застарілих браузерів, які можуть не підтримувати медіа-запити
Логічні оператори виключають присутність елемента, що у логічному сенсівиконував би функції"або". Натомість застосовуються коми. Тобто, у певному наборі умов застосування стилів буде здійснено, якщо хоча б одне з них підтвердиться. Також слід відзначити роль дужок у синтаксисі цих операторів, вони визначають пріоритет операції при зчитуванні коду.
Наведений приклад визначає оформлення для пристроїв з альбомною орієнтацією сторінок або тих апаратів, у яких мінімальна ширина екрана 480 пікселів.
Медіа-функції
Функції здійснюють завдання щодо уточнення певних технічних характеристик під час виведення документа. Принцип роботи умови ґрунтується на зчитуванні справжнього значення. Тобто якщо програмоване твердження виконується, то і стиль буде задіяний.
Грунтуючись на практичному досвіді можна сказати, що переважна більшість функцій працюють за принципами масивів із зазначеними межами. Тобто умова перебуватиме на мінімальному чи максимальному значенні певного параметра. Для цього використовуються приставкиmin-таmax-.
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
color (min-color, max-color)
Ця функція включає стильове оформлення відповідно до колірних можливостей пристрою, а саме кількість біт на канал основного кольору. Щоб картина прояснилася, пропоную розглянути простий приклад. Припустимо, що встановлене значення найменшої можливої колірної гами є число 3. Це говорить про те, що пристрій має підтримувати 23 відтінки кожного з основних кольорів. Прорахувавши всі можливі комбінації кольорів, отримаємо, що при такому значенні, щоб оформлення застосовувалося, потрібно, щоб пристрій підтримував як мінімум 512 кольорів. Нижчедивимося приклад
color-index (min-color-index, max-color-index)
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Ця функція призначена для визначення співвідношення екрана пристрою, для якого складалося оформлення. Для цього достатньо вказати два числа, які відповідають висоті та ширині екрана. Ці два значення повинні розділятися між собою слішем (/). Нижче наведено приклад для девайсів із співвідношенням 16:9 і більше
device-height (min-device-height, max-device-height)
У цьому випадку йдеться про точне визначення повної висоти пристрою, на який завантажуватиметься інформація. Така функція застосовується у всіх цифрових носіях, за винятком пристроїв типуspeech.
device-width (min-device-width, max-device-width)
Аналогічно до попередньої функції, тільки цей оператор зачіпає значення ширини. Такою ж функцією користуються у всіх типах пристроїв, крім мовних браузерів і схожих пристроїв. Нижче наведено приклад, згідно з яким можна визначити ширину сторінки в залежності від роздільної здатності екрана:
Повідомляє системі, що цей пристрій виводу розпізнає лише один шрифт, не використовуючи при цьому параметри його висоти та інтервалів між рядками та літерами. Такі пристрої в наш час вже рідкість, але іноді трапляються. Наприклад, банківські термінали. Для таких пристроїв характерне використання одиниць em (якщо все ж таки довелося вдатися до форматування), як показано в прикладі
height (min-height, max-height)
Робота функції дуже схожа на CSS-властивість визначення висоти елемента. У цьому випадку визначається висота активної зони, яка захоплює певну ділянку інформації.Цей параметр залежить від висоти екрана пристрою і не може підвищувати цей показник, за винятком того, коли сторінка може масштабуватися.
monochrome (min-monochrome, max-monochrome)
Визначає показник монохромності пристрою. Це дозволяє для чорно-білого дисплея скласти більш просте у плані кольору оформлення. Як значення функції виступають звичайні числа, які повідомляють навантаження біт на 1 піксель. Щоб було зрозуміліше, при вкаанні числа 8 здійснюватиметься пошук пристрою, який зможе розпізнати 256 відтінків необхідного кольору. Наприклад,
Функція розпізнає орієнтацію сторінок у пристрої. Існує дві досить поширені орієнтації: альбомна та книжкова. У першому випадку у сторінки ширина перевищуватиме показник висоти, а в другому - з точністю до навпаки. Нижче наведено приклад, у якому фонове зображення змінюється в залежності від встановленої орієнтації пристрою
Resolution (min-resolution, max-resolution)
Встановлює дозволи пристрою, що зчитує, на основі чого буде застосоване задане оформлення. Нижче показано, як можна визначити оформлення для принтера, у якого роздільна здатність становить 500 точок на дюйм робочого простору.
Ця функція призначена тільки для роботи з телевізорами. Таким чином, можна визначити спосіб зчитування інформації даним пристроєм. Взагалі, існує 2 способи:
- Перший метод називається чересрядковий (interlace) - спрощений спосіб зчитування інформації по якому спочатку виводяться парні рядки кадру, а потім не парні.
- Прогресивний (progressive) метод працює за складним і виводить повну інформацію і відразу.
width (min-width, max-width)
Вказує на ширину активної зони екрана або браузера. Найчастіше цей параметр не перевищує ширини екрана пристрою для виведення інформації. Цей параметр застосовується при адаптивній верстці, коли потрібно налагодити нормальне оформлення для пристроїв з різною шириною екрана. Нижче наведено один невеликий приклад, за яким при зміні ширини змінюватиметься колір заднього фону