Когда работаешь с такими масштабными продуктами, как мы делаем в VK, быстро начинаешь ценить код, который можно не писать. Особенно если речь о небольших сценариях: открыть поповер, анимировать появление блока или подстроить поле под контент. Ещё недавно для таких задач мы почти автоматически тянулись к JavaScript. Но за последние два года CSS сильно расширил свои возможности для задач, связанных с интерфейсом.
Я Максим Кузнецов, занимаюсь оптимизацией производительности и улучшением стабильности веб-версий ВКонтакте. В этой статье расскажу, что уже можно использовать как альтернативу JS, что стоит попробовать аккуратно, а за чем пока лучше просто следить.
Что уже полезно в реальных проектах
Начнём с возможностей, которые чаще всего влияют на повседневную разработку: состояние DOM, формы, всплывающие элементы и анимации. Это не самые новые фичи, но именно они чаще всего помогают работать уже без использования JavaScript.
:has(): стилизация контейнера по состоянию вложенных элементов
Поддержка: Chrome, Safari, Firefox
:has() далеко не новая тема, разговоры про него идут давно, и во многих проектах он уже активно используется. Но именно сейчас он стал восприниматься как полноценный рабочий инструмент.
:has() решает одну из старых проблем CSS: как изменить стиль родителя, если внутри него есть элемент в определённом состоянии.
Раньше для этого часто использовали JS. Например, если внутри блока выбран checkbox, скрипт добавлял класс на родительский элемент. Если выбор снимался, класс удалялся. В итоге появлялась вспомогательная логика, которая отвечала только за визуальное состояние.
С :has() такой сценарий можно описать сразу в CSS:
.card:has(input:checked) {
border-color: var(--color-accent);
}Ещё несколько типичных примеров:
.form-field:has(input:invalid) {
border-color: var(--color-error);
}
.card:has(:focus-visible) {
outline: 2px solid var(--color-focus);
}
.tabs:has([aria-selected="true"]) {
--tabs-state: active;
}
:has() хорошо подходит для локального визуального состояния: выбранный checkbox, невалидное поле, фокус внутри карточки, активный элемент внутри контейнера, наличие определённого дочернего элемента.
В нашем коде такие сценарии уже встречаются, и это хороший пример того, как CSS забирает на себя не бизнес-логику, а именно визуальную часть поведения. Если состояние нужно для данных, аналитики, маршрутизации или бизнес-правил, оно остаётся в JS. Но если класс раньше добавлялся только ради оформления, :has() в этом плане часто оказывается проще.
field-sizing: авторазмер полей без помощи JavaScript
Поддержка: Chrome и Safari — есть, Firefox — ещё нет
Авторазмер полей формы долго оставался задачей, которую обычно решали через JavaScript. Для textarea приходилось подписываться на input, читать высоту содержимого, сбрасывать текущее значение высоты и выставлять новое. Для input использовали похожие обходные решения: скрытые элементы, измерение текста или дополнительные обёртки.
field-sizing закрывает часть этих сценариев на уровне CSS. При значении content поле может подстраиваться под введённое значение.
textarea,
input {
field-sizing: content;
}Это полезно для инлайн-редактирования, небольших форм и интерфейсов, где размер поля должен зависеть от содержимого.
При этом свойство не отменяет нормальную работу с ограничениями. Для реального интерфейса всё равно нужно задать минимальный и максимальный размер, проверить переносы, длинные значения, мобильную клавиатуру и доступность.
.message-field {
field-sizing: content;
min-block-size: 40px;
max-block-size: 160px;
}
Вывод простой: если поле должно просто подстраиваться под контент, для этого уже не всегда нужен отдельный скрипт.
Popover API: всплывающие элементы без лишнего кода
Поддержка: Chrome, Safari, Firefox
Всплывающие элементы долго требовали большого количества JavaScript. Popover API забирает часть этого базового поведения на себя.
<button popovertarget="menu">Открыть меню</button>
<div id="menu" popover>
<button>Профиль</button>
<button>Настройки</button>
</div>
Для простых меню, тултипов и небольших поповеров это снижает объём кода, потому что базовое открытие и закрытие можно описать декларативно.
Конечно, в сложных компонентах JS всё равно может понадобиться — например, для сложного управления состоянием, вложенных сценариев. Но для базового поведения теперь есть нативная основа, и это уже меняет подход к таким компонентам.
CSS Anchor Positioning: позиционирование относительно якоря
Поддержка: Chrome и Safari — есть, Firefox — нет
Тултипы, меню и превью обычно должны появляться рядом с конкретным элементом: кнопкой, аватаром, полем ввода. Раньше для этого часто считали координаты через JS, следили за прокруткой, изменением размеров окна и выходом элемента за границы экрана.
CSS Anchor Positioning позволяет связать всплывающий элемент с якорем и описать позицию декларативно.
.trigger {
anchor-name: --menu-trigger;
}
.menu {
position-anchor: --menu-trigger;
position-area: bottom span-right;
}
Главная идея здесь не в том, что все утилитарные методы уже завтра станут не нужны. Идея в том, что для части сценариев браузер уже начинает закрывать то, что раньше писали вручную.
@starting-style: анимация появления без промежуточного состояния
Поддержка: Chrome, Safari, Firefox
Когда элемент впервые появляется в DOM или переходит из display: none в видимое состояние, браузер не всегда знает, от какого значения запускать переход. Поэтому в интерфейсах часто заводят промежуточные состояния: mounted, visible, closing, таймеры и ручное удаление элемента после анимации.
@starting-style позволяет задать начальное состояние для такого перехода.
dialog {
opacity: 1;
transition: opacity 200ms;
}
@starting-style {
dialog {
opacity: 0;
}
}
Это особенно полезно для dialog, popover, меню и элементов, которые появляются после изменения атрибута или состояния отображения.
transition-behavior: переходы для дискретных свойств
Поддержка: Chrome, Safari, Firefox
Некоторые CSS-свойства не анимируются плавно. Например, display не имеет промежуточных значений, так как элемент либо отображается, либо нет.
transition-behavior: allow-discrete позволяет включить переходы для дискретных свойств и аккуратнее описывать открытие и закрытие элементов.
[popover] {
opacity: 0;
transition:
opacity 200ms,
display 200ms allow-discrete;
}
[popover]:popover-open {
opacity: 1;
}
@starting-style {
[popover]:popover-open {
opacity: 0;
}
}В связке с @starting-style это помогает описывать появление и скрытие поповеров, диалогов и меню без дополнительного слоя состояний в JS.
Scroll-driven animations: анимации на основе прокрутки
Поддержка: Chrome и Safari — есть, Firefox — ещё нет
Анимации, завязанные на прокрутку, долго делали через обработчики scroll: вычисляли позицию элемента, обновляли CSS-переменные, синхронизировали прогресс и следили за производительностью.
Сейчас часть таких задач можно описать через CSS Scroll-driven animations: scroll-timeline, view-timeline, animation-timeline.
Типовые сценарии:
— индикатор прогресса чтения
— появление блока при попадании в область видимости
— декоративные scroll-эффекты
— анимация, завязанная на положение контейнера прокрутки
Это не замена всем scroll-сценариям. Если прокрутка влияет на данные, сбор аналитики, состояние приложения или иную побочную логику, JavaScript остаётся незаменимым. Но если задача визуальная, CSS-вариант следует рассмотреть первым.
Новые и экспериментальные возможности
Теперь перейдём к возможностям, которые интересны, но требуют большей осторожности; часть из них пока доступна не везде, часть лучше использовать как постепенное улучшение, а другая часть показывает, куда в целом развивается CSS.
Все возможности из этого раздела перед внедрением нужно отдельно проверять по целевым браузерам.
sibling-index() и sibling-count(): позиция элемента без ручной передачи индекса
Поддержка: только Chrome
В повторяющихся элементах, например списках или повседневных сетках, часто нужно знать позицию элемента: для задержки анимации, расчёта смещения, распределения элементов или декоративного эффекта.
До появления новых функций обычно использовали один из трёх подходов:
— прописывали несколько правил через :nth-child()
— передавали индекс через CSS-переменную из шаблона
— считали позицию через JavaScript
sibling-index() возвращает номер текущего элемента среди соседей, а sibling-count() — общее количество соседних элементов.
.item {
animation-delay: calc(sibling-index() * 60ms);
}Ещё один пример — распределение элементов по ширине:
.gallery-item {
inline-size: calc(100% / sibling-count());
}
Это особенно полезно для декоративных списков, каскадных анимаций и компонентов, где визуальное поведение зависит от порядка элементов.
if(): условные значения внутри CSS-свойств
Поддержка: только Chrome
if() добавляет в CSS возможность выбирать значение свойства по условию. Это не заменяет медиазапросы, @supports или состояние приложения, но позволяет держать часть локальной логики рядом со свойством.
media() внутри if() проверяет условия среды, например ширину экрана или тип устройства ввода. А @supports внутри if() проверяет поддержку конкретного CSS-свойства или значения.
Например, можно выбрать размер кнопки в зависимости от типа устройства ввода:
.button {
min-block-size: if(
media(any-pointer: fine): 32px;
else: 44px;
);
}Здесь media(any-pointer: fine) означает: если у пользователя точное устройство ввода, например мышь или трекпад, можно сделать кнопку компактнее. В остальных случаях оставляем более крупный размер.
Можно опираться на ширину вьюпорта:
.page {
--content-gap: if(
media(width < 700px): 16px;
else: 32px;
);
}Можно проверять поддержку возможности браузером:
.card {
padding: if(
supports(margin-inline: 1rem): 24px;
else: 16px;
);
}А можно выбирать значение на основе другого CSS-свойства:
.block {
--theme: dark;
color: if(
style(--theme: dark): white;
else: black;
);
}
Главная польза if() не в том, что CSS превращается в язык программирования. Польза в локализации условий, иными словами, связанная логика остаётся рядом с тем свойством, на которое влияет.
Для боевого кода всё равно нужны запасные значения и проверка через @supports.
.button {
min-block-size: 44px;
}
@supports (min-block-size: if(media(width < 700px): 44px; else: 32px)) {
.button {
min-block-size: if(
media(any-pointer: fine): 32px;
else: 44px;
);
}
}@function: переиспользуемые вычисления в CSS
Поддержка: только Chrome
@function позволяет описывать собственные CSS-функции и переиспользовать вычисления без препроцессора.
Пример — функция для сетки:
@function --grid-columns(--count) {
result: repeat(var(--count), 1fr);
}
.cards {
display: grid;
grid-template-columns: --grid-columns(3);
}Это направление особенно интересно для команд, которые до сих пор держат препроцессор только ради функций или миксинов.
interest-delay: задержка открытия и закрытия для hover-сценариев
Поддержка: только Chrome
Выпадающие элементы часто открываются слишком резко. Пользователь наводит курсор на кнопку, элемент сразу появляется, затем исчезает, если курсор не успел перейти на всплывающую область. В таких сценариях раньше обычно добавляли задержку через JavaScript.
interest-delay позволяет задавать задержку для interest-сценариев декларативно.
[interestfor] {
interest-delay: 200ms;
}
Это может быть полезно для подсказок, hover-карточек, предпросмотров и элементов, которые не должны открываться или закрываться мгновенно.
Декоративные и нишевые возможности
Здесь я собрал фичи для более точной настройки интерфейса (цвета, нестандартные формы и курсор ввода). Они не меняют общий подход к приложению, но могут быть полезны в конкретных местах.
contrast-color(): автоматический контраст для простых случаев
Поддержка: только Safari
contrast-color() принимает цвет и возвращает контрастный к нему цвет. В текущей модели функция выбирает между чёрным и белым в зависимости от того, какой вариант лучше читается на переданном фоне.
.badge {
--badge-bg: #660066;
background: var(--badge-bg);
color: contrast-color(var(--badge-bg));
}
Но contrast-color() нельзя считать заменой дизайн-системе и проверкам доступности. Функция выбирает только между чёрным и белым, а не подбирает цвет из палитры продукта. Абсолютный чёрный и абсолютный белый не всегда подходят визуально. А автоматический выбор контраста не отменяет дизайн-токены, тесты и ручную проверку цветовых пар.
border-shape: декоративные формы без части ограничений clip-path
Поддержка: слабая
Здесь поддержка хуже всего, поэтому пока это скорее возможность, за развитием которой стоит следить, а не брать в основу интерфейса.
clip-path давно используют для нестандартных форм. Но у него есть ограничение: он обрезает не только сам элемент, но и декоративные эффекты. Например, box-shadow может исчезнуть вместе с областью, которую срезал clip-path.
.card {
inline-size: 200px;
block-size: 200px;
background: tomato;
clip-path: circle(50%);
box-shadow: 0 0 10px #222;
}Один из распространённых обходов — filter: drop-shadow(). Но это отдельный приём со своими ограничениями по качеству отрисовки и производительности.
border-shape решает похожую задачу иначе: задаёт форму границы и позволяет сохранить декоративные свойства.
.card {
inline-size: 200px;
block-size: 200px;
background: tomato;
border-shape: circle(50%);
box-shadow: 0 0 10px #222;
}
Свойство поддерживает знакомые функции форм:
.shape-a {
border-shape: inset(10px 20px 5px 15px);
}
.shape-b {
border-shape: circle(50%);
}
.shape-c {
border-shape: ellipse(30px 50px);
}
.shape-d {
border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.shape-e {
border-shape: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z");
}
.shape-f {
border-shape: shape(from 50% 0, line to 100% 100%, line to 0 100%, close);
}Но пока border-shape лучше внедрять как прогрессивное улучшение: если браузер не поддерживает свойство, интерфейс должен оставаться нормальным.
.avatar {
border-radius: 50%;
box-shadow: 0 0 10px #222;
}
@supports (border-shape: circle(50%)) {
.avatar {
border-radius: 0;
border-shape: circle(50%);
}
}caret-shape: форма текстовой каретки
Поддержка: только Chrome
В CSS давно есть caret-color, который задаёт цвет текстовой каретки. caret-shape добавляет ещё один уровень настройки — форму курсора ввода.
.code-input {
caret-shape: block;
}Доступны три базовых значения:
.input-a {
caret-shape: bar;
}
.input-b {
caret-shape: block;
}
.input-c {
caret-shape: underscore;
}
Это нишевая возможность. В обычных формах лучше не менять каретку без причины: пользователи ожидают стандартное поведение поля ввода. Но для редакторов кода, терминальных интерфейсов, обучающих сред и специальных полей свойство может быть полезным. caret-shape позволяет аккуратнее настроить детали интерфейса там, где форма курсора действительно важна.
Что в итоге?
CSS не стал (и не должен был стать) заменой JavaScript. Но они начали лучше дополнять друг друга: JS остаётся там, где нужна логика приложения, а CSS всё чаще закрывает задачи, которые действительно должен закрывать.
Автор: GolovinDS
