Обзор на браузерные API, которые стали Widely available в январе 2026. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

Как мы понимаем, что уже можно использовать в проде?

У каждой компании, да что уж там компании, у каждой команды в компании своя методика принятия решения о внедрении той или иной фичи в проекте.

Общий же сценарий выглядит так:

- Посмотрели в пользовательские метрики. Поняли какими браузерами и их версиями в основном пользуются пользователи проекта;

- Заглянули в caniuse и поняли, какие фичи уже поддерживаются большинством браузеров;

- Приняли решение о внедрении той или иной фичи в проект.

Какие-то команды позволяют себе указывать правило "последние три версии браузеров". У других специфика проекта, что проект работает исключительно на iPad с Safari. Сами понимаете, все мы разные и требования разные, и у каждого свой подход.

Baseline - позволяет немного упростить процесс принятия решения о внедрении той или иной фичи в проект. Если фича Widely available значит фича уже как минимум есть во всех основных браузерах как минимум стабильно используются последние 2.5 года.

Какие фичи в вебе стали Widely available в январе 2026

  • animation-composition

  • Array by copy

  • Two-value display property

1. Animation-composition

CSS-свойство animation-composition определяет, как комбинировать анимации, влияющие на одно и то же свойство.

Допустим, к элементу применено следующее:

.element {
  transform-origin: 50% 50%;
  transform: translateX(50px) rotate(45deg);
}

И у вас также есть этот набор ключевых кадров:

@keyframes animation {
  to {
    transform: translateX(100px);
  }
}

transform из ключевого кадра to заменит transform элемента. Это поведение по умолчанию.

С помощью animation-composition вы теперь можете управлять тем, что должно происходить вместо стандартного replace . Допустимые значения:

  • replace : значение эффекта заменяет базовое значение. (по умолчанию)

  • add : значение эффекта добавляется к базовому значению.

  • accumulate : значение эффекта объединяется с базовым значением.

Разница между add и accumulate: например, возьмём два значения blur(2) и blur(3). При add они дадут blur(2) blur(3), а при accumulate — blur(5).

Для визуального сравнения посмотрите пример на codepen

В целом, если у вас в проекте много трансформаций вида transform: translateY(20px) scale(1);, то теперь будет меньше боли, чтобы переопределить одно из свойств:

.card {
  transform: translateY(20px) scale(1);
}

.card:hover {
  animation: bounce 300ms;
  animation-composition: add; /* scale теперь не заменяется */
}

@keyframes bounce {
  to {
    transform: scale(1.05);
  }
}

2. Array by copy

Методы toReversed(), toSorted(), toSpliced(), и with() возвращают изменённые копии массивов. По сути, это немутирующие аналоги привычных методов:

  • toReversed() → reverse()

  • toSorted() → sort()

  • toSpliced() → splice()

  • with() → присваивание по индексу (arr[index] = value)

const arr = [3, 1, 2];

const sorted = arr.toSorted();
console.log(sorted); // [1, 2, 3]
console.log(arr);    // [3, 1, 2] — без изменений

3. Two-value display property

Свойство display теперь поддерживает синтаксис с двумя значениями или множественными значениями. display может принимать значения, например inline flex или block flow, для явного задания внутреннего и внешнего режима компоновки.

Синтаксис

  • display: <display-outside> <display-inside>

  • <display-outside>: как элемент ведёт себя во внешнем потоке

  • <display-inside>: как раскладываются дочерние элементы внутри

Что поменялось в новом синтаксисе

  • block → block flow

  • inline → inline flow

  • flex → block flex

  • inline-flex → inline flex

  • grid → block grid

  • inline-grid → inline grid

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

Следующий выпуск будет через месяц. До встречи!