Новое на веб-платформе в марте

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

Rachel Andrew

Стабильные версии браузера

В марте 2024 года Firefox 124 , Safari 17.4 и Chrome 123 стали стабильными. В этом посте рассматриваются новые функции, добавленные в веб-платформу.

Адаптируйте цветовые схемы с помощью функции light-dark()

Цветовая функция light-dark() появилась в Chrome 123 и упрощает адаптацию цветовых схем к предпочтениям пользователя. В следующем примере color-scheme установлена ​​на light dark в root . Пользовательские свойства используют функцию цвета light-dark() для установки цветов, которые будут переключаться в зависимости от предпочтений светлого или темного режима пользователя.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Дополнительные примеры и подробности см. в разделе Цвета, зависящие от color-scheme CSS, с помощью функции light-dark()

Улучшенный контроль ввода за счет field-sizing

Также в Chrome 123 свойство field-sizing позволяет автоматически увеличивать поля ввода текста.

Кернинг для пунктуации CJK с text-spacing-trim

В Chrome 123 свойство text-spacing-trim применяет кернинг к китайским, японским и корейским символам пунктуации (CJK) для регулировки чрезмерного интервала. Подробнее читайте в статье «Представляем четыре новые международные функции CSS» .

CSS-правило @scope

Safari 17.4 включает @scope позволяющий выбирать элементы в определенных поддеревьях DOM, точно ориентируясь на элементы, не создавая слишком специфических селекторов, которые трудно переопределить, и не привязывая ваши селекторы слишком тесно к структуре DOM.

Узнайте больше в разделе Ограничьте охват селекторов с помощью at-правила CSS @scope .

Улучшения «картинка в картинке»

Chrome 123 включает в себя две функции, улучшающие качество изображения «картинка в картинке». Первый — это режим отображения CSS picture-in-picture . Это позволяет вам писать определенные правила CSS, которые применяются только тогда, когда (часть) веб-приложения отображается в режиме «картинка в картинке».

Вторая функция позволяет использовать opener.focus из окна «картинка в картинке» документа, чтобы переместить фокус на системном уровне на вкладку, которой принадлежит окно «картинка в картинке» документа.

Это позволяет при необходимости вернуть исходную вкладку на передний план. Например, когда пользователю необходимо получить доступ к пользовательскому интерфейсу, который не помещается в меньшее окно «картинка в картинке».

Поддержка align-content в макете блока и таблицы.

Chrome 123 и Safari 17.4 включают поддержку align-content в макете блока и таблицы. Прочтите об изменении поддержки align-content .

API статической маршрутизации Service Worker

Начиная с Chrome 123 доступен API статической маршрутизации Service Worker. Этот API позволяет вам декларативно указать, как следует получать определенные пути к ресурсам. Это означает, что браузеру не нужно запускать сервис-воркера только для получения ответов из кэша или непосредственно из сети.

Дополнительные сведения см. в разделе Использование API статической маршрутизации Service Worker для обхода Service Worker для определенных путей .

API длинных кадров анимации

Chrome 123 также включает API Long Animation Frames , который представляет собой обновление API Long Tasks, позволяющее лучше понять медленные обновления пользовательского интерфейса (UI). Это может быть полезно для выявления кадров медленной анимации, которые могут повлиять на метрику Interaction to Next Paint (INP) Core Web Vital, которая измеряет скорость реагирования, или для выявления других ошибок пользовательского интерфейса, влияющих на плавность.

Свойство content-visibility

Firefox 124 включает поддержку свойства CSS content-visibility . Это свойство контролирует, отображает ли элемент вообще свое содержимое, позволяя браузерам не отображать содержимое до тех пор, пока оно не понадобится.

Дополнения к ArrayBuffer и группировке массивов

В Safari 17.4 JavaScript получил некоторые новые функции благодаря поддержке свойства detached и методов transfer() и transferToFixedLength() класса ArrayBuffer .

Safari 17.4 также включает методы группировки массивов Object.groupBy и Map.groupBy . Чтобы узнать больше о группировке массивов, прочтите статью «JavaScript получает методы группировки массивов» .

Эти функции теперь совместимы и поэтому присоединяются к новой версии Baseline.

setHTMLUnsafe и parseHTMLUnsafe

Методы setHTMLUnsafe и parseHTMLUnsafe поставляемые в Safari 17.4, позволяют использовать декларативную теневую модель DOM из JavaScript. Эти методы также предлагают более простой способ императивного анализа HTML в DOM по сравнению с innerHTML или DOMParser .

Бета-версии браузера

Бета-версии браузера дают вам предварительный просмотр того, что будет в следующей стабильной версии браузера. Это прекрасное время для тестирования новых функций или удалений, которые могут повлиять на ваш сайт, прежде чем мир получит эту версию. Новые бета-версии — Firefox 125 и Chrome 124 . Эти выпуски привносят в платформу множество замечательных функций. Ознакомьтесь со всеми подробностями в примечаниях к выпуску. Вот лишь несколько основных моментов.

Firefox 125 обещает стать захватывающим релизом. Он включает в себя align-content блоков, что делает эту функцию функциональной. Также включен и, следовательно, становится частью недавно доступного базового уровня API Popover. Свойство transition-behavior также будет поддерживаться. Popover transition-behavior являются частью Interop 2024 .

Chrome 124 включает методы setHTMLUnsafe и parseHTMLUnsafe позволяющие использовать декларативную теневую модель DOM из JavaScript, что обеспечивает совместимость этих функций. Также включен API WebSocketStream и writingsuggestions .