Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chroom 132

Pete LePage

Dit is wat u moet weten:

Dialoogelement ToggleEvent laat u weten wanneer een <dialog> is geopend of gesloten.
Leg specifieke elementen vast voor het delen van video's.
De File System Access API is nu beschikbaar op Android en in WebViews
En er is nog veel meer .

Ik ben Pete LePage. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 132.

Dialoogelement schakel gebeurtenissen in

Het <dialog> -element is een nuttig element voor het weergeven van elk soort dialoog in HTML. Het is Baseline Widely beschikbaar, wat betekent dat het in alle browsers werkt. Helaas bevatte de initiële implementatie geen directe manier om te detecteren wanneer een dialoogvenster wordt geopend of gesloten.

Vanaf Chrome 132 is er een nieuwe ToggleEvent . Het bevat dezelfde ToggleEvent die wordt verzonden door een popover . Voor <dialog> -elementen verzendt de <dialog> een ToggleEvent met newState=open wanneer showModal of show wordt aangeroepen. Wanneer een <dialog> wordt gesloten (met behulp van een formulier, knop of closewatcher ) verzendt het een ToggleEvent met 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");
  }
});

Elementopname

Overlappende elementen met elementopname.

Via het webplatform kan een webapp een videotrack van het huidige tabblad of de huidige regio vastleggen, en vanaf Chrome 132 kunnen webapps een element vastleggen . Dit is vooral handig wanneer elementen zo zijn gepositioneerd dat ze elkaar kunnen overlappen.

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;

Bekijk de demo .

De File System Access API op Android en WebView

De File System Access API is al enige tijd beschikbaar op Chrome Desktop en zorgt ervoor dat webapps kunnen communiceren met bestanden op het lokale bestandssysteem van de gebruiker. Vanaf Chrome 132 is de API nu beschikbaar op Android en in WebViews.

Om een bestand te lezen, roept u showOpenFilePicker() op, die een bestandskiezer toont en vervolgens een bestandsingang retourneert die u kunt gebruiken om het bestand te lezen. Om een bestand op schijf op te slaan, kunt u de bestandsingang gebruiken die u eerder hebt gekregen, of showSaveFilePicker() aanroepen om een nieuwe bestandsingang te verkrijgen.

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

En meer!

Natuurlijk is er nog veel meer.

Ondersteuning voor sideways-rl en sideways-lr trefwoorden voor de CSS-eigenschap in de writing-mode .
De uitrol van focusseerbare scrollcontainers op het toetsenbord is hervat.
Voeg een bytes() methode toe aan de Request en Response interfaces, die een belofte retourneert die wordt opgelost met een Uint8Array.

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de volgende links voor aanvullende wijzigingen in Chrome 132.

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Zodra Chrome 133 wordt uitgebracht, zijn we hier om u te vertellen wat er nieuw is in Chrome!