ИИтог

Interop 2027: какие новые функции CSS автор блога хочет видеть в браузерах

инструментыРедакция ИИтогHacker News🔥63Рейтинг ИИтог63Влияние42Новизна50Релевантность65Неожиданность35Участники25Достоверность80
Interop 2027: какие новые функции CSS автор блога хочет видеть в браузерах

Все крупные производители браузеров (Google, Apple, Microsoft и Mozilla вместе с Igalia и Bocoup) несколько лет совместно работают над проектом Interop, цель которого, единая поддержка веб-технологий во всех браузерах. По словам автора блога, проект оказался очень успешным: когда область попадает в Interop, она нередко добирается до почти 100% поддержки во всех основных браузерах в течение года. Пример, CSS Subgrid: в Firefox он был реализован ещё в 2019 году, но другие браузеры годами не двигались. После добавления в Interop 2023 к концу того же года Subgrid стал широко доступен во всех современных браузерах.

Сейчас, к концу 2026 года, планируется Interop 2027. Команда Mozilla создала систему рейтинга, где разработчики голосуют за самые востребованные возможности, и, по словам автора, собирается использовать эти данные, чтобы решить, что включить в Interop следующего года. В статье автор разбирает десять функций, за которые проголосовал сам. В доступной части текста разобраны первые восемь.

  1. CSS-функции (@function). Функцию объявляют через @function, а возвращаемое значение задают через result, как в JavaScript. Пример из статьи: функция --gradient-to-transparent принимает цвет и направление и возвращает linear-gradient. Сам автор больше всего ждёт возможность переводить полярные координаты в декартовы (используется в его курсе по анимациям). Функции уже реализованы в браузерах на движке Chromium, и, по мнению автора, при включении в Interop 2027 у них хорошие шансы скоро стать широко доступными.

  2. corner-shape. Если border-radius добавляет каждому углу четверть окружности, то corner-shape предлагает альтернативные способы соединить стороны блока, в том числе squircle (сглаженные углы на основе суперэллипсов, которыми Apple пользуется много лет) и bevel (скос). Автор сам постоянно применяет bevel для интерфейсов в стиле видеоигр и научной фантастики. В отличие от clip-path и масок, corner-shape меняет форму самого border-box, поэтому рамки, контуры и тени корректно повторяют новую форму. В Firefox и Safari (на октябрь 2026 года) свойство недоступно, но автор считает, что его уже разумно использовать как прогрессивное улучшение.

  3. border-shape. Это отдельное предложение, по сути более низкоуровневая версия: границу можно нарисовать самому из прямых линий, дуг и кривых Безье. Автор нарисовал так карточку с большим круглым вырезом сверху и показывает анимацию между разными формами границы. Как и corner-shape, свойство меняет реальный border-box, так что рамки, контуры и тени следуют форме.

  4. Anchored container queries. Anchor Positioning, привязка одного элемента к другому (например, всплывающей подсказки к кнопке), был в приоритетах Interop 2026 и теперь широко доступен. Базовый API позволяет задавать запасные позиции: если подсказка не помещается сверху, она переворачивается вниз. Не хватало способа узнать в CSS, перевернулась ли она, а это нужно, например, чтобы указатель подсказки смотрел в сторону якоря. API второго уровня добавляет новый тип контейнерных запросов, который проверяет, использует ли элемент запасную позицию.

  5. Функция inherit(). Автор признаётся, что раньше не слышал об этом предложении. Насколько он может судить, оно не реализовано ни в одном браузере и не значится на caniuse. Идея: ключевое слово inherit передаёт значение родителя как есть, а функция позволит его преобразовать, например border-radius: calc(inherit() - 4px) для вложенных скруглений, где внутренний радиус должен быть меньше. Из-за ранней стадии автор был бы немного удивлён, попади она в Interop 2027, но надеется получить её в будущем.

  6. Scroll-triggered animations. Анимации, управляемые прокруткой (scroll-driven), где прокрутка перематывает анимацию по ключевым кадрам, входили в Interop 2026 и реализованы во всех браузерах. Отдельное предложение, анимации, запускаемые прокруткой (scroll-triggered), должно запускать обычную анимацию заданной длительности, когда пользователь доходит до определённой точки. Сейчас это делают через IntersectionObserver в JavaScript, что автор называет мучением. Он рекомендует статью Bramus на эту тему.

  7. reading-flow и reading-order. Порядок табуляции всегда следует порядку элементов в DOM, а не визуальному порядку, поэтому при разных раскладках на десктопе и телефоне фокус для части пользователей, например с ассистивными технологиями, идёт не в том порядке. Свойство reading-flow (например, reading-flow: grid-rows для сетки) позволяет привязать порядок табуляции к визуальному порядку; значения есть и для Grid, и для Flexbox. Для более тонкой настройки reading-order задаёт произвольный порядок, примерно как tabIndex в HTML. По словам автора, за это свойство выступала Рэйчел Эндрю (Rachel Andrew), которую он называет одним из своих героев. Для него есть предложение в Interop 2027.

  8. interpolate-size и calc-size(). Давняя боль веба, невозможность анимировать переход к ключевым значениям вроде auto. Свойство interpolate-size решает это, и для него вместе с функцией calc-size() есть предложение в Interop 2027. Типичный случай, раскрывающиеся блоки-аккордеоны с анимацией height от 0 до auto; ключевое значение здесь interpolate-size: allow-keywords. В Chrome оно реализовано с 2024 года. Использовать его можно уже сейчас как прогрессивное улучшение, но переход нужно оборачивать в запрос @supports, иначе в неподдерживающих браузерах появится небольшая задержка.

Девятый пункт (CSS gap decorations) в доступном тексте обрывается на заголовке.

Ключевые факты

  • Interop, совместный проект Google, Apple, Microsoft, Mozilla, Igalia и Bocoup по единой поддержке веб-технологий; по словам автора, области из Interop нередко достигают почти 100% поддержки за год (Subgrid: Firefox 2019, повсеместно к концу 2023 после добавления в Interop 2023).
  • Mozilla создала рейтинг пожеланий для Interop 2027 и, по словам автора, планирует использовать его данные при выборе содержимого; автор делится десятью функциями, за которые голосовал.
  • Уже реализованы или доступны в части браузеров: CSS-функции (@function, Chromium), corner-shape (нет в Firefox и Safari на октябрь 2026), interpolate-size (Chrome с 2024).
  • Самая ранняя идея, inherit(), например calc(inherit() - 4px): по оценке автора, она не реализована ни в одном браузере, и он удивился бы её попаданию в Interop 2027.
  • Часть новинок решает практические задачи: порядок фокуса при смене раскладки (reading-flow), анимация высоты до auto (interpolate-size), положение подсказки при смене стороны (anchored container queries).

Почему это важно

Interop показал, что совместная работа вендоров ускоряет появление функций сразу во всех браузерах, а Subgrid стал тому примером: от одного Firefox в 2019 году до всех современных браузеров к концу 2023-го. Выбор приоритетных направлений для Interop 2027 по сути задаёт, какие возможности CSS станут надёжно доступными в ближайший год, поэтому статья служит наглядным обзором того, чего ждать вёрстке.

Кому это важно

Фронтенд-разработчикам и дизайнерам интерфейсов, которые следят за развитием CSS и могут участвовать в голосовании Mozilla. Отдельно полезно тем, кто занимается доступностью (reading-flow и reading-order для порядка табуляции) и тем, кто делает анимации и нестандартные формы элементов (corner-shape, border-shape, scroll-triggered animations).

Как это применить

Часть описанного можно пробовать уже сегодня как прогрессивное улучшение. Автор считает разумным применять corner-shape, несмотря на отсутствие поддержки в Firefox и Safari. Для interpolate-size он советует оборачивать переход в запрос @supports, иначе в неподдерживающих браузерах появится короткая задержка. Для голосования за возможности нужно воспользоваться рейтингом, созданным командой Mozilla.

Можно ли доверять

Это личный блог-обзор: оценки шансов и выбор функций принадлежат автору, а не официальный список Interop 2027. Решение Mozilla и других вендоров ещё не принято, и ни одной функции в тексте не гарантировано включение. Доступный для пересказа текст обрывается на девятом пункте из десяти, поэтому последний пункт и заключение не учтены.

Риски и подводные камни

Включение в Interop не гарантировано: автор сам говорит, что inherit() вряд ли пройдёт из-за ранней стадии. Часть функций (corner-shape) пока не работает в Firefox и Safari, так что без запасного варианта интерфейс будет выглядеть по-разному. Использование interpolate-size без @supports даёт задержку в неподдерживающих браузерах. Сроки появления поддержки в статье не обещаны и зависят от решений вендоров.