CSS

Совсем недавно в CSS появилась небольшая, но любопытная возможность — использовать внутри математических функций вроде calc() готовые константы. Это не новые свойства или сложные функции, а удобные сокращения: e, pi, infinity, -infinity и NaN. Они доступны в браузерах с конца 2022 года, но по-прежнему нечасто встречаются в реальном коде. Разберём, зачем они нужны и когда могут пригодиться.

Константы работают только внутри calc() и её «родственников» — min(), max(), clamp(), sin(), cos() и прочих математических функций. Просто написать font-size: e нельзя, а font-size: calc(e * 1rem) — вполне корректно.

.element {
  font-size: calc(e * 0.5rem); /* ≈ 1.359rem */
}

Константа e — основание натурального логарифма, примерно 2.718. Её можно использовать для плавных, экспоненциальных изменений, например, при анимациях или масштабировании.

@keyframes grow {
  to {
    transform: scale(calc(pow(e, 0.5)));
  }
}

Это эквивалентно scale(1.64872…), но запись через e и pow() читается как «растём в e в степени 0.5» — точнее и выразительнее, чем просто магическое число.

Константа pi (≈ 3.14159…) особенно полезна при работе с углами, особенно в радианах. Например, поворот на 180° — это pi радиан:

.element {
  rotate: calc(pi * 1rad);
}

Можно комбинировать с тригонометрическими функциями:

.element {
  --t: 0.3;
  transform: translateX(calc(100px * sin(calc(pi * var(--t)))));
}

Здесь элемент колеблется по синусоиде, и один полный цикл приходится ровно на изменение --t от 0 до 2.

Более экзотичные константы — infinity, -infinity и NaN. Они не числа в привычном смысле, но ведут себя как числовые значения, и браузер «зажимает» их до максимально или минимально допустимых величин. Например, z-index: calc(infinity) даст самый высокий возможный z-index без необходимости подбирать гигантское число вручную.

.overlay {
  z-index: calc(infinity);
}

Это не «бесконечность» в философском смысле, а гарантированное значение, которое всегда будет больше любого другого z-index, заданного числом.

Константа NaN (Not a Number) почти никогда не нужна в повседневной разработке, но она помогает избежать неопределённого поведения при делении на ноль или других недопустимых операциях. Например:

.test {
  width: calc(0 / 0); /* вычисляется как NaN */
}

Согласно стандарту IEEE-754, любая операция с NaN возвращает NaN, и браузер в итоге проигнорирует такое свойство или заменит на значение по умолчанию. Это предсказуемо — лучше молчать, чем рисковать.

Наконец, напомним: константы чувствительны к регистру только частично. e, pi, infinity можно писать в любом регистре: E, Pi, InFiNiTy — всё сработает. А вот NaN допускает только такой вариант написания. nan, NAN или NaN() — синтаксическая ошибка.

На практике e и pi пригодятся тем, кто строит анимации, диаграммы, визуализации или работает с тригонометрией в CSS. infinity — когда нужно «перебить любой z-index». NaN — скорее для полноты реализации, чем для практического использования.

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

Вообще-то, анимация на сайте — это хорошо. Даже в 2002 году на сайте башкирской федерации настольного тенниса уже была анимированная бегущая строка — смотрите сами:

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

Но иногда анимация делает только хуже. Смотрите, когда это происходит.

Дисклеймер: ради этой статьи нам пришлось отключить адблок. Не повторяйте этого дома.

Когда вы задаёте анимацию или переход в CSS, свойства изменяются нелинейно: сначала медленно, потом быстрее, в конце снова замедляются. Это поведение называется интерполяцией и определяется так называемой функцией ускорения (или «easing function»). По умолчанию браузеры используют значения вроде ease, ease-in, ease-out и linear. Но если вам нужен более тонкий контроль над тем, как именно свойство изменяется во времени, пригодится функция cubic-bezier().

Эта функция позволяет задать собственную кривую ускорения с помощью четырёх чисел — координат двух управляющих точек кубической кривой Безье. Эти значения описывают, как «разгоняется» и «тормозит» анимация. cubic-bezier() поддерживается всеми современными браузерами и считается стабильной функцией (Baseline: Widely Available), так что её можно использовать в продакшене.

Вот пример, где переход на элементе происходит по заданной кривой:

.element {
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

В этом примере четыре числа — это координаты управляющих точек, задающих форму кривой. Именно они определяют, как быстро будет происходить переход: насколько он будет «вялым» в начале, насколько резко ускорится и как будет вести себя в конце.

Метод findLast() появился в JavaScript как часть стандарта ECMAScript 2023 и уже широко поддерживается всеми актуальными браузерами. Он работает как зеркальное отражение метода find(), но ищет элементы не с начала массива, а с конца — и возвращает первый найденный в таком обратном порядке элемент, удовлетворяющий условию. Если ничего не найдено, возвращается undefined [[1]].

В ноябре 2025 года появилось два новых способа задавать цвет в CSS. lab() и lch() стали полностью доступны во всех основных браузерах и больше не нужно включать никакие экспериментальные настройки.

• Chrome и Edge — с версии 111 (уже почти 3 года как есть)
• Safari — с версии 16.4 (весна 2023)
• Firefox — с версии 125 (2024 год)

Обычные цвета rgb() и hex часто дают неожиданные результаты, когда хочется просто сделать цвет чуть светлее или чуть темнее. С lab() и особенно с lch() всё стало намного проще и предсказуемее:

• Меняешь только яркость — цвет остаётся тем же самым по оттенку
• Меняешь насыщенность — не уходишь случайно в серый или в слишком ядовитый
• Поворачиваешь оттенок на 30–60 градусов — получаешь красивую гармоничную палитру

По данным MDN Web Docs и Web Platform Features Explorer, по состоянию на ноябрь 2025 года функциональная нотация color() достигла статуса widely available во всех основных браузерах без необходимости включения экспериментальных флагов.

@counter-style — это правило CSS, которое позволяет определять свои собственные стили нумерации для списков, счётчиков и других элементов, использующих функцию counter(). Вместо привычных арабских цифр, латинских букв или стандартных маркеров вы можете задать любые символы, изображения или даже сложные последовательности.

Поддержка: доступно в Baseline в статусе «Newly Available» с 18 сентября 2023 года.

Функция reversed() в CSS позволяет создавать счётчики, которые уменьшаются, а не увеличиваются. Это удобно для обратных отсчётов, нумерации элементов с конца и чисто-CSS эффектов без JavaScript.

Статус: экспериментальная функция (Limited Availability, поддержка ограничена).

Синтаксис функции:

/* Объявление обратного счётчика */
counter-reset: reversed(<имя-счётчика>) [начальное-значение]?;

/* Изменение счётчика */
counter-increment: <имя-счётчика> <число>;

Функция reversed() оборачивает имя счётчика в counter-reset. counter-increment работает как обычно; чтобы счётчик убывал, задайте отрицательное значение.

Разбираем спорную новинку 2025 года — CSS‑функцию if(), которая появилась в экспериментальном режиме в Chrome. Смотрим, как она работает, где помогает, где подводит и чего от неё ждать дальше.

Летом 2025 года в Chrome появилась экспериментальная функция if(). На первый взгляд это звучит как революция: наконец‑то условия в CSS! Но так ли всё радужно? Разберёмся спокойно и по шагам.

Ключевое слово CSS unset, представленное в спецификации CSS Cascading and Inheritance Level 3, — это мощный инструмент для сброса значений свойств с учетом контекста. Доступное в браузерах с 21 сентября 2018 года (статус Baseline «Widely Available»), unset позволяет фронтенд-разработчикам гибко возвращать свойства CSS к их значениям по умолчанию или унаследованным значениям. В этой статье мы подробно разберем механику, исторический контекст, варианты применения и практические сценарии использования unset.

Предполагается, что читатель знаком с основами CSS, включая каскад, специфичность и наследование. Мы рассмотрим, как unset вписывается в современные рабочие процессы CSS, сравним его с родственными ключевыми словами initial и revert, а также приведем практические примеры для демонстрации его полезности.