Новое в Chrome 132

Pete LePage

Вот что вам нужно знать:

• Элемент диалога ToggleEvent позволяет узнать, когда <dialog> открылся или закрылся.
• Записывайте определенные элементы для публикации в видео.
• API доступа к файловой системе теперь доступен на Android и в WebViews
• И это еще не все.

Меня зовут Пит ЛеПейдж. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 132.

События переключения элементов диалога

Элемент <dialog> — полезный элемент для представления любого типа диалога в HTML. Он доступен по базовой линии, что означает, что он работает во всех браузерах. К сожалению, первоначальная реализация не включала прямого способа определения того, когда диалог открывается или закрывается.

Начиная с Chrome 132, есть новый ToggleEvent . Он включает в себя тот же ToggleEvent , который отправляется popover . Для элементов <dialog> , когда вызывается showModal или show , <dialog> отправляет ToggleEvent с newState=open . Когда <dialog> закрывается (с помощью формы, кнопки или closewatcher ), он отправляет ToggleEvent с newState=closed .

const dialog = document.getElementById("myDialog");

// Fired just before dialog is shown/hidden
dialog.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is about to be shown");
  } else {
    console.log("Dialog is about to be hidden");
  }
});

// Fired just after dialog is shown/hidden
dialog.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is now visible");
  } else {
    console.log("Dialog is now hidden");
  }
});

Захват элемента

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

const myElem = document.getElementById('elementToShare');

// Request screen sharing
const stream = await navigator.mediaDevices
  .getDisplayMedia({preferCurrentTab: true});
const [videoTrack] = stream.getVideoTracks();

// Restrict the video stream to myElem and its subtree
const restrictionTarget = await RestrictionTarget.fromElement(myElem);
await videoTrack.restrictTo(restrictionTarget);

// Set the video source to my newly restricted stream
video.srcObject = stream;

Посмотрите демо .

API доступа к файловой системе на Android и WebView

API File System Access уже некоторое время доступен на Chrome Desktop и позволяет веб-приложениям взаимодействовать с файлами в локальной файловой системе пользователя. Начиная с Chrome 132, API теперь доступен на Android и в WebViews.

Чтобы прочитать файл, вызовите showOpenFilePicker() , который показывает средство выбора файла, а затем возвращает дескриптор файла, который можно использовать для чтения файла. Чтобы сохранить файл на диск, вы можете либо использовать полученный ранее дескриптор файла, либо вызвать showSaveFilePicker() чтобы получить новый дескриптор файла.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

И многое другое!

Конечно, есть еще много чего.

• Поддержка ключевых слов sideways-rl и sideways-lr для свойства CSS writing-mode .
• Возобновлен выпуск контейнеров прокрутки с фокусировкой на клавиатуре .
• Добавьте метод bytes() к интерфейсам Request и Response , который возвращает обещание, разрешающееся с помощью Uint8Array.

Дальнейшее чтение

Это охватывает только некоторые ключевые моменты. Проверьте следующие ссылки для дополнительных изменений в Chrome 132.

• Заметки о выпуске Chrome 132 .
• Что нового в Chrome DevTools (132) .
• Обновления ChromeStatus.com для Chrome 132 .
• Календарь релизов Chrome .

Подписаться

Чтобы оставаться в курсе событий, подпишитесь на канал Chrome Developers на YouTube , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео.

Как только выйдет Chrome 133, мы сразу же расскажем вам, что нового в Chrome!