О проекте Interop
На протяжении последних лет крупные браузер-вендоры (Google, Apple, Microsoft, Mozilla) вместе с компаниями Igalia и Bocoup работают над проектом Interop — инициативой по улучшению универсальной поддержки веб-технологий во всех браузерах. Результаты впечатляющие: когда функция добавляется в программу Interop, она часто достигает почти 100% поддержки во всех современных браузерах в течение года. ✨
CSS Subgrid — хороший пример. Это мощное расширение CSS Grid, которое открывает совершенно новые подходы к вёрстке. Firefox получил поддержку ещё в 2019 году, но другие браузеры долго не спешили. После добавления в Interop 2023 функция была доступна во всех современных браузерах уже к концу года:
Сейчас, в конце 2026 года, идёт планирование Interop 2027. Команда Mozilla создала систему рейтинга для голосования за нужные функции. Эти данные помогут определить, какие возможности попадут в программу на следующий год!
Далее — 10 функций, за которые мы проголосовали, и небольшой обзор того, как CSS может выглядеть в следующем году. Плюс несколько советов, которые можно начать применять уже сегодня!
1. CSS функции
Одна из самых интересных идей — предложение добавить функции в CSS:
/* Определение функции: */
@function --gradient-to-transparent(--color, --direction: bottom) {
result: linear-gradient(
to var(--direction),
var(--color),
transparent;
);
}
/* Использование: */
.elem {
background: --gradient-to-transparent(red);
}
/* …что даёт: */
.elem {
background: linear-gradient(
to bottom,
red,
transparent;
);
}Если знаком с JavaScript, это должно быть знакомо. Функции определяются через @function, возвращаемое значение указывается через result.
Возможностей масса. Больше всего заинтересовали преобразования между полярными и декартовыми координатами — концепция, которую часто используем в курсе Whimsical Animations:
@function --translate-polar(--angle, --distance) {
result: translate(
calc(cos(var(--angle)) * var(--distance)),
calc(sin(var(--angle)) * var(--distance))
);
}
/* Переместить элемент на 100px под углом 45°: */
.particle {
transform: --translate-polar(45deg, 100px);
}Звучит как научная фантастика, но это уже реализовано в Chromium. Если функция попадёт в Interop 2027, шансы на скорую поддержку во всех браузерах высоки!
2. Bevels и squircles с corner-shape
В CSS используем border-radius для скругления углов элементов. Свойство corner-shape — исследование альтернативных способов соединить 4 стороны элемента. Предлагается несколько новых вариантов:
Когда впервые услышал об этом свойстве, больше всего привлекли squircle — они используют алгоритм суперэллипсов для более гладких переходов на углах. Apple использует их уже много лет.
Но после экспериментов с corner-shape чаще всего применяю corner-shape: bevel. Отлично подходит для видеоигровых и sci-fi интерфейсов. Вот превью побочного проекта, там много использовано corner-shape: bevel:
Раньше можно было делать подобное через clip-path или маски, но в отличие от них corner-shape действительно меняет border-box элемента. Это значит, что границы, контуры и тени правильно следят за изменённой формой углов!
И хотя это свойство пока недоступно в Firefox/Safari (октябрь 2026), разумно начать использовать его уже сегодня как прогрессивное улучшение.
3. Бесконечные возможности с border-shape
Кроме corner-shape есть отдельное предложение для border-shape — по сути, низкоуровневая версия, которая позволяет рисовать границу самостоятельно.
Подробно разбирал это свойство в недавнем выпуске рассылки. Вкратце: border-shape даёт возможность создавать любую форму границы, используя прямые линии, арки и кривые Безье.
Недавно использовал это свойство для открытки с большой круглой выемкой сверху:
Как и corner-shape, это свойство меняет actual border box элемента, поэтому границы/контуры/тени отрисовываются правильно. Нарисовал нужную форму, добавил белую границу и чёрный контур для эффекта на скриншоте!
Можно даже анимировать переходы между разными border shapes.
Больше деталей в выпуске рассылки на эту тему.
4. Anchored Container Queries
Недавно опубликовал статью об Anchor Positioning — одной из самых интересных современных CSS-функций (была приоритизирована в Interop 2026 и теперь широко поддерживается).
Anchor Positioning API позволяет привязать один элемент к другому. Например, можно привязать плавающую подсказку к её триггеру, чтобы они всегда были связаны, где бы ни находился триггер на странице.
Если когда-либо пытались решить такую задачу самостоятельно, знаешь, что это сложнее, чем кажется. Например, хотим, чтобы подсказка выглядела над элементом, но что если элемент близко к верхней части окна?
Исходный Anchor Positioning API предоставил большинство инструментов для решения этой проблемы в CSS. Позволяет указать fallback позиции: если целевой элемент не влезает сверху, он автоматически может перейти вниз.
Единственное, чего не было — возможность узнать, произошёл ли переход на fallback позицию. В CSS нельзя было определить, находится ли целевой элемент над или под якорем, использует ли он позицию по умолчанию или fallback. Для подсказок это проблема, потому что обычно хотим добавить маленький выступ, указывающий на якорь.
«Level 2» версия Anchor Positioning API включает новый тип container query, позволяющий проверить, использует ли целевой элемент fallback позицию или нет. Подробнее об этом в статье об Anchor Positioning или в предложении для Interop 2027.
5. CSS функция inherit()
Честно, раньше не слышал об этом предложении, и похоже, оно не реализовано ни в одном браузере. Даже на caniuse нет информации!
Но с первого взгляда оно стало must-have. 😂
Как известно, ключевое слово inherit в CSS позволяет передать значение от родителя, даже если это свойство обычно не наследуется:
p {
border-radius: calc(inherit() - 4px);
}Учитывая, насколько предварительно это состояние функции, был бы удивлён, если бы она попала в Interop 2027. Но будем надеяться, что она появится! Выглядит очень полезной. 😄
6. Scroll-triggered анимации
В статье о scroll-driven анимациях показываем, как можно «проскручивать» через анимацию при прокрутке. Например, можно использовать это для постепенного появления элемента по мере его перемещения через viewport.
Scroll-driven анимации были частью Interop 2026 и успешно реализованы во всех браузерах. Но кроме scroll-driven анимаций есть отдельное предложение для scroll-triggered анимаций.
С scroll-triggered анимациями цель — запустить keyframe анимацию, когда пользователь прокручивает до определённой точки, как срабатывание датчика приближения. После этого анимация проигрывается нормально в течение указанной длительности.
Сейчас можно реализовать scroll-triggered анимации через IntersectionObserver API в JavaScript, но это нудно. Будет очень приятно использовать CSS для обоих типов анимаций, так как у них разные применения.
Больше о scroll-triggered анимациях в этой отличной статье от Bramus.
7. CSS reading-flow и reading-order
Сейчас работаю над top-secret проектом с динамичной grid-based вёрсткой. На десктопе и мобиле элементы расположены совсем по-разному.
В этом вся прелесть responsive CSS, но есть неприятный побочный эффект: порядок табуляции всегда основан на порядке в DOM, а не на визуальном порядке. Поэтому, если кто-то использует assistive технологии для навигации между элементами, этот порядок всегда останется одинаковым, даже когда вёрстка кардинально меняется в зависимости от размера экрана.
На десктопе первый визуальный элемент — список слева, на мобиле — большая красная кнопка. Какой бы элемент ни был первым в DOM, именно он получит фокус первым, что неправильно для части пользователей.
К счастью, новое свойство reading-flow решает эту проблему. Есть предложение для Interop 2027.
Базовая идея: можно указать, что порядок табуляции должен следовать одному из нескольких визуальных порядков:
.grid {
display: grid;
reading-flow: grid-rows;
}Есть значения как для CSS Grid, так и для Flexbox. Если нужен ещё больший контроль, свойство reading-order позволяет создать кастомный порядок, вроде tabIndex в HTML.
Это свойство поддерживал один из любимых авторов, Rachel Andrew. Подробнее об этом в её статье о reading-flow.
8. Анимации размеров ключевых слов с interpolate-size и calc-size()
Давняя боль в вебе — невозможность анимировать ключевые значения типа auto. Свойство interpolate-size решает эту проблему. Есть предложение Interop 2027 для неё и связанной функции calc-size().
Самый частый вариант применения — анимация между height: 0 и height: auto для создания accordion-типа UI:
html {
interpolate-size: allow-keywords;
}
details {
overflow: hidden;
&::details-content {
height: 0;
transition:
height 300ms,
content-visibility 300ms;
transition-behavior: allow-discrete;
}
&:open::details-content {
height: auto;
}
}Это достаточно комплексный пример, требующий других нишевых CSS вроде transition-behavior. Но ключевое в том, что interpolate-size: allow-keywords делает такие переходы возможными.
Это предложение уже несколько лет, и оно реализовано в Chrome с 2024 года, так что есть хорошие надежды на Interop 2027!
И хотя пока не доступно во всех браузерах, можно начать использовать уже сегодня как прогрессивное улучшение. Просто убедись, что оборачиваешь transition в @supports запрос, иначе в неподдерживающих браузерах добавится небольшая задержка.
9. CSS gap декорации
Одно из уникальных свойств CSS Grid — дочерние элементы позиционируются с использованием строк/колонок, полностью определённых в CSS. Во всех остальных режимах вёрстки элементы позиционируются с помощью других элементов! В table layout, например, каждая ячейка связана с элементом <td> или <th>.
CSS Grid имеет много преимуществ, но минус в том, что сложнее добавлять границы между ячейками. Если ячейка пуста, нет элемента, на который можно повесить border: 1px solid!
Предложение gap decorations вводит новый набор CSS-свойств, позволяющих использовать border-подобный синтаксис на самой grid. Смотри:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 1px;
border: 1px solid red;
/* 👇 Новая возможность 👇 */
rule: 1px solid red;
}Как border, свойство rule — shorthand, позволяющий указать width, color и style (dashed/dotted/solid) линии. Можно также использовать row-rule и column-rule, если хотим линии только между строками или колонками.
10. Scroll state container queries
При работе с position: sticky, хотелось бы знать, находится ли элемент в данный момент "прилипшим" или нет? Например, можно менять цвет фона sticky header, когда он прилипает к верхней части viewport.
Это предложение о реализации нового типа container query, который срабатывает, когда элемент position: sticky переходит из обычной позиции в положения, закреплённое на viewport.
header {
position: sticky;
top: 0;
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
.header-content {
background: var(--gray-300);
border-bottom:
1px solid var(--gray-500);
}
}Интересно, что эта новая API не только для sticky позиционирования; можно проверять все виды scroll-related состояний. Например, можно определить, прокручен ли scroll container к верхнему/нижнему краю, что полезно для отображения gradient-подсказок о возможности прокрутки:
.container {
height: 100%;
container-type: scroll-state size;
overflow: auto;
&::before {
top: 0;
background: linear-gradient(
to bottom,
black,
transparent
);
opacity: 0;
@container scroll-state(scrollable: top) {
opacity: 1;
}
}
&::after {
bottom: 0;
background: linear-gradient(
to top,
black,
transparent
);
opacity: 0;
@container scroll-state(scrollable: bottom) {
opacity: 1;
}
}
}Заключение
CSS развивается быстро, и Interop 2027 обещает множество интересных функций. Некоторые из них уже работают в Chromium и могут использоваться как прогрессивные улучшения. Другие — это совсем новые идеи, которые только ждут стандартизации и реализации во всех браузерах.
Независимо от того, какие функции будут включены, важно помнить, что web-платформа эволюционирует благодаря сотрудничеству браузер-вендоров, и Interop — отличный способ обеспечить, что улучшения появляются равномерно и логично.