Современные возможности CSS — Примеры

Пример 1 — Размер шрифта, который прыгает на точке перелома

Заголовок шагает с одного размера на другой на 768px, и прыжок заметен, а запрос существует только чтобы изменить одно число. Замените и то, и другое одним значением, которое адаптируется само.

h1 { font-size: 1.5rem; }

@media (min-width: 48rem) {
  h1 { font-size: 3rem; }
}

Решение

h1 { font-size: clamp(1.5rem, 2vw + 1rem, 3rem); }

clamp(min, ideal, max) интерполирует между двумя размерами и останавливается на любом из концов, поэтому медиа-запрос удалён, а не просто обойдён. Вычисленные значения таковы: на окне 320px 2vw + 1rem даёт 22.4px, но минимум держит его на 24px; на 800px это 32px; на 1200px — 40px; за 1600px максимум держит его на 48px. Ничего не прыгает, и текст остаётся в пределах двух размеров, заданных дизайном. Та же функция заменяет запросы о плавных отступах и ширинах, которые обычно её окружают, — поэтому такие возможности и называют «удаляющими запросы».

Пример 2 — Кнопка, темизируемая селектором на каждое место

Одному компоненту нужен другой фон в карточке и другой padding в подвале, и каждая вариация обзавелась собственным селектором, повторяющим всё правило целиком. Скажите, чего стоит повторение, затем выведите различия из свойств.

.button {
  background: navy;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.card .button { background: teal; }
.footer .button { background: navy; padding: 0.75rem 1.5rem; }

Решение

.button {
  --button-bg: navy;
  --button-pad: 0.5rem 1rem;
  background: var(--button-bg, navy);
  padding: var(--button-pad, 0.5rem 1rem);
  border-radius: 0.25rem;
}

.card .button { --button-bg: teal; }
.footer .button { --button-pad: 0.75rem 1.5rem; }

Пользовательское свойство наследуется и участвует в каскаде, поэтому задание его на поддереве переопределяет тему всего внутри, а точка темизации становится одной строкой, называющей только изменённое. Значение по умолчанию внутри var() важно: незаданное свойство делает объявление недействительным, и браузер молча его отбрасывает, не сообщая об ошибке, поэтому var(--button-bg, navy) защищает компонент, когда его никто не задал. Селекторы вариантов больше не повторяют базовое правило, а значит следующая вариация не сможет от него отстать.