Зі зручністю від пристрою до пристрою
Механізм апаратно-залежних стилів, вперше описаний у CSS2 і відбитий з невеликими змінами в CSS2.1, отримав подальший розвиток у CSS3 — головним чином у рамках модуля Media Queries. Специфікація Media Queries не скасовує, а розширює звичний синтаксис, розглянутий у першій частині нашої серії статей за рахунок уточнюючих умов. Так, замість «класичного»:
ми можемо тепер записати:
Побудова виразів
В основі Media Queries лежать логічні висловлювання, які, залежно від особливостей середовища чи пристрою виведення, можуть набувати значення «істина» чи «брехня». У наведеному вище фрагменті коду прикладом виразу є конструкція screen and (min-width: 640px) . Відповідний блок CSS-правил застосовується лише у тому випадку, якщо вираз істинний.
Принципи побудови виразів можна буде розглянути на конкретних прикладах.
У наведеному нижче прикладі перевіряється, чи є пристрій кольоровим:
Ключове слово all , що стосується всіх типів середовищ і пристроїв, у разі можна було б не вказувати:
І тип середовища, і вираз за участю медіахарактеристики, і обидві складові одразу можна пропустити. За ідеєю, має право на існування ось така конструкція:
Відповідний блок правил буде застосовуватися до всіх середовищ та пристроїв.
Кома в медіавиразах фактично виконує роль логічного «або»:
Ключове слово not використовується як оператор логічного заперечення:
Вираз not screen and (color) буде істинним тоді, коли вираз screen and (color) буде хибним, і навпаки.
Нарешті, ключове слово лише придумано спеціально для забезпечення сумісності із застарілими браузерами, якіможуть помилково інтерпретувати конструкцію на зразок @media screen and (color) як @media screen. Ось приклад його використання:
Огляд медіахарактеристик
У першій частині нашої серії статей ми навели таблицю, що відображає взаємозв'язок між різними типами та групами середовищ та пристроїв виведення. Табличка та була, фактично, прямою цитатою зі специфікації CSS2.1 (з точністю до того, що вміст деяких осередків було перекладено українською).
Мені подумалося, що інформацію про медіахарактеристики, описані в специфікації CSS3 Media Queries, розумно також організувати у вигляді таблички. Але, на відміну від таблиці з першої частини нашої розповіді, наведена нижче «шпаргалка» — це вже не цитата зі специфікації, а свого роду коротка вичавка. Вважаю, цей плід самодіяльності більш наочний, ніж «простирадло» тексту, і, ймовірно, їм зручніше користуватися як повсякденний довідковий посібник, ніж оригінал специфікації. Необхідні пояснення будуть надані нижче.
| width , height | visual, tactile | Так | наприклад: 1024px, 20em; відображає ширину/висоту viewport або page box |
| device-width , device-height | visual, tactile | Так | наприклад: 1024px, 20em; відображає ширину/висоту екрана або аркуша |
| orientation | bitmap | Ні | portrait або landscape |
| aspect-ratio , device-aspect-ratio | bitmap | Так | наприклад: 16/9 або 1280/720 |
| color | visual | Так | невід'ємне, наприклад: 8; відображає кількість біт на компоненту подання кольору (ву разі нерівномірного розподілу відповідає найменшому числу); 0 — пристрій не кольоровий |
| color-index | visual | Так | невід'ємне, наприклад: 16; відображає кількість кольорів у фіксованій палітрі |
| monochrome | visual | Так | невід'ємне, наприклад: 8; відбиває кількість біт на піксель; 0 - пристрій не є монохромним |
| resolution | bitmap | Так | наприклад: 300dpi або 118dpcm |
| scan | tv | Ні | progressive або interlace |
| grid | visual, tactile | Ні | 0 або 1 |
Отже, обіцяні пояснення.
Фігурують у другому стовпці таблиці групи чи типи середовищ, у тих яких має сенс та чи інша медіахарактеристика, знову ж таки, відсилають до табличці, розглянутої у частині.
Тепер пояснимо докладніше призначення кожної з медіахарактеристик.
Медіахарактеристики device-width і device-height приймають значення ширини та висоти пристрою (наприклад, екрана) в цілому.
Характеристика orientation (орієнтація) має на увазі два значення: portrait (портретна) або landscape (ландшафтна). Перше приймається в тому випадку, коли значення медіахарактеристики height більше або дорівнює значенню width , друге - у протилежній ситуації.
Медіахарактеристика monochrome передає глибину кольору в бітах на піксель у тому випадку, якщо пристрій є монохромним. Якщо ж пристрій не монохромний, а кольоровий, ця медіахарактеристика набуде значення 0 .
Характеристика resolution відображає роздільну здатність пристрою виведення в точках растру на дюйм (dots per inch, dpi) або на сантиметр (dots percentimeter, dpcm). Приклади значень, наведені в таблиці, еквівалентні.
Медіахарактеристика scan є досить специфічною, будучи застосовною тільки до пристроїв типу tv. Ця характеристика відображає вид розгортки, що використовується таким пристроєм, і має на увазі два можливі значення: progressive (послідовна) або interlace (черезрядкова).
Нарешті, остання з описаних у специфікації Media Queries медіахарактеристик grid використовується для визначення того, чи використовує пристрій жорстку сітку знайомест для виведення символів фіксованого розміру або є растровим. На персоналках перше колись давно називалося «текстовим режимом» на противагу «графічному». Текстовий режим працює швидше та вимагає менше пам'яті, але не дозволяє виводити довільні геометричні об'єкти. Більшість сучасних користувачів можуть спостерігати текстовий режим хіба що в момент включення комп'ютера при ініціалізації BIOS, але щось аналогічне зберігається на бюджетних мобільних пристроях, текстових консолях у злих адмінів і спеціалізованих брайлівських дисплеях.
- Шукати на сайті:
- Поділіться посиланням на цю сторінку:
Проект розвивається за підтримки компанії RU-CENTER.