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

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

Rachel Andrew

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

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

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

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

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

Частная файловая система Origin (OPFS)

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

API переходов просмотра

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

Подробную информацию можно найти в сообщении о запуске переходов представления SPA в Chrome 111 .

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

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

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

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

В Chrome 111 добавлена ​​возможность передавать список селекторов в :nth-child() и nth-last-child() . Узнайте больше об этом и посмотрите примеры в статье «Больше контроля над выбором :nth-child() с помощью синтаксиса of S» .

Поддержка предыдущего и следующего слайда в API сеанса мультимедиа.

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

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

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

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

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

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

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

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

Поддержка CSS API

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

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

Web Push и API бейджинга

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

Импортировать карты

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

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

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

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

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

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

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

Часть новой веб-серии.