Урок 38. Домашнее задание: prefers-* media: доступность и тема

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~80 мин 🎯 Сложность: Средняя
#prefers-color-scheme #prefers-reduced-motion #prefers-contrast #prefers-reduced-data #color-scheme

⚡ Кратко

Используем `prefers-color-scheme`, `prefers-reduced-motion` и `prefers-contrast`, чтобы интерфейс уважал системную тему, уменьшение анимации и потребность в повышенном контрасте. В конце собираем mini-project 5: адаптивную главную страницу.

Домашнее задание

Задача — Мини-проект 5: соберите адаптивную главную страницу с <picture>, fluid spacing через clamp(), тёмной темой через prefers-color-scheme, снижением движения через prefers-reduced-motion и повышенным контрастом через prefers-contrast.

Целевой результат

Hero-секция должна корректно выглядеть в обеих темах без кнопки переключения:

light dark
Картинка + текст в hero, две темы по системной настройке.
1

Структура

Создайте index.html с <main> → <section class="hero">, внутри <picture> с адаптивным изображением и текстовый блок. Подключите styles.css без внешних зависимостей.

2

Палитра в переменных

Опишите светлую тему в :root (--bg, --text, --accent), объявите color-scheme: light dark и примените переменные к body.

3

Тёмная тема и доступность

Добавьте @media (prefers-color-scheme: dark) с тёмной палитрой, @media (prefers-reduced-motion: reduce) для отключения движения и @media (prefers-contrast: more) для усиленных границ.

4

Проверка

DevTools → Rendering → Emulate CSS media feature: переключите prefers-color-scheme и prefers-reduced-motion. Проверьте mobile/tablet/desktop и читаемость текста.

Критерии приёмки

  • Тема переключается по системной настройке — без JavaScript.
  • В обеих темах меняется пара «фон + текст», текст читаем.
  • color-scheme объявлен — системные элементы под тему.
  • При reduce движение убрано, функциональность сохранена.
  • Нет горизонтального скролла на любой ширине.

Навигация