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

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 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

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

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