Chrome 147: новые CSS‑свойства, точные вычисления и расширенные API

Статья описывает ключевые нововведения Chrome 147: свойства border‑shape и contrast‑color, улучшения точности числовых вычислений, расширения View Transition API, предзагрузку модулей и экспериментальные функции Origin Trials. Также рассматриваются новые возможности веб‑компонентов и их совместимость.

GGPTсоздал статью 13 апреля 2026
ВВеб-стандартызагрузил видео 13 апреля 2026

Chrome 147 вводит CSS‑свойства border‑shape и contrast‑color, а также расширяет View Transition API, добавив Scoped View Transitions для анимации отдельных поддеревьев DOM. Внутренний модуль M теперь умеет точно суммировать числа с повышенной точностью, а предзагрузка JavaScript‑ и CSS‑модулей через <link rel="modulepreload"> ускоряет загрузку страниц. Экспериментальные Origin Trials предоставляют AutoFill, WebNN, кросс‑доменные iframe‑пререндеринг и Local Network Access, а новые подходы к веб‑компонентам (MDN, Adobe Spectrum, React‑fallback) повышают их гибкость, совместимость и доступность.

#Новые возможности Chrome 147

Выпуск Chrome 147 расширил поддержку веб‑стандартов и добавил несколько API, ориентированных на разработчиков. Среди самых заметных нововведений — CSS‑свойство border‑shape, позволяющее задавать границы произвольных форм без необходимости использовать SVG или дополнительную разметку. Параллельно появился функционал contrast‑color, который автоматически подбирает цвет с достаточным контрастом к заданному фону, упрощая создание доступных текстовых и интерфейсных элементов. View Transition API получил дальнейшее развитие, предоставляя декларативный способ анимировать переходы между состояниями страниц, а Scoped View Transitions позволяют ограничивать анимацию конкретным поддеревом DOM и управлять её жизненным циклом через JavaScript‑интерфейс.

#Улучшения точности вычислений и загрузки модулей

Chrome 147 также решает проблему накопления ошибок при работе с числами с плавающей запятой. Внутренний модуль M получил новый метод, который суммирует итерируемые объекты, предварительно переводя числа в представление повышенной точности, выполняя аккумулирование и затем возвращая результат в обычный формат double‑precision. Такой подход существенно снижает погрешности при суммировании больших массивов и повышает надёжность вычислений в научных, финансовых и иных приложениях, где важна числовая точность. Кроме того, браузер расширил возможности предзагрузки модулей: теперь JavaScript‑ и CSS‑модули можно получать через атрибут <link rel="modulepreload">, что позволяет обнаруживать и кэшировать ресурсы на более ранних этапах загрузки, ускоряя время отклика страниц.

#Экспериментальные функции через Origin Trials

В рамках Origin Trials Chrome 147 предлагает несколько экспериментальных возможностей. AutoFill представляет собой событие, которое срабатывает, когда пользователь заполняет форму, позволяя скриптам реагировать, добавляя дополнительные данные или UI‑элементы. WebNN открывает низкоуровневый интерфейс для выполнения нейронных сетей непосредственно в браузере без накладных расходов JavaScript, что обещает значительный прирост производительности для задач машинного обучения. Пререндеринг кросс‑доменных iframe‑ов позволяет заранее загружать и отрисовывать содержимое из других доменов, сокращая задержки при последующей навигации. Наконец, trial Local Network Access предоставляет привилегированный доступ к локальным сетевым ресурсам через WebSockets и WebTransport, что особенно актуально для корпоративных приложений, требующих взаимодействия с внутренними сервисами.

#Расширения CSS: отслеживание состояний и «память» элементов

Помимо новых свойств, Chrome 147 усилил возможности CSS реагировать на пользовательские действия. С помощью анимаций и пользовательских свойств (CSS‑переменных) разработчики могут хранить бинарные состояния, такие как «фокус» или «наведение», непосредственно в таблице стилей. Переменные могут переключаться в определённых ключевых кадрах, позволяя стилям «запоминать», был ли элемент уже взаимодействован, и изменять последующее оформление без участия JavaScript. Эта техника создаёт форму «памяти» в чистом CSS, делая возможным построение сложных интерактивных компонентов — от навигационных лабиринтов до динамических визуальных откликов — исключительно средствами стилей, используя логические операции над переменными.

#Архитектура веб‑компонентов: от MDN до Adobe Spectrum

Эволюция веб‑компонентов продолжает формировать современную фронтенд‑архитектуру. Недавний редизайн фронтенда MDN демонстрирует подход, при котором каждый UI‑элемент размещён в отдельной папке внутри каталога components, а система именования чётко разделяет глобальные стили, серверные CSS‑файлы и клиентские скрипты. Для рендеринга на сервере используется декларативный Shadow DOM, позволяющий задать размеры и стили компонентов заранее, после чего лёгкий скрипт гидратации обновляет их на клиенте, сохраняя производительность и инкапсуляцию. Загрузка компонентов происходит по конвенции: сканируется DOM в поисках элементов с префиксом mdn-, после чего соответствующий модуль подгружается из известного пути, упрощая добавление новых виджетов и уменьшая размер бандла. Такой модульный подход облегчает тестирование, версионирование и независимую разработку отдельных компонентов.

#Совместимость и доступность: тестирование в Shadow DOM и роль Adobe Spectrum

Несмотря на преимущества инкапсуляции, реальное использование веб‑компонентов выявляет проблемы совместимости, особенно внутри Shadow DOM. Команда Adobe Spectrum опубликовала публичный дашборд, собирающий результаты тестов CSS‑фич в контексте Shadow DOM, указывая, какие свойства работают некорректно, где наблюдаются нестабильные результаты и какие нарушения доступности обнаружены. Дашборд служит диагностическим инструментом, позволяющим разработчикам понять текущий уровень поддержки браузеров и планировать полифилы или альтернативные решения. Особое внимание уделяется доступности: некоторые визуально корректные компоненты внутри Shadow DOM не предоставляли необходимые ARIA‑атрибуты или поддержку клавиатурной навигации, что потребовало пересмотра дизайна. Таким образом, Spectrum‑дашборд соединяет реализацию новых возможностей с требованиями инклюзивного дизайна, способствуя более системному подходу к кросс‑браузерной совместимости.

#Переходные решения: React‑fallback и открытый код MDN Plus

Не все браузеры полностью поддерживают новейшие API веб‑компонентов, поэтому многие проекты сохраняют резервные пути. MDN Plus реализует свои UI‑виджеты, такие как выпадающие списки, с помощью нативных веб‑компонентов там, где это возможно, но сохраняет React‑реализации для старых браузеров, не поддерживающих Shadow DOM или кастомные элементы. Такая гибридная стратегия обеспечивает единообразный пользовательский опыт на широком спектре браузеров, позволяя постепенно переходить к стандартным компонентам. При этом исходный код MDN Plus открыт на GitHub, что приглашает сообщество вносить улучшения, исправлять баги и расширять функциональность через pull‑request‑ы. Открытость репозитория ускоряет распространение лучших практик веб‑компонентов и повышает прозрачность разработки.

#Вывод

Chrome 147 представляет собой важный шаг в развитии веб‑платформы, объединяя новые возможности CSS (border‑shape, contrast‑color), улучшения точности числовых вычислений и расширенные механизмы загрузки модулей. Экспериментальные функции Origin Trials (AutoFill, WebNN, пререндеринг iframe‑ов, Local Network Access) открывают путь к более интерактивным, вычислительно‑интенсивным и корпоративным веб‑приложениям. Параллельно продолжается развитие веб‑компонентов: архитектурные решения MDN, диагностический дашборд Adobe Spectrum и гибридные стратегии с React‑fallback демонстрируют как потенциал, так и текущие ограничения в совместимости и доступности. Совокупность этих нововведений указывает на тенденцию к более производительному, выразительному и инклюзивному вебу, при этом подчёркивая необходимость постепенного перехода и активного участия сообщества в тестировании и улучшении новых технологий.

Educationвеб-стандартывстwsdwstdaysфронтенд