CSS развивается стремительными темпами. Chrome опубликовал отчёт CSS Wrapped 2025, который полон новых функций и обновлений! В этой статье рассмотрим несколько самых интересных из них.
Scroll State Queries
Теперь, если элемент зафиксирован, привязан к прокрутке или является прокручиваемым, можно использовать функцию состояния прокрутки (scroll state), чтобы применять к нему стили в зависимости от его состояния.
Например, представим, что мы хотим ограничить ширину панели навигации и сместить её на 20 пикселей при загрузке страницы, но как только она достигает верхней части страницы, она должна зафиксироваться и занять всю ширину.
Больше не нужно использовать JavaScript. Несколько строк CSS справятся с этой задачей.
Суть в том, чтобы задать для «липкого» элемента container-type: scroll-state, а затем использовать для дочернего элемента запрос @container scroll-state(stuck: top), чтобы определить, когда он зафиксирован. Всю обработку прокрутки браузер берёт на себя — не нужны ни Intersection Observer, ни обработчики событий прокрутки!
👉 Посмотрите полный пример на Codepen.
Это также может быть очень полезно для анимации элементов слайдера, которые привязаны к прокрутке.
👉 Посмотрите полный пример на Codepen.
Стилизация для элементов select
Давно пора! Наконец, в 2025 году мы можем настраивать внешний вид и поведение элемента <select>. Надеюсь, к концу 2026 года это будет работать во всех браузерах 😅.
Начнём с установки свойства appearance для базового элемента select:
Далее добавим вот такую разметку (обратите внимание на тег img ВНУТРИ тега options🔥) :
Теперь стилизуем:
👉 Посмотрите полный пример на Codepen.
Функции подсчёта элементов в дереве
До сих пор для создания последовательных анимаций требовалось подсчитывать количество элементов в дереве. Это обычно делалось с помощью хрупких hardcode-решений на CSS/HTML или с использованием JavaScript. Новая функция CSS *sibling-index()* значительно упрощает этот процесс и автоматически адаптируется к изменениям количества элементов в DOM.
👉 Посмотрите полный пример на Codepen.
Функции if() в CSS
С появлением новой функции if() в CSS теперь можно писать правила, содержащие условия на основе запросов media(), supports() и style() для быстрой и удобной установки отдельных значений свойств. Например, так можно задать цвет фона: зелёный для больших экранов и синий для маленьких.
👉 Посмотрите полный пример на Codepen.
Пользовательские CSS-функции
Пользовательские CSS-функции — это новый способ создавать логику, которую можно компоновать и многократно использовать в стилях. Они принимают аргументы и возвращают корректное значение, как и ожидается. В приведённом ниже примере определяется функция --half(), которая возвращает половину заданного значения.
Вызвать эту функцию можно так:
Ещё больше пользы можно извлечь комбинируя пользовательские функции и css-переменные:
👉 Посмотрите полный пример на Codepen.
Заключение
В отчёте CSS Wrapped 2025 упомянуто множество других новых функций. Я настоятельно рекомендую ознакомиться с ним полностью — там есть подробные объяснения и примеры для каждой новинки.
Каждый раз, когда можно использовать CSS вместо JavaScript, стоит это делать. Обычно это быстрее, эффективнее и надёжнее.
Обратите внимание, что некоторые из упомянутых здесь функций и в самом отчёте пока не работают во всех браузерах. Проверьте поддержку на сайте Can I Use, чтобы узнать, что и где поддерживается.
Подпишитесь на канал чтобы не пропустить новые статьи о разработке!
Оригинал статьи читайте по ссылке