Новые возможности CSS за 2024 год

Однострочник для центрирования

Да, это случилось. Больше не нужно гуглить, как выровнять div по центру, каждый раз, когда забываешь одно из возможных решений. С марта 2024 года современные браузеры поддерживают align-content: center и для блочных макетов. Это означает, что теперь можно легко центрировать дочерние элементы с помощью одной строки, без использования flexbox или grid макетов.

See the Pen

Новые возможности CSS переходов

Анимация изначально скрытых элементов долгое время была сложной задачей. Два новых CSS свойства позволяют элегантно решить эту давнюю проблему, обеспечивая плавную анимацию для ранее скрытых элементов во всех основных браузерах.

Правило @starting-style позволяет определить начальные стили для анимации элемента. Сочетая с transition-behavior: allow-discrete можно создавать анимацию для display: none или других дискретных свойств. Это удобно для таких элементов, как диалоги или всплывающие окна, скрытые по умолчанию.

See the Pen

Лёгкое управление стилями тёмного режима

Создание стилей для светлого и тёмного режимов было немного утомительным, поскольку для разных цветовых схем приходилось использовать медиа запрос @media (prefers-color-scheme: <color-scheme>). Теперь можно просто использовать функцию light-dark как сокращение для запросов к светлой и тёмной цветовой схеме. Можно определить оба стиля одной строке, что очистит часть кода и сделать более читабельным.

See the Pen

Стилизация (не)валидных значений input

Эта функция не новая, но я узнал о ней совсем недавно. Как и многие, я использую CSS селекторы :valid и :invalid для стилизации input'ов формы в зависимости от состояния валидации. Для базовых форм это работает прекрасно. Проблема такого подхода заключается в том, что стили применяются мгновенно, без взаимодействия с пользователем. Из-за этого приходится полагаться на JavaScript, чтобы условно применить стили только после того, как пользователь изменит вводимые данные.

Но больше не стоит беспокоиться — селекторы :user-valid и :user-invalid решают эту проблему с помощью чистого CSS. Стили срабатывают автоматически, при перемещении фокус с поля input или отправке формы без взаимодействия.

See the Pen

Настройка размера резервного шрифта

Всем знакома проблема: поручено поработать над классным сайтом с кастомными шрифтами, но не удаётся найти подходящий резервный шрифт. Когда кастомный шрифт по какой-либо причине не загружается, вы понимаете, что с использованием резервного шрифта сайт выглядит иначе. Способа решить эту проблему не было до этого года.

Свойство font-size-adjust решает именно эту проблему, позволяя настроить резервный шрифт для лучшего соответствовал выбранному. Независимо от используемого шрифта, текст должен выглядеть более похожим по размеру, улучшая и CLS. Возможно, потребуется несколько попыток, чтобы найти подходящее значение, но результат того стоит, как продемонстрировано ниже.

See the Pen

Уменьшение загрузки страницы с помощью content-visibility

С сентября 2024 года свойство content-visibility поддерживается всеми основными браузерными движками. Что оно делает, спросите вы? Оно позволяет лениво рендерить целевые элементы, ускоряя первоначальный рендеринг сайта. Для сложных веб-сайтов с очень глубоким или длинным HTML это может помочь сократить время рендеринга и тем самым повысить его производительность.

Используя content-visibility, помните о возможных побочных эффектах. При скроллинге целевые элементы рендерятся на лету, что может привести к динамическому изменению высоты просматриваемой страницы. Это может привести к дрожанию скроллбара.

Эту проблему можно смягчить, используя свойство contain-intrinsic-size. Это свойство действует как высота, поддерживающая плавный скроллинг до полного рендеринга DOM. Для лучшего понимания посмотрите пример.

See the Pen

Проверка типов CSS

Вы правильно прочитали — CSS может выполнять проверку типов. Все знакомы с CSS переменными. Они могут быть объявлены в :root, и в любом селекторе. В этом случае браузер не знает, к какому типу относится свойство, поэтому его можно свободно переназначить на любой другой блок, из-за этого его нельзя анимировать.

Используя правило @property, решающее проблему путём определения типа свойства и указания значения по умолчанию. Более того, используя этот подход, можно анимировать свойство, определив @keyframes, как показано в приведённом ниже примере.

See the Pen

Математические функции в CSS

CSS оснащён мощным набором математических функций. Большинство добавлены в Baseline 2024 в мае, они открывают доступ к необходимым вычислениям. Предоставляя мощные математические возможности непосредственно в CSS, позволяя создавать более динамичные стили без использования JavaScript. Это отличная новость для всех анимаций, управляемых свойствами CSS.

Функция round()

По названию можно предположить, что функция round() округляет значение. Первый параметр — значение, которое необходимо округлить, второй — точность округления. По умолчанию она равна 1, но может изменяться в зависимости от свойства. Например, при округлении opacity вы предпочтёте точность 0,1, а не 1.

По умолчанию будет использоваться стратегия nearest:

font-size: round(12.3rem, 1rem); /* Возвращает 12rem */

Есть третий параметр, задающий стратегию округления. По умолчанию используется nearest, но может использоваться любой из параметров:

• up — округляет значение вверх, основываясь на точности округления. Его JS эквивалент — Math.ceil()
• down — округляет значение вниз, основываясь на точности округления. Его JS эквивалент — Math.floor()
• nearest — округляет значение либо вверх, либо вниз, основываясь на точности округления. Его JS эквивалент — Math.round()
• to-zero — работает аналогично стратегии down, но округляет значение в большую сторону для отрицательных чисел. Округлит значение до ближайшего к нулю интервального числа.

rotate: round(up, -83deg, 45deg); /* -45deg */
rotate: round(down, -83deg, 45deg); /* -90deg */
rotate: round(nearest, -83deg, 45deg); /* -90deg */
rotate: round(to-zero, -83deg, 45deg); /* -45deg */

Функция rem()

Функция rem() вычисляет остаток от операции деления, как оператор % в JavaScript. Значение всегда принимает знак делимого (первый параметр).

margin-left: rem(32px, 5px); /* Возвращает 2px */
margin-left: rem(-32px, 5px); /* Возвращает -2px */
margin-left: rem(32px, -5px); /* Возвращает 2px */
margin-left: rem(-32px, -5px); /* Возвращает -2px */

Функция mod()

Функция mod() работает аналогично rem(), но иначе, если знаки делимого и делителя разные. В этом случае она ищет кратное, большее, чем делимое, и возвращает разницу (обратите внимание на пример ниже). По сравнению с rem(), результат принимает знак делимого, а не делителя.

margin-left: mod(32px, 5px); /* Возвращает 2px */
margin-left: mod(-32px, 5px); /* Возвращает 3px */
margin-left: mod(32px, -5px); /* Возвращает -3px */
margin-left: mod(-32px, -5px); /* Возвращает -2px */

Функция pow()

Функция pow() возводит число в заданную степень. Принимает два параметра: основание и экспоненту. Функция работает простыми числами без единиц измерения. Если необходимо использовать единицы измерения, можно вложить pow() внутрь calc.

font-size: pow(2, 3); /* Возвращает 8 */
font-size: calc(1rem * pow(2, 3)); /* Возвращает 8rem */

Функция sqrt()

Функция sqrt() вычисляет квадратный корень заданного числа без единиц измерения. Принимает один параметр: число, квадратный корень которого планируется найти.

width: sqrt(64); /* Возвращает 8 */
width: calc(1rem * sqrt(64)); /* Возвращает 8rem */

Функция hypot()

Функция hypot() CSS — экспоненциальная функция, возвращающая квадратный корень из суммы квадратов переданных параметров.

pow() и sqrt() работают с числами без единиц измерения, hypot() принимает значения с единицами измерения, но они должны быть одного типа.

/* Значение <number> */
width: hypot(2em); /* 2em */
width: hypot(3em, 4em); /* 5em */
width: hypot(30px, 40px); /* 50px */
width: hypot(48px, 64px); /* 80px */
width: hypot(3px, 4px, 5px); /* 7.0710678118654755px */

Функция log()

CSS функция log() — экспоненциальная функция, возвращающая логарифм числа.

Логарифм — величина, обратная экспоненте. Это число, к которому нужно возвести фиксированное основание, чтобы получить число, переданное в качестве первого параметра.

В CSS при передаче одного параметра используется натуральный логарифм e, или приблизительно 2,7182818, хотя основание можно установить любым значением с помощью необязательного второго параметра.

/* Значение <number> */
width: calc(100px * log(7.389)); /* 200px */
width: calc(100px * log(8, 2)); /* 300px */
width: calc(100px * log(625, 5)); /* 400px */

Функция exp()

CSS функция exp() — экспоненциальная функция, принимающая в качестве аргумента число и возвращающая математическую константу e, возведённую в степень от данного числа.

Математическая константа e — основание натуральных логарифмов и равна примерно 2,718281828459045.

Функция exp(number) содержит вычисление, возвращающее то же значение, что и [pow(e, number)](#the_pow_function).

/* Значение <number> */
width: calc(100px * exp(-1)); /* 100px * 0.367879441171442 = 36px */
width: calc(100px * exp(0)); /* 100px * 1 = 100px */
width: calc(100px * exp(1)); /* 100px * 2.718281828459045 = 217px */

pi, infinity и прочее

CSS предоставляет несколько математических констант, используемых либо с новыми функциями, либо просто с помощью calc.

Хотя тригонометрические и экспоненциальные функции выполняют множество сложных числовых операций, некоторые вычисления приходится производить вручную. Во многих случаях они включают известные константы e и π/pi.

Чтобы не заставлять авторов вручную набирать несколько цифр этих констант, некоторые из них приводятся напрямую:

• pi — отношение длины окружности к диаметру, приблизительно равное 3,1415926535897932. Можно использовать в сочетании с rotate, например, так: rotate: calc(pi * 1rad);
• e — представляет число Эйлера, основание натурального логарифма, приблизительно равное 2,7182818284590452354. При необходимости может использоваться для вычислений.

Когда вычисление или поддерево вычисления становится бесконечным или NaN, представление в виде числового значения становится невозможным. Для облегчения сериализации вырожденных значений определены следующие математические константы:

• infinity и -infinity — может пригодиться, если нужно наибольшее или наименьшее возможное число, например z-index: calc(infinity);
• NaN — константа Not a number, возвращается как результат CSS функции, например: rem(3, 0), но я не уверен, зачем и как её использовать 😅.

Все эти ключевые слова <number>, и разрешаются во время парсинга.

Ключевые слова CSS, не зависят от регистра ASCII. Поэтому calc(InFiNiTy) допустимо. NaN должен быть сериализован с этим каноническим регистром.

Собираем всё воедино

Современный CSS стал мощным набором инструментов, выходящий за рамки базовой стилизации. Рассмотренные возможности — от упрощённого центрирования до математических функций — показывают, как многого можно добиться с помощью чистого CSS. И это только верхушка айсберга.

Ландшафт CSS богат другими недавними дополнениями, получившими широкую поддержку в браузерах: это и судьбоносный селектор :has, и :empty для выделения пустых тегов, и scroll-snap-type для создания анимации прокрутки только с помощью CSS, и запросы @container, и многое другое. И эволюция продолжается — новые возможности, такие как anchor-name, анимация на основе скролла и interpolate-size, пробивают дорогу в Baseline.

Что вы думаете о новых возможностях CSS? Напишите в комментариях, поделитесь любимыми функциями, расскажите, каких функций не хватает, или предложите тему следующего глубокого погружения!

Комментарии