Урок 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: адаптивную главную страницу.

О чём урок

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

Дальше курс перейдёт к современным функциям CSS и интерактивным состояниям.

Ключевые понятия

  • prefers-color-scheme
  • prefers-reduced-motion
  • prefers-contrast
  • color-scheme
  • dark theme
  • reduced motion
  • high contrast
  • mini-project

Структура урока

📖 Теория

Понятия, правила и практическая логика.

🔖 Справочник

Свойства, условия и короткие примеры.

💻 Примеры

Рабочая HTML/CSS связка.

⚖️ Старый vs Новый

Что ломалось раньше и как писать современнее.

📝 Задания

Практика для самостоятельной проверки.

✅ Решения

Один из корректных вариантов.

🐛 Ошибки

Типовые проблемы адаптива.

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

Итоговая мини-практика урока.

🔗 Ресурсы

Документация и повторение.

Навигация