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

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

⚡ Кратко

Превью не реагирует на системную тему, поэтому светлый и тёмный варианты показаны рядом, статично — слева то, что увидит пользователь со светлой темой, справа — с тёмной. Код медиа-запроса дан отдельно.

Как читать превью. @media (prefers-color-scheme) реагирует на настройку вашей ОС, а не на эту страницу — «вживую» результат внутри урока не переключить. Поэтому ниже показаны две статичные карточки рядом: левая с inline-цветами светлой темы, правая — тёмной. Это именно то, что выберет CSS из примера для каждого пользователя.

Пример 1. Светлая и тёмная тема рядом

Один и тот же блок, две палитры. CSS выбирает нужную по системной настройке.

Светлая тема

prefers-color-scheme: light

Тёмная тема

prefers-color-scheme: dark

📄 lesson-38/styles.css
:root {                /* светлая тема — по умолчанию */
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #172033;
  --accent: #2458d3;
}

@media (prefers-color-scheme: dark) {
  :root {              /* система просит тёмную — меняем пару фон+текст */
    --bg: #111827;
    --text: #f8fafc;
    --accent: #93c5fd;
  }
}

body   { background: var(--bg); color: var(--text); }
button { background: var(--accent); color: var(--bg); }

Пример 2. color-scheme — системные элементы под тему

Без color-scheme скроллбары и поля ввода остаются светлыми даже в тёмной теме. Одна строка чинит это.

без color-scheme

с color-scheme: dark

📄 lesson-38/styles.css
/* подсказка браузеру: страница умеет обе темы */
:root {
  color-scheme: light dark;
}
/* теперь поля ввода, скроллбары и чекбоксы
   браузер красит под активную системную тему */

Пример 3. prefers-reduced-motion — спокойный вариант

Слева анимация «как обычно», справа — что увидит человек с включённым уменьшением движения: переход мгновенный, без скольжения.

обычное движение

плавная анимация 600 мс

reduce: без движения

мгновенно, без скольжения

📄 lesson-38/styles.css
/* убираем движение для тех, кому оно мешает */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Пример 4. prefers-contrast: more — усиленные границы

Слева обычная карточка с мягкой тенью, справа — высококонтрастный вариант с явной рамкой и насыщенным акцентом.

Обычный контраст

мягкая граница, бледный текст

Повышенный контраст

чёткая рамка, тёмный текст

📄 lesson-38/styles.css
@media (prefers-contrast: more) {
  :root { --accent: #003cff; }   /* насыщеннее */

  .card {
    border: 2px solid currentColor; /* явная граница */
  }
}

Пример 5. Мини-проект: HTML главной

Семантическая структура hero-секции с адаптивным изображением — основа домашнего задания.

<picture>
Адаптивная главная

Изображения, fluid spacing и системные предпочтения вместе.

📄 lesson-38/index.html
<main class="landing">
  <section class="hero">
    <picture>
      <source type="image/webp" srcset="hero.webp 960w, hero@2x.webp 1920w" sizes="(min-width: 64rem) 50vw, 100vw">
      <img src="hero.jpg" alt="Главная страница учебного проекта" width="960" height="640">
    </picture>
    <div>
      <h1>Адаптивная главная</h1>
      <p>Изображения, fluid spacing и системные предпочтения работают вместе.</p>
    </div>
  </section>
</main>
Проверка по-настоящему: DevTools → ⋮ → More tools → Rendering → «Emulate CSS media feature prefers-color-scheme / prefers-reduced-motion». Так можно увидеть переключение, не меняя настройки всей системы.

Навигация