mrssea 01 Апреля 2023 в 8:09

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

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

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

В марте 2023 года Firefox 111, Chrome 111 и Safari 16.4 стали стабильными. Давайте посмотрим, что это означает для веб-платформы.

Глобальные HTML-атрибуты

В Firefox 111 добавлена поддержка нескольких полезных глобальных атрибутов HTML. Атрибут autocapitalize определяет, может ли текст автоматически набираться заглавными буквами, когда пользователь печатает на виртуальной клавиатуре.

Поддержка браузеров 43 111 79 х Подробнее

Атрибут translate указывает, следует ли переводить элемент при локализации страницы.

Поддержка браузеров 19 111 79 6 Подробнее

Origin Private File System (OPFS)

Firefox добавляет поддержку Origin Private File System (OPFS) при использовании API доступа к файловой системе. Узнайть больше об OPFS.

View Transitions API

В Chrome 111 добавлен View Transitions API, упрощающий создание плавных переходов в одностраничных приложениях (SPA) и позволяющий изменять DOM без какого-либо перекрытия между состояниями.

Узнайте больше в статье о переходах между представлениями SPA после запуска в Chrome 111.

Поддержка браузеров 111 х 111 х Подробнее

Новые цветовые пространства и функции CSS

В Chrome 111 также включен совершенно новый набор способов использования цвета в Интернете. Chrome теперь поддерживает цветовые пространства, которые получают доступ к цветам за пределами гаммы RGB, а также функции color() и color-mix(). Узнайте больше в руководстве по цвету CSS и в блоге о color-mix().

Поддержка браузеров х х х х

Версия Chrome также включает новые инструменты DevTools, которые помогут вам работать с этой новой функциональностью цвета.

Вы также можете протестировать новые цветовые функции color(), lab(), lch(), oklab() и oklch() в Firefox 111, которые в настоящее время находятся за параметром layout.css.more_color_4.enabled.

Больше контроля над выбором :nth-child()

В Chrome 111 добавлена возможность передавать список селекторов в функции :nth-child() и nth-last-child(). Узнайте больше об этом и посмотрите примеры

Поддержка браузеров 111 х 111 9

Поддержка предыдущего и следующего слайдов в Media Session API

Наконец, в этом списке дополнений Chrome 111 для Media Session API есть «previousslide» и «nextslide».

Поддержка браузеров 111 х 111 9

Поддержка псевдоклассов в Safari

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

В этом релизе поддерживается множество дополнительных псевдоклассов CSS: :user-invalid, :user-valid, :dir(), :modal и :fullscreen.

Новый синтаксис диапазона для медиа-запросов

В этом выпуске Safari гораздо более элегантный и полезный синтаксис диапазона для медиа-запросов совместим со всеми тремя движками. См. примеры этого синтаксиса в этом посте, опубликованном, когда синтаксис появился в Chrome.

Поддержка браузеров 104 63 х 9 Подробнее

Свойства и значения CSS

В Safari 16.4 добавлена поддержка @property, позволяющая регистрировать настраиваемые свойства CSS непосредственно в таблице стилей. Узнайте больше об этом в статье @property: предоставление сверхспособностей переменным CSS.

Поддержка браузеров 85 х 85 х Подробнее

Поддержка CSS API

Замечательные дополнения для CSS продолжают поступать с поддержкой CSS Typed OM. Этот API предоставляет значения CSS как типизированные объекты JavaScript, а не строки. Он упрощает работу с CSS из JavaScript и более эффективен, чем существующие методы.

Поддержка браузеров 66 х 79 16.4 Подробнее

Существует также поддержка конструируемых таблиц стилей с помощью CSSStyleSheet(). Это позволяет совместно использовать таблицы стилей между документом и его теневыми поддеревьями DOM. В этой версии Safari конструируемые таблицы стилей теперь поддерживаются во всех трех движках.

Поддержка браузеров 73 101 79 16.4 Подробнее

Web Push и Badging API

Safari теперь поддерживает Web Push вместе с Badging API, что является отличной новостью для разработчиков приложений. В частности, эта версия означает, что push-уведомления поддерживаются во всех основных движках.

Поддержка браузеров 42 44 17 16 Подробнее

Импорт карт

Еще одним дополнением, которое приводит функцию к статусу функциональной совместимости, является добавление JavaScript Import maps, что значительно упрощает импорт модулей ES.

Поддержка браузеров 89 108 89 х

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

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

В Firefox 112 добавлена поддержка атрибута inert, что сделает этот полезный атрибут доступным для всех движков. Вы можете узнать больше об инертных в Введение в inert. Firefox также включит поддержку функции замедления linear().

В Chrome 112 и Safari 16.5 добавлена поддержка CSS Nesting — функция, которую многие разработчики с нетерпением ждут.

Chrome 112 также включает поддержку animation-composition. Узнайте, как работает это свойство, в разделе Укажите, как несколько анимационных эффектов должны комбинироваться с animation-composition.

Если вы используете режим Headless Chrome, например, с Puppeteer, то 112 приносит совершенно новый Headless режим. Узнайте об этом в Chrome режим Headless получает обновление.

Оригинал статьи на английском https://web.dev/web-platform-03-2023/