Новинки Chrome 150: новые стандарты CSS, улучшения PWA и WebGPU Immediates
30 июня 2026 года вышла стабильная версия браузера Chrome 150. Это обновление для настольных систем (Windows, macOS, Linux, ChromeOS) и Android предлагает внушительный набор точечных изменений. Их цель — перенести решения многих распространенных задач, ранее требовавших сложных JavaScript-скриптов, на уровень нативных стандартов веб-платформы.
Рассмотрим ключевые нововведения в области стилизации, взаимодействия с DOM, графики, безопасности приложений и прогрессивных веб-приложений (PWA).
CSS и дизайн: от адаптивных шрифтов до градиентных рамок
Инструменты стилизации в Chrome 150 расширились, закрывая давние боли верстальщиков и приближая веб-интерфейсы к нативным приложениям.
1. Системные цвета для установленных PWA
Новые системные цвета AccentColor и AccentColorText позволяют веб-приложениям запрашивать акцентный цвет операционной системы пользователя. Это особенно полезно для установленных PWA: теперь они могут автоматически адаптировать элементы управления под тему оформления Windows, macOS или Android, создавая ощущение бесшовной интеграции.
2. Автоматическая подгонка шрифта с text-fit
Свойство text-fit автоматически масштабирует размер шрифта (font-size) текстового узла так, чтобы он идеально вписывался в ширину родительского контейнера. Раньше для реализации «резиновых» заголовков или динамических счетчиков разработчикам приходилось подключать JS-библиотеки, измеряющие ширину строки. Свойство text-fit решает эту задачу нативно, снижая нагрузку на процессор и предотвращая сдвиги макета.
3. Градиентные рамки через background-clip: border-area
Создание рамок с градиентной заливкой традиционно требовало использования хаков вроде свойства border-image, псевдоэлементов или наложения CSS-масок. Новое значение border-area для свойства background-clip обрезает фоновое изображение ровно по контуру границы элемента (border stroke), учитывая его радиус закругления (border-radius) и толщину. Это позволяет красить рамки в сложные градиенты с помощью одного свойства background. Данное нововведение обеспечивает паритет с движком WebKit.
4. Запросы ресурсов из CSS с встроенными политиками безопасности
Теперь функция url() в CSS поддерживает модификаторы запросов: cross-origin(), integrity() и referrer-policy(). Это дает возможность контролировать параметры загрузки внешних ресурсов (например, шрифтов или фоновых картинок) прямо в файле стилей:
@font-face {
font-family: 'CustomFont';
src: url('https://cdn.example.com/font.woff2') integrity('sha384-...') cross-origin('anonymous');
}
Это упрощает внедрение политик безопасности (SRI) без дублирования заголовков в HTML-документе.
5. Локальные темы с графикой в light-dark()
Функция light-dark(), выбиравшая ранее только цвета для светлой и темной тем, теперь поддерживает любые графические ресурсы (<image>). Разработчики могут задавать разные фоновые изображения, иконки списков, курсоры или генерируемое содержимое для разных тем без изменения разметки:
.hero {
background-image: light-dark(url('light-hero.png'), url('dark-hero.png'));
}
6. Другие CSS-улучшения
- Скругление углов в
polygon(): функция построения фигурpolygon()получила параметр для скругления углов, избавляя от необходимости вычислять кривые Безье. - Анимация свойства
zoom: нестандартное свойствоzoomтеперь можно плавно анимировать (как<number>). - Балансировка строк в Flexbox: значение
balanceдля свойстваflex-wrapраспределяет дочерние элементы по строкам флекс-контейнера максимально равномерно. - Групповые контейнерные запросы: поддержка перечисления условий через запятую в
@containerпозволяет задавать альтернативные ветки стилей (fallbacks) в одном правиле.
Взаимодействие с DOM и доступность
1. Декларативная навигация с focusgroup
Управление фокусом клавиатуры в сложных составных виджетах (меню, табы, панели инструментов) всегда было сложной задачей. Разработчикам приходилось писать сценарии, реализующие паттерн roving tabindex (динамическое переключение индекса фокуса и перехват нажатий стрелок).
Атрибут focusgroup позволяет настроить навигацию стрелками клавиатуры, ограничить виджет одной позицией табуляции (Tab stop) и заставить систему запоминать последний сфокусированный элемент полностью декларативно:
<div focusgroup="horizontal wrap">
<button tabindex="0">Вкладка 1</button>
<button tabindex="-1">Вкладка 2</button>
</div>
Это повышает доступность интерфейсов для пользователей клавиатур, снижая при этом объем JS-кода в приложении.
2. Промисы для плавного скролла
Методы программной прокрутки страниц (например, window.scrollTo() с опцией behavior: 'smooth') теперь возвращают объект Promise. Этот промис успешно разрешается, когда прокрутка завершена, или отклоняется, если движение было прервано пользователем или другим скриптом. Это позволяет координировать анимации интерфейса, завязанные на прокрутку.
3. Изменения в popover=hint
Улучшено поведение всплывающих окон с типом hint. Они получили более предсказуемые правила наложения поверх окон типа auto и более строгие проверки жизненного цикла для события beforetoggle.
Графика: WebGPU Immediates для высокопроизводительных вычислений
Для разработчиков веб-игр, систем визуализации данных и 3D-графики Chrome 150 предлагает механизм WebGPU Immediates.
При работе с 3D-сценами часто возникает необходимость передавать шейдерам небольшие, но часто обновляемые порции данных (например, матрицы трансформации отдельных объектов). Классический путь через создание отдельных буферов GPU и bind-групп создает ощутимые задержки (overhead) на шине данных.
Механизм Immediates добавляет специальное адресное пространство WGSL и метод setImmediateData(), позволяющий записывать данные напрямую в энкодеры рендер-пассов, вычислительных пассов и пакетов (render bundles). Это устраняет лишние этапы аллокации памяти на видеокарте и увеличивает частоту кадров (FPS) в графически насыщенных сценах.
Безопасность и архитектура: изоляция data: Workers
Важное изменение безопасности коснулось веб-воркеров, созданных из URL-адресов с типом данных data: (например, new Worker('data:application/javascript,...')).
Раньше такие воркеры автоматически наследовали права (origin) создавшего их контекста. Это создавало риски безопасности: внедренный вредоносный скрипт мог запустить скрытый фоновый процесс, который получал доступ к локальному хранилищу или каналам обмена сообщениями (BroadcastChannel) основного домена.
В Chrome 150 воркеры из data:-адресов получают уникальные непрозрачные источники (opaque origins). Они остаются в той же секции хранилища для изоляции данных, но больше не могут напрямую обращаться к API родительского домена, требующим проверки Same-Origin.
Жизненный цикл PWA: бесшовный переезд на новый домен
При ребрендинге или реструктуризации веб-сайтов перенос установленного прогрессивного веб-приложения на новый домен всегда сопровождался потерей пользовательской базы: пользователям приходилось вручную переустанавливать приложение, при этом терялись выданные права.
Chrome 150 представляет механизм миграции источника PWA (PWA origin migration). Теперь, если приложение переезжает на новый адрес в пределах того же сайта (same-site), браузер может автоматически перенести установленную копию приложения, сохранив все выданные права и настройки.
- Исключение для организаций: если PWA было принудительно установлено через групповые политики (
WebAppInstallForceList), автоматическая миграция блокируется, а пользователю отображается информационный баннер о необходимости ручного обновления.
Рекомендации для разработчиков
Chrome 150 демонстрирует стабильную работу всех описанных функций, однако при внедрении новинок (особенно свойств text-fit или contrast-color()) важно помнить о кросс-браузерной совместимости. Всегда предусматривайте надежные резервные CSS-стили (fallbacks) для браузеров других семейств (Safari, Firefox), чтобы ваш интерфейс оставался читаемым и функциональным для всех пользователей.