CSS

В ноябре 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, а также приведем практические примеры для демонстрации его полезности.

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

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

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

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

Давайте разберёмся с :nth-child(). Это встроенная возможность CSS, которая помогает выбрать элементы на странице по их порядку внутри какого-нибудь контейнера, например, списка или блока. Хочется выделить каждый второй элемент? Или, скажем, каждый третий, начиная с четвёртого? С :nth-child() это легко! Можно просто написать номер, чтобы взять, к примеру, пятый элемент, или использовать что-то вроде «чётные» или «каждые три», чтобы всё красиво стилизовать.

Цвета в CSS можно задавать не только в форматах RGB, HEX или HSL, но и с помощью именованных цветов. Такие названия, как red, limegreen, blue или rebeccapurple, упрощают стилизацию, делая код более читаемым и интуитивным. Этот подход особенно полезен для быстрого прототипирования и учебных проектов.

Именованные цвета были введены в спецификации CSS1 (1996 год) и основаны на палитре X11, используемой в оконной системе UNIX. Названия вроде aliceblue, papayawhip или moccasin пришли именно из этой палитры. В CSS Color Level 4 (2022 год) стандарт закрепил 147 именованных цветов, включая transparent и currentcolor. Эти цвета поддерживаются во всех современных браузерах и могут использоваться для задания фона, текста, границ, теней и других свойств.