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

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

Rachel Andrew

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

В июне Chrome 103 и Firefox 102 стали стабильными.

Преобразование потоков и читаемых потоков байтов

Firefox 102 включает поддержку Transform Streams . Это позволяет передавать данные из ReadableStream в WritableStream , выполняя преобразование фрагментов. Приятно видеть, что эта функция стала доступна во всех трех движках, поэтому сейчас самое время узнать о Streams .

Читаемые байтовые потоки теперь также поддерживаются в Firefox 102, что позволяет использовать считыватель BYOB (принеси свой собственный буфер) с интерфейсом ReadableStreamBYOBReader . Это можно использовать для потоковой передачи данных, предоставленных разработчиком.

Доступ к локально установленным шрифтам

Chrome 103 включает API локального доступа к шрифтам , который обеспечивает доступ к локально установленным шрифтам пользователя. После запроса доступа к шрифтам, установленным на устройстве, вызовите window.queryLocalFonts() чтобы получить массив установленных шрифтов.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Функция update мультимедиа

Firefox 102 включает функцию update мультимедиа. Это используется для запроса, может ли устройство вывода изменить внешний вид контента после его визуализации.

Новый код состояния HTTP — 103 ранних подсказки

В Chrome 103 добавлен новый код состояния HTTP 103 Early Hints. Если сервер или CDN знает, что для загрузки страницы требуется определенный набор подресурсов, он может рекомендовать браузеру предварительно подключиться к источникам или даже предварительно загрузить ресурсы по мере поступления страницы, которая их требует. Для этого требуются обновления вашего сервера или CDN для Воспользуйтесь этой функцией и узнайте больше о Early Hints .

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

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

В апреле появились новые бета-версии Chrome 104 , Firefox 103 и Safari 16 .

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

Chrome 104 включает новый синтаксис для медиазапросов диапазона из спецификации Media Queries Level 4. Например, медиа-запрос, ранее написанный так:

@media (min-width: 400px) { … }

Теперь можно записать так:

@media (width >= 400px) { … }

API захвата региона

Chrome 104 для настольных компьютеров также включает API захвата региона . Это позволяет обрезать и удалять контент из захваченного видео перед его публикацией.

Safari 16 добавляет в браузер несколько ключевых функций

Safari 16 выглядит еще одним захватывающим релизом от команды Safari. В этом выпуске добавлены многие функции, включенные в Interop 2022 , приятно видеть так много возможностей в середине года. Здесь я выделил несколько моих любимых функций, но чтобы узнать больше, ознакомьтесь с примечаниями к выпуску .

Как и многие разработчики, я очень рад видеть поддержку запросов размера для Container Queries, функции, которая в настоящее время также находится в Chrome.

Также в Safari 16 поддерживается значение subgrid для grid-template-columns и grid-template-rows . Эта функция уже есть в Firefox и находится в разработке в Chrome и позволяет наследовать размер дорожек сетки вложенным сеткам.

Также для макета сетки предусмотрена возможность анимировать дорожки сетки.

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

Проблемы доступности для display: contents также было решено, что сделало эту полезную функцию безопасной в использовании без опасности удаления элементов из дерева доступности.

Эти бета-функции скоро появятся в стабильных браузерах.

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