Фичи будущего в интерфейсе, которые можно и нельзя использовать в 2025 году: разбираем Baseline 2025

О чём говорили на Яндекс-субботнике для разработчиков интерфейсов в Минске.

Михаил Балицкий, старший разработчик интерфейсов главной страницы Поиска Яндекс, рассказал об основных фичах ближайшего будущего. Какие-то уже можно пробовать применить в интерфейсах вашего приложения, а с какими-то придётся подождать.

Михаил сделал клон страницы Яндекс Поиска, чтобы испробовать все нововведения (Baseline), поддерживаемые в браузерах на 2025 год. У каждой фичи есть веб-платформенные тесты от сообщества — набор кейсов, который проверяет функциональность. Многие из фичей, несмотря на то, что находятся в Baseline 2025 года, не имеют 100% покрытия тестов.

Гриды и сабгриды

За основу Layout страницы взяли гриды, которые находятся в продакшене уже более 8 лет.

API первого уровня позволяет вам создавать layout страницы как крупными мазками, то есть верхнеуровнево, так и распределять элементы маленьких блоков.

Но гриды не стоят на месте, а двигаются вперёд. Недавно появилась спецификация второго уровня. Например, если у нас есть блок сервисов, то мы его можем задать как грид. А каждый элемент этого списка — в виде сабгрида. По сути, говоря ему, что он наследует сетку родителя.

Это позволяет за счёт изменения одного свойства родителя полностью изменить внешний вид элемента — например, сделать иконки разного размера.

Но это ещё не всё. Если мы сверстали карточку в ленте фида, она получилась классной, но тестирование указало нам на проблемы с доступностью. У нас не оказалось тега <article> и тега anchor element <a> для ссылки. Но при добавлении этих тегов вёрстка может поплыть.

Если вы используете сабгриды, всё нормально — будет унаследована сетка родителя, и элемент останется красивым. Это позволяет верстать блок без использования position легко и удобно.

CSS сабгриды появились в 2023 году, но пока их рано использовать, так как в случае, если бразуер пользователя их не поддерживает, у вас может сломаться вся вёрстка. Но пройдёт несколько лет и их можно будет использовать.

Масштабирование

Если у нас страница обладает свойством резиновости: на больших экранах элементы увеличиваются, на маленьких — уменьшаются.

Достигается это за счёт того, что страница свёрстана в em — это величина, которая меняет размер шрифта. А меняя его, мы меняем размер элементов. Раньше это писалось с помощью медиа-выражений, который зависит от min-width, то сейчас есть возможность упростить визуальный синтаксис, добавив интервальный. Он позволяет дописать больше или равно/ меньше или равно — то, что человеку понятнее. Есть post css плагин, который позволяет завезти это поведение для старых браузеров, чтобы всё работало хорошо.

А можно ещё сильнее упростить код, за счёт использования css Nesting из baseline 2023. Поэтому в браузерах новее 2023 года это работает из коробки, а в более старых можно с помощью post css плагина затрансперировать поведение, чтобы всё корректно работало. Тем самым, мы сэкономим немного строк кода.

Но можно пойти ещё дальше в будущее к @function, и в 139 Chrome уже пообещали запустить эту функциональность, но пока доступна только в Chrome Canary браузере (для опытных разработчиков). Позволяет заменить mix in в CSS, SASS для препроцессинга.

Но можно пойти в @property. Поддерживается почти во всех браузерах и позволяет задать кастомное свойство, задать значение по умолчанию и узнать, наследуется ли оно. Здесь мы задаём стандартное значение размера шрифта в em, потому что оно зависит от контекста. По спецификации initial value должно быть постоянным значением, которое не изменяется нигде.

Отказ от SASS — не всё так просто

Если у нас есть полоска сервисов, которые в зависимости от размеров экрана меняют свой размер, то за счёт селектора nth-child мы можем указать: возьми все элементы, начиная с n, кроме all, и примени к нему display: none. А внутри медиа-выражение в зависимости от размера экрана срабатывает по-разному. У медиа-выражений есть явная проблема: если у нас меняется продуктовое поведение, например, размер блока или расположение компонента, то все стили устаревают и медиа-выражения приходится заново переписывать.

Но у нас появились container queries, которые позволяют мэтчиться не на размер страницы, а на размер конкретного элемента — ширину или высоту. Работает с 2023 года, но в продакшен тащить рано — в старых браузерах вёрстка поедет.

Код в примере очень репетативен — мы повторяем одно и тоже много раз.

Можно ли написать вот так?

Но в таком коде есть много проблем, он не работает и никогда не будет работать.

В container queries у нас есть константы, можно использовать calc, чтобы сложить em и пиксели. Но мы не можем там использовать CSS-переменные, браузер их просто проигнорирует. А в nth-child всё ещё хуже: можно использовать только целочисленные значения.

Postcss-Preset-Env

Плагин для postcss, который базируется на возможностях веб-платформы и спецификации, позволяет контролировать, какие спецификации вы затаскиваете в браузер. Можно контролировать набор возможностей по списку браузеров и управлять явным списком фичей, включать и отключать нестинг.

Попап сервисов (dialog)

Позволяет сделать доступное модальное окно без JS. Есть два режима показа: обычный и модальный. В модальном режиме есть ловушка фокуса, которая позволяет осуществлять навигацию через табы. Также при использовании скринридера вы не уходите за пределы данного элемента. Раньше это достигалось с помощью JS, а теперь работает из коробки.

В будущем это должно будет работать так:

Но спецификация до сих пор не стабилизирована. Всё, кроме закрытия по парандже работает без JS. Есть полифил (polyfill), но для его работы нужно писать дополнительные селекторы и он не работает без JavaScript, нет понятия Top Layer.

Меню в фиде

В любой элемент страницы, будь то div, span или dialog, нужно добавить интерактивности, чтобы он открывался по клику. В сочетании с micro position меню позиционируется рядом с кодом без единой строчки JS и работает с 2025 года, то есть через пять лет можно будет затащить решение в продакшене.

Прогрессивные улучшения

Пользователи старых браузеров эти улучшения не получают, но их опыт не ухудшается, а это важно.

Сюда входят дискретные анимации для бинарных свойств с помощью allow-discrete. Так значение свойств изменится только к концу анимации.

В сочетании с элементом @starting-style легко добиться красивых анимаций — например, показ и скрытие попапа.

Но оказалось, что прогрессивные улучшения могут навредить пользователям. В 120 и 121 Chrome есть баг, который крашит браузер. Совет — экспериментировать, проверять и замерять.

Scrollbars

Из коробки они могут вылезать за пределы или оказаться неправильного цвета. Но с помощью color-scheme можно задать конкретный цвет блока. Станет лучше, но Scrollbar всё равно может вылезать за пределы элемента.

Появился Scrollbar Styling первого уровня, который позволяет делать красивые скроллбары. Есть набор констант от none до thin, и можно задавать цвет как самого трекера, так и подложки.

Но Scrollbar может всё равно вылезать за пределы страницы, а ещё сложно управлять цветом и расположением элемента.

Чтобы это исправить, можно использовать другое свойство без стабильной спецификации, поддерживаемое во всех браузерах — это webkit-scrollbar.

Правда с его помощью не получится добиться красивого скругления. Но сочетать webkit-scrollbar и scrollbar-styling не выйдет. Либо одно, либо другое.

Можно использовать scrollbar-gutter, чтоб зарезервировать пространство с двух сторон скролла. Но если есть элемент с динамичной высотой, когда элементов может быть то меньше, то больше, то можно избежать прыжка контента.

Рекомендация — всегда добавлять на html-тег это свойство, чтоб проблем не было и интерфейс не оказался сдвинут.

Анимации

Также сейчас можно сдвигать элемент на чистом CSS без использования JS — с помощью animation timeline scroll или animation timeline view.

Вы можете управлять положением скролла и тем, какую часть анимация занимает, а также связываать две анимации.

Но нужно всегда задаваться вопросом: что будет, если свойство не поддерживается в старых браузерах.

Например, в этом случае два элемента будут наплывать друг на друга или произойдёт мерцание.

View Transition API

API крайне мощный, но пока не очень поддерживается.

Итоги

• Переменные уже заменены и их можно использовать $name->var(-name).
• Миксины через 5 лет можно будет заменить mixin->@function.
• Нативный нестинг — хорош!
• Даже функция if() уже доступна в Chrome136.
• Не скоро ещё можно будет отказаться от языков препроцессинга, например, от SASS.
• Область использования var() и env() ограничена.
• CSS не умеет в циклы.
• @function пока слишком рано использовать.
• Но мы можем перейти на CSS + Post CSS. И в Яндекс Поиске пошли по этому пути. При этом во всей кодовой базе mix in использовались всего несколько раз. Поэтому оказалось что функции препроцессора особо не используется. От нестига пришлось мигрировать — но это было не сложно.
• Popover и полифилл есть в baseline 2025, но не все wpt проходят.
• Полифилл имеет ограниченную поддержку.
• Полифилл не работает в браузерах с частичной поддержкой popover.
• Anchor-positioning есть в Inerop 2025 и у него есть полифилл, но спецификация ещё меняется.
• Полифилл не поддерживает множество кейсов — практически никакие, кроме базовых.
• Даже прогрессивные улучшения могут навредить.

Давно пора исползовать:

• Dialog — упрощает написание кода и работает даже в старых браузерах с полифоллом.
• CSS Nesting и CSS — Variables упрощают написание стилей и хорошо работает в связке с PostCSS.
• Grid Layout — упрощает вёрстку сложных сайтов и работает в браузерах 8-летней давности.

Через пять лет вёрстка сильно изменится за счёт новых фичей, которые появляются уже сейчас! А какую из фичей вы желаете больше всего затащить в продакшен?