Медіа-запити CSS -- опис, особливості використання та рекомендації

Медіа-запити — це функція CSS, яка дозволяє вмісту веб-сторінки адаптуватися до різних розмірів екрану і дозволами. Вони є невід'ємною частиною гнучкого веб-дизайну і використовуються для налаштування зовнішнього вигляду веб-сайтів для декількох пристроїв з різним розміром екрану. Так, Media Queries — це модуль CSS3 що дозволяє перетворювати контент в такі умови, як дозвіл екрану смартфона або комп'ютера. Став рекомендованим W3C стандартом в червні 2012 року і активно застосовується сьогодні в веб-розробці і графічному дизайні.


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

Історія

Медіа-запити були вперше визначені в початковому реченні CSS Hocon Wium Lie в 1994 році, але на той момент не стали частиною CSS1. Рекомендація HTML4 від 1997 року показує приклад того, як в майбутньому можуть бути додані ці компоненти. У 2000 році W3C почав роботу над Media Queries. Перший публічний робочий проект для медіа-запитів був опублікований в 2001 році. Специфікація стала рекомендацією W3C у 2012 році після того, як браузери додали підтримку.

Як пишуться в CSS медіа-запити?

Запити можуть бути вставлені в HTML-файл веб-сторінки або включені в окремий файл .CSS, на який вона посилається. Нижче наведено опис і приклад медіа-запитів у CSS: @media screen and (max-width: 768px) { header {height: 70px;} article {font-size: 14px;} img {max-width: 480px;} } Запит на мультимедіа вище активується, якщо вікно браузера користувача становить 768 пікселів в ширину або менше. Це може статися, якщо ви скоротите своє вікно на настільному комп'ютері або використовуєте мобільний пристрій, наприклад планшет, для перегляду веб-вмісту.

Як використовувати медіа-запити CSS3?

У відповідному веб-дизайні медіа-запити діють як фільтри для різних розмірів екрану. Як і всі модулі в каскадної таблиці стилів, ті, які з'являються далі за списком, зумовлюють ті, що над ними. Тому стилі за замовчуванням зазвичай визначаються спочатку в документі CSS, за яким слідують медіа-запити для різних розмірів екрану. Наприклад, спочатку можуть бути визначені стилі робочого столу, а потім мультимедійний запит зі стилями для користувачів планшетів, а потім — для користувачів смартфонів. Стилі також можуть бути визначені в зворотному порядку. У той час як мінімальна ширина є найбільш поширеною функцією, використовуваної в медіа-запитах, багато інших також широко доступні. Розміри зображення в медіа-запитах CSS включають: мінімальну ширину пристрої; мінімальну висоту пристрою; співвідношення сторін; максимальний індекс кольору; максимальна роздільна здатність; орієнтацію екрану. Наприклад, значення дозволу може використовуватися для виявлення дисплеїв HiDPI (таких як зображення сітківки) і завантаження графіки з високим дозволом замість стандартних зображень.

Використання і помилки

Чому не працюють медіа-запити CSS? Даний компонент складається з типу носія і одного або кількох виразів з використанням медіа-функцій, які повертають або true, або false. Результат запиту є істинним, якщо тип носія, зазначений у ньому, відповідає тому типом пристрою, на якому відображається документ, і всі вирази в запиті на мультимедіа є істинними. У випадках, коли не працюють медіа-запити CSS, необхідно перевірити відповідні правила стилю і норми каскадування. Можливо, ці дані містять помилку.

Типи носіїв

Тип носія можна оголосити в заголовку HTML-документа, використовуючи атрибут «media» всередині елемента . Значення атрибута «media» вказує, на якому пристрої буде відображатися пов'язаний документ. Типи носіїв також можуть бути оголошені в інструкціях XML-обробки, @import at-rule і @media at-rule. Вид мультимедіа «все» також може використовуватися для вказівки, що таблиця стилів застосовується до всіх типів носіїв.

Що таке CSS?

CSS (Cascading Style Sheet або каскадні таблиці стилів) використовується для форматування макета веб-сторінок, визначення стилів тексту, розмірів таблиць і інших аспектів веб-вмісту, які раніше могли бути визначені тільки в HTML-структурі сторінки. CSS допомагає веб-розробникам створювати єдиний формат для декількох сторінок сайту. Замість визначення виду кожної таблиці і кожного блоку тексту в HTML стилі визначаються тільки один раз в документі CSS. Коли формат визначений у каскадної таблиці стилів, він може використовуватися будь-сторінкою, яка посилається на файл CSS. Крім того, CSS спрощує зміну стилів на декількох сторінках одночасно. Наприклад, веб-розробник може запланувати збільшення розміру тексту за замовчуванням з 10 до 12 pt на п'ятдесяти сторінках веб-сайту. Якщо при цьому всі сторінки посилаються на одну і ту ж таблицю стилів, розмір тексту достатньо буде змінити тільки у таблиці, і на всіх сторінках він виявиться потрібного розміру.
Хоча CSS відмінно підходить для створення текстових стилів, він також корисний для форматування інших аспектів макета веб-сторінки. Наприклад, CSS можна використовувати для визначення заповнення комірок таблиці, стилю, товщини і кольору кордону, а також для заповнення елементів зображення або інших об'єктів. CSS, в порівнянні з HTML, надає веб-розробникам більш точний контроль над тим, як будуть виглядати веб-сторінки.

Типи мультимедіа-запитів

Типи носіїв описують загальну категорію пристрою. Хоча веб-сайти зазвичай розробляються з урахуванням екранів, програміст може створювати стилі, призначені для спеціальних пристроїв, таких як принтери або аудиоредакторы. Наприклад, цей фрагмент CSS-коду призначений для принтерів: @media print {} . Ви також можете націлити на кілька пристроїв. Наприклад, це правило @media використовує два медіа-запиту для націлювання на пристрої екрану і друку: @media екран, print {}.

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

Функції мультимедіа описують конкретні характеристики користувальницького агента, пристрої виводу або середовища. Наприклад, ви можете застосовувати певні стилі до широкоформатних моніторів, комп'ютерів або пристроїв, які використовуються в умовах низької освітленості. У цьому прикладі застосовуються стилі, коли основний механізм введення користувача (наприклад, миша) може зависати над елементами: @media (hover: hover) {}. Багато функції мультимедіа — це функції діапазону, що означає, що вони можуть мати префікс «min» або «max-» для вираження обмежень мінімального або максимального умови. Наприклад, ця команда буде застосовувати стилі тільки в тому випадку, якщо ширина видового екрана браузера дорівнює або менше 12450 px: @media (max-width: 12450px) {}. Якщо ви створюєте запит функції мультимедіа без вказівки значення, вкладені стилі будуть використовуватися до тих пір, поки значення функції дорівнює нулю. Наприклад, цей CSS буде застосовуватися до будь-якого пристрою з кольоровим екраном: @media (колір) {}. Якщо функція не застосовується до пристрою, на якому працює браузер, вирази, що містять цю функцію мультимедіа, завжди є помилковими. Наприклад, стилі, вкладені в наступний запит, ніколи не будуть використовуватися, тому що ні одне мовленнєвий пристрій не має формату екрану: @media speech і (співвідношення сторін: 11/5) {}.

Технічна специфікація

Медіа-запити — це ключовий компонент адаптивного дизайну, який дозволяє адаптувати CSS на основі різних параметрів або характеристик пристрою. Наприклад, мультимедійний запит може застосовувати різні стилі, якщо екран менше певного розміру, або на основі того, чи утримує користувач свій пристрій в портретному або альбомному режимі. Синтаксис запитів до мультимедіа також використовується в інших контекстах, наприклад, у медіа-атрибут елемента , який може бути налаштований на рядок запиту мультимедіа для використання, щоб визначити, чи слід застосовувати цей джерело при виборі конкретного зображення для вживання в елементі . Метод Window.matchMedia () може використовуватися для перевірки вікна на запиті в медіа. Ви також можете застосувати функцію MediaQueryList.addListener () для попередження при зміні стану запитів. З допомогою цієї функції ваш сайт або додаток зможуть реагувати на зміни конфігурації пристрою, орієнтації або стану.

Запити мультимедіа для виклику стилів

Адаптивний веб-дизайн зіткнувся з повільною завантаженням вмісту. Зараз процес по усуненню цього недоліку добре документований. Є кілька способів, які розробники використовують для кращої завантаження контенту і зображень на різних пристроях. Один з них — використання медіа-запитів, які працюють для виклику стилів інтерфейсу пристрою на основі його розмірів. У минулому програмісти сперечалися про те, чи є медійні запити найкращим рішенням у випадку з мобільними пристроями, і ці дебати як і раніше тривають. Зараз офіційно визнано, що CSS медіа-запити (media queries) — це простий і ефективний спосіб обслуговування різного контенту для ряду пристроїв, і найбільш часто використовувані запити — це ті, які стосуються висоти і ширини вікна перегляду.

Виклик з використанням зовнішньої таблиці стилів

CSS-стилі для медіа-запитів спочатку перевіряють тип медіафайлів на рядок користувальницького агента, перш ніж переходити до перевірки фізичних атрибутів вікна перегляду. Вони є оголошенням CSS, яке можна викликати за допомогою зовнішньої таблиці стилів. Зовнішній виклик буде виглядати так: . Прямий же виклик CSS буде виглядати так: @media screen and (min-width:320px) and (max-width:480px){ /*Insert your styles here }. Медіа-запити CSS не є модульними, а отже, це може ускладнити їх роботу. Запит елемента схожий на медійний запит, тому що він використовує CSS при виконанні певних умов. Проте ці види даних засновані на елементах, а не на браузері, які в даний час не підтримуються в CSS3. Елементні запити набирають обертів, тим більше що вони доповнюють медіа-запити CSS. Це означає, що обидва можуть в кінцевому підсумку працювати разом, щоб створювати модульні і гнучкі конструкції.

Робота з зображеннями

Масштабування зображень для гнучкого дизайну — досить простий процес. Тим не менш, є кілька проблем, на які потрібно звернути увагу. Мова йде про втрату деталей і зображень при стисненні для розміщення контенту сторінки на більш дрібних пристроях. Щоб створити масштабовані зображення, просто додайте наступний код в таблицю стилів: img { max-width: 100%; } Це зменшить зображення, щоб воно відповідало розміру контейнера, який менше ширини картинки. Установка максимальної ширини на 100% означає, що зображення не буде збільшуватися більше, ніж його фактичний розмір. Однак це може бути проблемою, коли справа доходить до продуктивності сайту, тому що ви по суті доставляєте повнорозмірний образ на кожне пристрій. Для цього немає простого рішення, особливо якщо ви працюєте на сайті з застарілими зображеннями. Однак Adaptive Images — це плагін, який може оптимізувати ваші зображення на основі розмірів екрану. Адаптивний дизайн на основі медіа-запитів Framework Foundation також дозволяє обмінюватися зображеннями на основі розмірів екрану. При роботі з зображеннями необхідно використовувати SVG, веб-шрифти, веб-тип і CSS.