Якщо ви коли-небудь працювали в Інтернеті більш-менш тривалий час з мобільного пристрою, то, без сумніву, виявили, що крихітний екранчик (яким би великим він не був для мобільного пристрою) - не найкращий вікно в Інтернет.
Знову ж таки, створення окремих версій сайту для кожного типу мобільного пристрою не є єдиним способом вирішення проблеми різних мобільних пристроїв. Інший підхід - розробити код веб-сервера, який досліджує кожний запит, обчислює, який браузер подав цей запит, і відправляє вміст відповідного формату. Таке рішення, безумовно, чудово, але тільки якщо у вас є час і необхідні навички.
Але було б чудово мати простий механізм, який би підбудовував стилі вашої веб-сторінки під різні типи пристроїв, не вимагаючи для цього ні інфраструктури веб-додатки, ні серверного коду.
Запити про можливості відображення
Принцип роботи запитів про можливості заснований на отриманні ключової інформації про пристрій, на якому проглядається веб-сторінка, такий як, наприклад, розмір екрану, його роздільна здатність, можливості відтворення кольорів і т.п. На основі цих відомостей можна застосовувати різні стилі форматування або навіть підключати абсолютно інші таблиці стилів. Результати роботи запитів про можливості показані на малюнках нижче:
Досить цікаво, творці CSS намагалися вирішити проблему різних типів пристроїв відтворення в CSS 2.2 за допомогою типів носіїв (media types). Ви, можливо, вже користуєтеся цим стандартом, щоб надавати різні таблиці стилів для виведення вмісту на різні пристрої, як показано в наступному коді:
Атрибут media також приймає значення handheld, призначене для мобільних пристроїв з екраном невеликого розміру і низькошвидкісних підключенням. Більшість мобільних пристроїв намагаються звертати увагу на атрибут media і використовувати таблицю стилів handheld, якщо така є. Але цей підхід рясніє різними огріхами, і можливості атрибута media вельми обмежені для роботи з широким діапазоном пристроїв, підключених до Інтернету в даний час.
Щоб використовувати запити про можливості, найлегше почати зі стандартною версією веб-сайту, а потім заміщати певні частини розмітки. У прикладі на малюнку вище вміст сторінки розбите на два блоки:
А таблиця стилів починається з двох правил, по одному для кожного блоку:
Ці правила реалізують стандартну двухстолбцовую компоновку сторінки, де колонка фіксованої ширини в 330 пікселів розташовується зліва, а плаваюча бічна панель займає все залишився праворуч.
Фокус полягає у визначенні окремої частини таблиці стилів, яка активується для певного значення запиту про можливості. Синтаксис цього визначення наступний:
В даному прикладі цей новий набір стилів активується, коли ширина вікна браузера стає 480 пікселів або менше. Це означає, що в нашій таблиці стилів нам потрібно розділ, який виглядає так:
В даний час найпопулярнішими властивостями запитів про можливості є max-device-width (для створення мобільних версій веб-сторінок), max-width (для застосування різних стилів залежно від поточного розміру вікна браузера) і orientation (для зміни компонування сторінки, в залежно від розташування пристрою - горизонтального або вертикального).
Хоча всередині блоку запиту про можливості можна вставити все, що завгодно, в цьому прикладі просто додаються нові правила таблиці стилів для елементів
Ці стилі застосовуються на додаток до вже певним звичайним стилям. Тому може знадобитися скинути вже змінені властивості в їх значення за замовчуванням. У цьому прикладі стилі запиту про можливості привласнюють властивості position значення static, властивості float - значення none, а властивості width - значення auto. Це значення за замовчуванням, які були змінені вихідним правилом стилю для бічній панелі.
Браузери, які не розуміють запитів про можливості, такі як Internet Explorer, просто ігнорують нові стилі і застосовують вихідні стилі незалежно від розміру вікна браузера.
При бажанні можна додати ще один розділ запиту про можливості, який заміщає ці правила ще меншим розміром. Наприклад, наступний блок активує застосування нових правил, коли вікно браузера звужується до 250 пікселів:
Але не забувайте, що ці правила заміщають все, що було застосовано до цього, іншими словами, сукупний набір властивостей, встановлений звичайними стилями і блоком стилів запитів про можливості для ширини вікна менше 450 пікселів. Якщо це здається занадто зарозумілим, не впадайте у відчай - ми навчимося обходити це за допомогою більш точно визначених запитів про можливості в наступному розділі.
Просунуті запити про можливості
Іноді бажано застосувати навіть більш специфічні стилі, що залежать від кількох умов, як показано в цьому прикладі:
Тепер для вікна браузера шириною 380 пікселів будуть застосовуватися два набору стилів: стандартні стилі і стилі в останньому блоці @media. Відповідь на питання, спрощує або ускладнює цей підхід роботу розробника, залежить від того, чого саме він хоче домогтися. Якщо ви використовуєте складні таблиці стилів і часто міняєте їх, показаний тут підхід неперекривающіхся стилів часто буде найпростішим способом.
Зверніть увагу, що необхідно бути обережним, щоб правила несподівано не перекривали один одного. Наприклад, якщо в одному правилі встановити максимальну ширину в 400 пікселів, а в іншому правилі вказати ті ж 400 пікселів, але для мінімальної ширини, то в одній точці обидві настройки стилів будуть суміщені. Злегка незграбним вирішенням цієї проблеми буде використання дробових значень, як значення 399.99 пікселів в прикладі вище.
Можна ще використовувати ключове слово not. Функціонально, по суті, це така ж таблиця стилів, але, може бути, більш зрозуміла:
У цих прикладах є ще один рівень заміщення стилів, який потрібно мати на увазі, тому що кожен розділ @media починається не з правил стилів для запитів про можливості, а з звичайних правил таблиць стилів. Залежно від ситуації, може бути краще повністю розділити логіку стилів (наприклад, щоб мобільний пристрій отримало свій, повністю незалежний набір стилів). Для цього потрібно використовувати запити про можливості із зовнішніми таблицями стилів, як розглядається далі.
Повна заміна таблиці стилів
Блок @media зручний для невеликих коригувань, тому що він дозволяє утримувати всі стилі разом в одному файлі. Але для більш значних змін може бути легше просто створити повністю окрему таблицю стилів, а потім за допомогою запиту про можливості створити посилання на неї:
Хоча браузер завантажить зі сторінкою і другу таблицю стилів, вона не буде застосована, якщо тільки ширина вікна браузера не відповідає зазначеному мінімуму.
Як і в попередньому прикладі, нові стилі будуть заміщати вже встановлені стилі. У деяких випадках доречно використовувати повністю окремі, незалежні таблиці стилів. Спочатку до звичайної таблиці стилів потрібно додати запит про можливості, щоб вона застосовувалася тільки для вікон з великою шириною:
Розпізнавання мобільних пристроїв
Як ми вже дізналися, з'ясувати, де проглядається веб-сторінка - на екрані звичайного комп'ютера або мобільного пристрою, можна за допомогою запиту про можливості відображення, що містить властивість max-device-width. Але які значення ширини слід використовувати для цієї властивості?
Наприклад, в iPhone 4 кожному пікселю CSS відповідає в ширину два фізичних пікселя, тобто співвідношення пікселів одно 2. Насправді можна створити запит про можливості, який визначає iPhone 4, але ігнорує більш старі версії iPhone:
A iPad представляє особливу проблему: користувачі можуть повертати його, зорієнтувавши екран горизонтально або вертикально. Але хоча це змінює значення ширини вікна max-width, значення ширини екрану max-device-width не змінюється. Як і книжкової, так і альбомній орієнтації екрану iPad повідомляє, що його ширина екрану дорівнює 768 пікселів. На щастя, якщо потрібно міняти стилі в залежності від орієнтації екран iPad, в запитах про можливості властивість max-device-width можна застосовувати спільно з властивістю orientation:
Звичайно ж, це правило можна застосовувати не тільки з пристроями iPad, але і з іншими пристроями з подібними розмірами екрану (в даному випадку 768 пікселів або менше).