Новинки веб-платформы: что стало доступно во всех браузерах в ноябре

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

color() — выбор цвета из расширенных цветовых пространств

color() позволяет использовать такие пространства, как display-p3, обеспечивая более насыщенные и яркие цвета, чем стандартный srgb.

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

/* Пример: фон в широком цветовом пространстве Display P3 */
.element {
  background-color: color(display-p3 0.9 0.1 0.05);
}

.title {
  color: color(display-p3 0.1 0.6 0.2 / 1);
}

color-mix() — смешивание цветов

color-mix() смешивает два цвета в указанном цветовом пространстве и заданных пропорциях. Часто используется для создания тёмных и светлых оттенков.

В реальных проектах это позволяет легко генерировать тематические палитры, адаптивные для светлых/тёмных тем, и создавать оттенки без ручного расчёта, что ускоряет разработку дизайн-систем.

/* 25% белого + 75% синего */
.btn {
  background: color-mix(in srgb, white 25%, #0a84ff 75%);
}

.badge {
  background: color-mix(in display-p3,
    color(display-p3 1 1 1) 30%,
    color(display-p3 0 0.5 0.2) 70%
  );
}

CompressionStream и DecompressionStream

Нативные API для gzip и deflate прямо в браузере — без сторонних библиотек.

Эта возможность полезна для приложений, работающих с большими объёмами данных: офлайн-редакторов, ZIP-просмотрщиков, обмена файлами, оптимизации трафика в P2P-приложениях или WebRTC-соединениях.

/* Сжатие Uint8Array в gzip */
async function gzipCompress(uint8array) {
  const cs = new CompressionStream('gzip');
  const writer = cs.writable.getWriter();
  writer.write(uint8array);
  writer.close();
  const compressed = await new Response(cs.readable).arrayBuffer();
  return new Uint8Array(compressed);
}

/* Декомпрессия */
async function gzipDecompress(buffer) {
  const ds = new DecompressionStream('gzip');
  const stream = new Response(
    new Blob([buffer]).stream().pipeThrough(ds)
  );
  return new Uint8Array(await stream.arrayBuffer());
}

Lab и LCH (CIELAB и CIELCH)

Цветовые пространства Lab и LCH описывают цвет с учётом восприятия: яркость и две координаты цветности. Теперь доступны через lab() и lch().

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

/* Lab: lightness, a, b */
.box {
  background: lab(70% -10 30);
}

/* LCH: lightness, chroma, hue */
.title {
  color: lch(60% 80 40);
}

:nth-child() of <selector>

Расширенный синтаксис :nth-child() и :nth-last-child() позволяет выбирать элементы по порядку относительно совпадающих селекторов.

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

/* Каждый второй параграф внутри .content */
.content p:nth-child(2n of p) {
  color: red;
}

/* Первый элемент списка с классом .item */
li:nth-child(1 of .item) {
  font-weight: bold;
}

Oklab и Oklch

Современные цветовые пространства, лучше соответствующие человеческому восприятию. Доступны через oklab(), oklch() и color().

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

.card {
  background: oklab(70% -0.1 0.05);
}

.alert {
  color: oklch(60% 0.15 40);
}

WebRTC SCTP информация

Объект sctp на RTCPeerConnection предоставляет сведения о состоянии SCTP-транспорта, используемого RTCDataChannel.

На практике это делает диагностику P2P-соединений проще: можно отслеживать параметры транспорта, проверять готовность канала и оптимизировать передачу данных в реальном времени (например, в играх, чатах или приложениях для обмена файлами).

const pc = new RTCPeerConnection();
pc.onnegotiationneeded = () => {
  console.log(pc.sctp); // информация о SCTP-транспорте
};

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.