Совсем недавно в 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 году на сайте башкирской федерации настольного тенниса уже была анимированная бегущая строка — смотрите сами:

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

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

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

Правильно говорят, что лучший способ чему-то научиться — подсмотреть у тех, кто умеет. Поэтому принесли вам подборку с CodePen, в которой хорошие разработчики делают интересные штуки и делятся ими со всеми. В этом выпуске — интерфейсы на CSS и React.

Когда вы задаёте анимацию или переход в 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]].

Наверняка вы сто раз видели кнопку Скопировать, например, возле блоков кода в любимой нейронке, чтобы быстро их скопипастить. Давайте разберемся, как самостоятельно сделать такую же (кнопку, а не нейронку).

Генерация UUID — одна из тех фундаментальных задач, с которой сталкивается каждый разработчик. Universally Unique Identifier, или универсальный уникальный идентификатор, решает простую, но критически важную задачу: создание гарантированно уникального идентификатора.

JSON (JavaScript Object Notation) — это текстовый формат для представления структурированных данных. Он повсеместно используется для обмена информацией между клиентом и сервером, хранения конфигураций и сериализации состояний. В JavaScript его преобразование в рабочие объекты выполняется стандартным методом JSON.parse(). Ниже описаны корректные и надёжные способы его применения — от базового использования до промышленных практик.

В ноябре 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 во всех основных браузерах без необходимости включения экспериментальных флагов.

Часто бывает нужна какая-нибудь конкретная регулярка — например, проверить почту или номер телефона. Собрали 40 часто встречаемых, чтобы они всегда были под рукой (или, на худой конец, в закладках).

Сохрани страницу — и 40 самых полезных регулярных выражений всегда под рукой!

Объект Date позволяет создавать, сравнивать и форматировать дату и время. Используется для отображения текущего времени, вычисления интервалов и работы с таймзонами в веб-приложениях.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

@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! Но так ли всё радужно? Разберёмся спокойно и по шагам.

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

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

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

Инструменты разработчика в браузере Chrome лишатся одной из своих экспериментальных возможностей — «живого редактирования» JavaScript-кода. Как сообщила команда разработчиков в официальном блоге, функция будет полностью удалена в феврале 2026 года с выходом версии Chrome 145. Это решение отражает эволюцию современных инструментов веб-разработки.

Функция line-clamp находится в статусе ограниченной доступности в Baseline, но уже широко используется для создания аккуратных текстовых блоков. Это свойство позволяет ограничить отображение текста заданным количеством строк, скрывая всё, что выходит за пределы. Оно идеально подходит для превью статей, цитат или карточек товаров, где нужно показать только часть текста, не перегружая страницу.

В основе line-clamp лежит комбинация свойств, включающих display: -webkit-box, -webkit-line-clamp и -webkit-box-orient: vertical. Современные браузеры поддерживают стандартное свойство line-clamp без префиксов, но для максимальной совместимости лучше использовать и префиксные версии. Это особенно важно для старых версий браузеров, таких как Safari.

Давайте разберём, как работает line-clamp, и посмотрим на несколько примеров.