Урок 47 из 53 · 11 мин

color-scheme, light-dark() и @supports

color-scheme, функция light-dark(), проверка поддержки @supports и практика clamp().

Короче

Бро
Для тёмной темы мы писали целые медиазапросы. А можно одной функцией.
Ника
И заголовок, который плавно растёт с экраном, — без единого медиазапроса.

Свойство

color-scheme

Какие темы поддерживаешь

Что это: :root { color-scheme: light dark; } — браузер сам перекрасит формы и полосы прокрутки.
Зачем: Поля ввода не остаются белыми в тёмной теме.

Функция

light-dark()

Цвет для двух тем

Что это: color: light-dark(#2b1d14, #f5e6d3) — первый для светлой, второй для тёмной. Нужен color-scheme.
Зачем: Тема без медиазапросов.
Как: HTML
<style> :root { color-scheme: light dark; } body { background: light-dark(#fffaf3, #1c1410); color: light-dark(#2b1d14, #f5e6d3); } </style> <p>Подстраиваюсь под тему</p>
Так это выглядит

@-правило

@supports

Если браузер умеет

Что это: @supports (display: grid) { … } — стили только при поддержке.
Зачем: Новые возможности с запасным вариантом.

Ника
clamp() вместо трёх медиазапросов для размеров шрифта.

Ваш ход

Задание

Тема одной строкой

В :root задай color-scheme: light dark, а body — color: light-dark(#2b1d14, #f5e6d3).

Обе темы — пока нет
Цвет для двух тем — пока нет

<style>
body { color: #2b1d14; }
</style>
<h1>Мой сайт</h1>

<style>
body { color: #2b1d14; }
</style>
<h1>Мой сайт</h1>

Результат обновляется при вводе

Задание

Резиновый заголовок

Задай h1 font-size: clamp(2rem, 5vw, 4rem).

Плавный размер — пока нет

<style>
h1 { font-size: 48px; }
</style>
<h1>Мой сайт</h1>

<style>
h1 { font-size: 48px; }
</style>
<h1>Мой сайт</h1>

Результат обновляется при вводе

ПрактикаОбязательное задание

clamp

Выберите один ответ.

Что значит clamp(16px, 4vw, 32px)?

Домашнее заданиеДля закрепления

light-dark