Опубликовано: 2 марта 2026 г.
Добро пожаловать в январский выпуск дайджеста Baseline за 2026 год. Каждый месяц мы рассказываем о новых достижениях в разработке веб-платформы Baseline , помогая вам понять, какие инструменты готовы к использованию в ваших проектах уже сегодня.
Январь стал захватывающим началом года: несколько важных API и CSS-модулей перешли в категорию «Новые», а значительное улучшение макета стало широко доступным.
Базовый уровень. Новые доступные функции.
Следующие веб-функции стали доступны в базовой версии в январе 2026 года.
Активный переход между представлениями
Псевдокласс CSS ` :active-view-transition теперь доступен в базовой версии. Этот селектор позволяет разработчикам целенаправленно стилизовать корневой элемент документа во время перехода между представлениями. Это особенно полезно для применения глобальных стилей или настроек, которые должны существовать только в период перехода, например, изменение цвета фона переходного слоя или регулировка z-индекса определенных слоев для обеспечения плавного визуального потока.
Модули JavaScript в сервисных работниках
Теперь сервис-воркеры поддерживают модули JavaScript во всех основных браузерах. Установив параметр type: 'module' при вызове navigator.serviceWorker.register() , вы можете использовать стандартные операторы import и export в скрипте вашего сервис-воркера. Это приводит сервис-воркеры в соответствие с современными методами разработки на JavaScript, обеспечивая лучшую организацию кода, упрощенное управление зависимостями и возможность совместного использования кода между основным потоком и фоновым воркером.
API навигации
API навигации предоставляет современную, специально разработанную альтернативу устаревшему API истории, предназначенную для нужд одностраничных приложений (SPA). Он предлагает централизованный способ инициирования, перехвата и управления всеми типами навигационных действий, включая те, которые запускаются кнопками «Назад» и «Вперед» в браузере. Благодаря таким событиям, как Maps , разработчики могут реализовать более удобную маршрутизацию на стороне клиента с меньшим количеством шаблонного кода. Для более подробного ознакомления с тем, как это меняет подход к разработке веб-приложений, ознакомьтесь с нашей специальной статьей в блоге: Современная маршрутизация на стороне клиента: API навигации .
rcap CSS unit
Единица rcap — это единица длины относительно корневого шрифта, равная «высоте заглавных букв» (номинальной высоте заглавных букв) шрифта корневого элемента. Это позволяет создавать точные типографические макеты, масштабируемые относительно основного шрифта, используемого на сайте, а не только относительно размера шрифта.
rch CSS unit
Подобно единице ch , но относительно корневого элемента, единица rch представляет ширину — или, точнее, величину смещения — глифа «0» (ноль) в шрифте корневого элемента. Она идеально подходит для создания макетов, зависящих от ширины символов, например, контейнера, который должен точно вмещать определенное количество символов в корневом шрифте.
единица CSS rex
Единица rex — это версия единицы измерения ex , устанавливаемая относительно корня элемента и равная высоте по оси x шрифта корневого элемента. Эта единица особенно полезна для вертикального выравнивания и изменения размера элементов относительно высоты строчных букв в основном тексте документа.
ric CSS unit
Единица ric является аналогом единицы ic относительно корня. Она равна «идеографической» величине смещения (обычно ширине или высоте иероглифов китайского, японского и корейского языков) шрифта корневого элемента. Это важный инструмент для разработчиков, создающих интернационализированные макеты, особенно те, которые используют китайскую, японскую или корейскую письменность.
Базовые широкодоступные функции
Следующие веб-функции стали доступны в базовой версии в широком доступе в январе 2026 года.
Двузначное свойство CSS display
Многословный синтаксис для свойства display теперь широко доступен в базовой версии. Это обновление позволяет явно определять как «внешний», так и «внутренний» типы отображения блока. Например, вместо предварительно заданного inline-flex можно использовать display: inline flex . Это уточняет, участвует ли элемент в блочном или строчном потоке (внешний тип) и как располагаются его дочерние элементы (внутренний тип, например, flex или grid ). Это изменение делает механизм компоновки CSS более логичным и согласованным для разработчиков.
Свойство CSS animation-composition
Свойство animation-composition определяет, как несколько анимаций должны взаимодействовать, когда они одновременно влияют на одно и то же свойство. Вы можете выбрать между replace , add или accumulate , что дает вам точный контроль над тем, как рассчитываются сложные многослойные анимации.
Массив по копии
В JavaScript теперь есть методы, позволяющие преобразовывать массивы без изменения исходных данных. Такие методы, как toReversed() , toSorted() и toSpliced() возвращают новую, измененную копию массива, что способствует более функциональному и безопасному стилю программирования.
Помогите нам улучшить
Как обычно, сообщите нам, если мы что-то упустили в отношении Baseline, и мы обязательно учтем это в будущей версии! Если у вас есть какие-либо вопросы или вы хотите оставить отзыв о Baseline, вы можете создать заявку в нашем трекере проблем .