Новые фичи веб-платформы в 2026 — что добавилось и зачем

Браузеры обновляются каждый месяц. Большинство изменений проходят мимо - но некоторые реально меняют как мы пишем код. В 2026 году веб-платформа сделала большой шаг: десятки API которые годами были экспериментальными наконец стали Baseline - то есть работают во всех основных браузерах без полифилов.

Вот полный разбор что появилось и что из этого стоит использовать прямо сейчас.

CSS становится мощнее JavaScript

Главный тренд 2026 года - CSS берёт на себя задачи которые раньше требовали JavaScript. Меньше JS, меньше бандл, быстрее загрузка.

:open псевдо-класс

Позволяет стилизовать элементы у которых есть открытое и закрытое состояние - <details>, <dialog>, <select>. Стало Baseline в мае 2026.

details:open summary {
  color: #3ec7a2;
  font-weight: 600;
}

/* Стилизуем открытый select */
select:open {
  border-color: #3ec7a2;
}

Container Queries - name-only

Теперь можно писать container queries без указания имени контейнера - убирает лишний setup и упрощает адаптивный дизайн компонентов.

/* Раньше нужно было указывать container-name */
.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

Container Style Queries

Позволяют менять стили компонента в зависимости от значений CSS custom properties родителя. Решают задачу которую раньше приходилось решать JavaScript.

/* Карточка рендерится по-разному в зависимости от контекста */
@container style(--variant: compact) {
  .card {
    padding: 8px;
    font-size: 14px;
  }
}

contrast-color()

Автоматически выбирает читаемый цвет текста (чёрный или белый) основываясь на цвете фона. Больше никаких ручных проверок контраста:

.badge {
  background: var(--brand-color);
  color: contrast-color(var(--brand-color));
}

image-rendering для pixel-perfect

Контролирует алгоритм масштабирования изображений. Полезно для QR-кодов, pixel art и низкоразрешённых изображений:

.qr-code {
  image-rendering: pixelated; /* чёткое масштабирование без размытия */
}

CSS shape() функция

Более читаемая альтернатива path() - поддерживает CSS единицы и математические функции напрямую:

.shape {
  clip-path: shape(from 0 0, line to 100% 0, curve to 50% 100%);
}

Скруглённые полигоны в polygon()

Edge 150 добавил параметр round в функцию polygon() - можно делать скруглённые углы без ручного вычисления bezier кривых:

.rounded-triangle {
  clip-path: polygon(round 50px, 50% 0%, 0% 100%, 100% 100%);
}

CSS Anchor Positioning

Позиционирование элементов относительно других элементов - идеально для тултипов, меню и поповеров. Стало Baseline в начале 2026:

.tooltip {
  position-anchor: --button;
  bottom: anchor(top);
  left: anchor(center);
}

Новые CSS единицы: rcap и rex

rcap - единица на основе container queries, rex - равна x-height корневого шрифта. Полезны для типографики которая адаптируется к контейнеру:

.caption {
  font-size: 1rex; /* масштабируется с высотой строчных букв */
  margin-block: 1rcap;
}

display - multi-keyword синтаксис

Теперь можно явно указывать оба типа display - внешний и внутренний. Стало Baseline Widely Available:

/* Вместо inline-flex */
.element {
  display: inline flex;
}

/* Вместо block grid */
.container {
  display: block grid;
}

Новые JavaScript API

Navigation API

Современная замена старому History API. Больше не нужно pushState, popstate и ручные обработчики кликов - всё в одном событии navigate. Стало Baseline в начале 2026:

navigation.addEventListener('navigate', (event) => {
  if (!shouldHandleNavigation(event.destination.url)) return;

  event.intercept({
    async handler() {
      const content = await fetchPage(event.destination.url);
      updateUI(content);
    }
  });
});

Для большинства проектов это убирает необходимость тянуть роутер только чтобы избежать полной перезагрузки страницы.

Temporal API - нормальные даты наконец

Chrome 144 добавил поддержку Temporal API - современную замену объекту Date. Работа с датами наконец стала нормальной:

// Раньше: new Date() и миллион нюансов
const date = new Date(2026, 0, 1); // январь это 0, не 1 😤

// Temporal: понятно и предсказуемо
const date = Temporal.PlainDate.from('2026-01-01');
const tomorrow = date.add({ days: 1 });
const diff = date.until(Temporal.Now.plainDateISO());

console.log(diff.days); // количество дней - без магии

Пока только Chrome - остальные браузеры в процессе.

Math.sumPrecise()

Точное суммирование массива чисел с плавающей точкой. Решает классическую проблему потери точности:

// Старый способ - неточно
[0.1, 0.2, 0.3].reduce((a, b) => a + b); // 0.6000000000000001

// Math.sumPrecise - точно
Math.sumPrecise([0.1, 0.2, 0.3]); // 0.6

Document Picture-in-Picture API

В отличие от традиционного PiP который работает только для видео, этот API позволяет открывать всплывающее окно поверх всего с любым HTML контентом:

const pip = await documentPictureInPicture.requestWindow({
  width: 320,
  height: 240,
});

pip.document.body.append(myPlayerElement);

Lazy loading для медиа

Медиафайлы теперь загружаются только когда они близко к viewport - аналогично lazy loading для изображений:

<video loading="lazy" src="demo.mp4"></video>
<audio loading="lazy" src="podcast.mp3"></audio>

Trusted Types API - защита от XSS

Безопасность против DOM-based XSS атак - требует использовать «доверенные типы» вместо обычных строк при работе с опасными методами вроде innerHTML. Стало Baseline в феврале 2026:

// Создаём политику
const policy = trustedTypes.createPolicy('myPolicy', {
  createHTML: (input) => sanitize(input),
});

// Теперь только через политику - сырые строки не пройдут
element.innerHTML = policy.createHTML(userInput);

Zstandard (zstd) сжатие

Быстрый алгоритм сжатия с высокой степенью сжатия - быстрее и эффективнее чем Gzip. Теперь поддерживается во всех современных браузерах и доступен в CompressionStream:

const stream = new CompressionStream('zstd');

Web Serial API в Firefox

Firefox 151 добавил поддержку Web Serial API на десктопе - теперь можно работать с последовательными портами (Arduino, микроконтроллеры) из браузера кросс-браузерно.

:active-view-transition псевдо-класс

Позволяет стилизовать корневой элемент документа пока идёт View Transition. Стало Baseline в январе 2026:

:active-view-transition {
  /* стили пока идёт анимация перехода */
  pointer-events: none;
}

Что ещё в процессе

Несколько важных фич пока не стали Baseline - но уже работают в некоторых браузерах:

• Temporal API - пока только Chrome, ждём остальных
• CSS if() - условные выражения прямо в CSS
• Scroll-driven animations - анимации привязанные к скроллу

Главный вывод

Для многих разработчиков разрыв между «Chrome уже выпустил» и «можно использовать в продакшне» измерялся полифилами, фолбэками и багрепортом от того одного пользователя на старом Safari. Baseline решает эту проблему - один статус который говорит «можно деплоить».

В 2026 году этот статус получили десятки полезных фич. Прежде чем ставить библиотеку - проверь не умеет ли браузер это нативно. Ответ «да» встречается всё чаще. 🌐