Релиз Chrome 155: возвращение JPEG XL, CSS-функция symbols() и текстовые модули в JS

Октябрьский стабильный релиз Chrome 155 стал одним из самых насыщенных событий для веб-платформы за последнее время. Команда Chromium не просто добавила очередную порцию точечных правок, а закрыла сразу несколько давних болей фронтенд-инженеров, верстальщиков и архитекторов безопасности.

Браузер вернул поддержку передового графического формата JPEG XL, избавил таблицы стилей CSS от многолетних обходных путей при помощи функции symbols() и свойства margin-trim, стандартизировал нативный импорт текстовых файлов в JavaScript и обновил криптографический стек WebCrypto алгоритмами, защищенными от квантовых компьютеров.

Долгожданный камбэк JPEG XL и безопасный декодер на Rust

Возвращение JPEG XL (image/jxl) — главная новость для веб-медиа. В 2022 году инженеры Google вызвали бурю негодования в сообществе, удалив экспериментальную поддержку формата из Blink из-за «недостатка интереса экосистемы». Однако индустрия рассудила иначе: поддержка формата появилась в Safari и ряде графических редакторов, а превосходство JPEG XL в сжатии фотографий высокого разрешения стало неоспоримым.

В Chrome 155 формат возвращается на принципиально новом фундаменте. Декодер реализован на базе библиотеки jxl-rs на языке Rust в рамках стратегической программы Chromium по переводу критических компонентов обработки медиа на memory-safe языки.

Главная суперсила JPEG XL для пользователей — прогрессивное декодирование. Браузеру не нужно ждать скачивания всего файла: уже при получении первых 10–15% байтов на экране мгновенно отрисовывается четкий низкочастотный эскиз фотографии, который плавно обрастает деталями. Это улучшает ключевые пользовательские метрики восприятия скорости (Perceived Performance и Largest Contentful Paint). Кроме того, формат поддерживает широкий цветовой охват (Wide Color Gamut), нативный HDR и анимации, превосходя AVIF и WebP на сложных текстурах.

Чистый CSS: функции symbols() и margin-trim

Два нововведения в движке стилизации ликвидируют хрупкие хаки в верстке:

1. Инлайн-стили списков через symbols(): раньше, чтобы задать списку нестандартные маркеры (например, эмодзи или греческие буквы), требовалось выносить отдельное глобальное правило @counter-style в корень CSS. Функция symbols() позволяет объявить циклический или нумерованный набор символов прямо по месту в свойстве list-style-type.
2. Свойство margin-trim: вечная проблема контейнеров карточек — лишние отступы у первого заголовка и последнего абзаца, ломающие симметрию внутреннего паддинга. Значение margin-trim: block автоматически обрезает верхний margin у первого элемента и нижний у последнего, избавляя от селекторов :first-child и :last-child.

Примеры стилей на чистом CSS:

/* 1. Пользовательские маркеры списка без @counter-style */
ul.feature-list {
  list-style-type: symbols(cyclic "👉" "⚡" "✅");
  padding-left: 1.5rem;
}

/* 2. Контейнер карточки с автоматической обрезкой краевых отступов */
.article-card {
  display: block;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 8px;
  /* Убирает верхний отступ у h3 и нижний у последнего p */
  margin-trim: block;
}

.article-card h3 {
  margin-top: 1.5rem; /* Не добавит лишний зазор к верхнему краю карточки */
  margin-bottom: 0.5rem;
}

.article-card p {
  margin-bottom: 1rem; /* Не раздует нижнее поле карточки */
}

Кроме того, свойство text-decoration-skip-spaces очищает типографику, не прочерчивая подчеркивание ссылок под пробелами.

JavaScript Text Modules: нативный импорт без бандлеров

В JavaScript движка V8 появилась нативная поддержка спецификации TC39 Text Modules (Stage 3). Раньше, чтобы импортировать исходный код шейдера WebGL, разметку SVG или текст SQL-миграции, разработчикам приходилось настраивать плагины бандлеров (raw-loader в Webpack или ?raw в Vite) либо писать асинхронные вызовы fetch().

Синтаксис атрибутов импорта позволяет подгружать текстовые файлы прямо в граф модулей:

// Импорт текста шейдера и схемы БД без сборщиков
import shaderSource from './shaders/vertex.glsl' with { type: 'text' };
import schemaSql from './db/schema.sql' with { type: 'text' };

console.log("Тип загруженного ресурса:", typeof shaderSource); // "string"

export function initRenderer(gl) {
  const shader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(shader, shaderSource);
  gl.compileShader(shader);
  return shader;
}

Текст подгружается как иммутабельная строка на этапе резолва графа модулей, кэшируется движком и сразу готов к синхронному использованию.

Постквантовая криптография в WebCrypto

В криптографическом API браузера появились стандартизированные NIST алгоритмы защиты от квантовых угроз: алгоритм инкапсуляции ключей ML-KEM (768 и 1024) и цифровая подпись ML-DSA, а также шифр ChaCha20-Poly1305.

Релиз Chrome 155 делает веб-платформу более зрелой, возвращая передовую графику и закладывая стандарты безопасности на годы вперед.