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

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

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

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

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

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

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

  • 43
  • 79
  • 111
  • Икс

Источник

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

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

  • 19
  • 79
  • 111
  • 6

Источник

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

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

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

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

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

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

  • 111
  • 111
  • Икс
  • 18

Источник

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

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

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

  • 111
  • 111
  • 113
  • 16.2

Источник

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

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

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

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

  • 111
  • 111
  • 113
  • 9

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

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

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

  • 111
  • 111
  • Икс
  • Икс

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

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

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

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

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

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

  • 104
  • 104
  • 102
  • 16,4

Источник

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

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

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

  • 85
  • 85
  • 128
  • 16,4

Источник

Поддержка CSS API

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

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

  • 66
  • 79
  • Икс
  • 16,4

Источник

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

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

  • 73
  • 79
  • 101
  • 16,4

Источник

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

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

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

  • 42
  • 17
  • 44
  • 16

Источник

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

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

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

  • 89
  • 89
  • 108
  • 16,4

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

Бета-версии браузера дают вам предварительный просмотр того, что будет в следующей стабильной версии браузера. Это прекрасное время для тестирования новых функций или удалений, которые могут повлиять на ваш сайт, прежде чем мир получит эту версию. Новые бета-версии — 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 .

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