Модуль 5 · Урок 18
Media queries, ranges і user preferences
Media query — умовний шар enhancement, а не спосіб визначити людину чи конкретний device. Width ranges відповідають за composition, capability features — за спосіб взаємодії, а user preferences мають зберігати content і функцію.
Синтаксис і логіка умов
@media (width >= 56rem) { .layout { grid-template-columns:2fr 1fr; } }
@media (hover:hover) and (pointer:fine) { .card:hover { transform:translateY(-.2rem); } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }
@media (forced-colors:active) { .focus-ring { outline:2px solid CanvasText; } }and вимагає виконання всіх умов; comma-separated query list працює як OR; not заперечує query. Сучасна range syntax читається як математична межа. Перевіряйте обидві сторони boundary, бо рівність входить лише там, де це явно записано.
Width не описує користувача
| Потреба | Feature | Неправильне припущення |
|---|---|---|
| Змінити композицію | width | «Вузький = touch» |
| Hover enhancement | hover | Hover є єдиним способом відкрити дію |
| Розмір точного pointer | pointer | Fine pointer означає великий screen |
| Theme preference | prefers-color-scheme | Preference завжди дорівнює стану вашого toggle |
| Менше motion | prefers-reduced-motion | Приховати content разом з animation |
Preference-safe enhancement
У reduced-motion mode приберіть або скоротіть nonessential movement, але не вимикайте feedback і не ховайте інформацію. У forced colors використовуйте системні colors, borders/outlines та перевіряйте видимий focus. Theme toggle сайту може мати власний explicit state; не змушуйте media query перезаписувати вибір користувача після кожного завантаження.
Практика
- Заповніть media-query matrix: query, intent, fallback і tests.
- Додайте один content-driven width breakpoint.
- Зробіть hover effect лише enhancement; ті самі дії мають бути доступні keyboard/touch.
- Перевірте light, dark, reduced motion і forced colors без втрати інформації.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.