Nowości w Chrome 132

Pete LePage

Oto, co musisz wiedzieć na ten temat:

• Element dialogu ToggleEvent informuje, kiedy <dialog>został otwarty lub zamknięty.
• Zapisywanie wybranych elementów do udostępnienia filmu.
• Interfejs File System Access API jest teraz dostępny na Androidzie i w WebViews
• I to nie wszystko .

Nazywam się Pete LePage. Zobacz, co nowego w Chrome 132 dla deweloperów.

Zdarzenia przełączania elementów dialogu

Element <dialog> jest przydatny do przedstawiania dowolnego rodzaju dialogu w HTML. Jest to domyślna wersja dostępna powszechnie, co oznacza, że działa we wszystkich przeglądarkach. Niestety początkowa implementacja nie obejmowała bezpośredniego sposobu wykrywania, kiedy okno dialogowe się otwiera lub zamyka.

Począwszy od Chrome 132 dostępna jest nowa ToggleEvent. Zawiera on te same informacje ToggleEvent, które są wysyłane przez popover. W przypadku elementów <dialog>, gdy wywoływany jest element showModal lub show, element <dialog> wysyła element ToggleEvent z wartością newState=open. Gdy <dialog> zostanie zamknięty (za pomocą formularza, przycisku lub closewatcher), wysyła ToggleEvent z 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");
  }
});

Przechwytywanie elementów

Platforma internetowa umożliwia aplikacji internetowej przechwycenie ścieżki wideo bieżącej karty lub regionu. Od wersji Chrome 132 aplikacje internetowe mogą też przechwytywać element. Jest to szczególnie przydatne, gdy elementy są umieszczone w taki sposób, że mogą się na siebie nakładać.

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;

Obejrzyj prezentację.

Interfejs File System Access API na Androidzie i w WebView

Interfejs File System Access API jest dostępny w Chrome na komputery od jakiegoś czasu i umożliwia aplikacjom internetowym interakcję z plikami w lokalnym systemie plików użytkownika. Od wersji 132 Chrome interfejs API jest dostępny na Androidzie i w komponencie WebView.

Aby odczytać plik, wywołaj funkcję showOpenFilePicker(), która wyświetla selektor plików, a potem zwraca uchwyt pliku, którego można użyć do odczytania pliku. Aby zapisać plik na dysku, możesz użyć uchwytu pliku uzyskanego wcześniej lub wywołać funkcję showSaveFilePicker(), aby uzyskać nowy uchwyt pliku.

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

I inne funkcje

Oczywiście jest ich znacznie więcej.

• Obsługa słów kluczowych sideways-rl i sideways-lr w przypadku właściwości CSS writing-mode.
• Wdrożenie kontenerów z paskami przewijania, które można zaznaczyć za pomocą klawiatury, zostało wznowione.
• Do interfejsów Request i Response dodaj metodę bytes(), która zwraca obietnicę, która zwraca tablicę Uint8.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby poznać inne zmiany w Chrome 132, kliknij te linki.

• Informacje o wersji Chrome 132
• Nowości w Narzędziach deweloperskich w Chrome (132)
• Informacje na stronie ChromeStatus.com dotyczące Chrome 132
• Kalendarz wersji Chrome.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla deweloperów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Gdy tylko pojawi się nowa wersja Chrome, poinformujemy Cię o jej nowościach.