CSS

@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. Эти цвета поддерживаются во всех современных браузерах и могут использоваться для задания фона, текста, границ, теней и других свойств.

Свойство letter-spacing — одно из базовых средств CSS-типографики, которое управляет расстоянием между буквами текста. Оно позволяет сделать текст более разреженным или, наоборот, плотным. Сегодня это свойство используется повсеместно — от стилизации логотипов до улучшения читаемости в длинных абзацах. С января 2018 года оно находится в статусе Widely Available в Baseline, а значит, поддерживается всеми современными браузерами.

Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы CSS :link, :visited и :any-link. Эти инструменты позволяют стилизовать ссылки в зависимости от их состояния, улучшая навигацию и пользовательский опыт. В этой статье мы разберём, как они работают, их историю, особенности и как безопасно использовать их в 2025 году.

Псевдоклассы :link и :visited существуют с самого зарождения CSS, появившись в спецификации CSS1 в 1996 году. Тогда веб был преимущественно текстовым, и ссылки играли центральную роль в навигации. Разработчики хотели, чтобы пользователи могли визуально отличать непосещённые ссылки от тех, на которые они уже кликали. :link отвечал за стилизацию непосещённых ссылок, а :visited — посещённых, основываясь на истории браузера.

Псевдокласс :any-link появился значительно позже, в спецификации CSS Selectors Level 4, чтобы упростить стилизацию ссылок независимо от их состояния (посещённые или нет). Он стал частью стандарта в 2022 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы.