Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chroom 132

Pete LePage

Dit is wat u moet weten:

Het 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 eens kijken wat er nieuw is voor ontwikkelaars in Chrome 132.

Schakelgebeurtenissen voor dialoogelementen

Het <dialog> -element is een handig element voor het weergeven van elk type dialoogvenster in HTML. Het is een baseline en breed beschikbaar element, 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 . Deze bevat dezelfde ToggleEvent die wordt verzonden via een popover . Voor <dialog> -elementen verzendt <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 deze 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");
  }
});

Elementen vastleggen

Overlappende elementen met elementvastlegging.

Het webplatform stelt een webapp in staat een videotrack van het huidige tabblad of gebied vast te leggen, en vanaf Chrome 132 kunnen webapps een element vastleggen . Dit is vooral handig wanneer elementen zo zijn geplaatst 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 stelt webapps in staat om te communiceren met bestanden op het lokale bestandssysteem van de gebruiker. Vanaf Chrome 132 is de API nu ook beschikbaar op Android en in WebViews.

Om een bestand te lezen, roept u showOpenFilePicker() aan. Deze functie toont een bestandskiezer en retourneert vervolgens een bestandshandle waarmee u het bestand kunt lezen. Om een bestand op schijf op te slaan, kunt u de bestandshandle gebruiken die u eerder hebt verkregen, of u roept showSaveFilePicker() aan om een nieuwe bestandshandle 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 nog veel meer!

Er is natuurlijk nog veel meer.

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

Verder lezen

Dit zijn slechts enkele belangrijke hoogtepunten. Bekijk de volgende links voor aanvullende wijzigingen in Chrome 132.

Om op de hoogte te blijven, kunt u zich abonneren op het YouTube-kanaal voor Chrome-ontwikkelaars . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Zodra Chrome 133 uitkomt, laten we u weten wat er nieuw is in Chrome!