Neu in Chrome 132

Pete LePage

Dazu sollten Sie Folgendes wissen:

• Mit dem Dialogfeldelement „ToggleEvent“ können Sie feststellen, wann ein <dialog> geöffnet oder geschlossen wurde.
• Bestimmte Elemente für die Videofreigabe aufnehmen
• Die File System Access API ist jetzt auf Android-Geräten und in WebViews verfügbar.
• Und es gibt noch viel mehr.

Ich bin Pete LePage. Sehen wir uns an, was es in Chrome 132 für Entwickler Neues gibt.

Ereignisse für das Ein-/Ausschalten von Dialogelementen

Das <dialog>-Element ist ein nützliches Element, um jede Art von Dialogfeld in HTML darzustellen. Sie ist weithin verfügbar, d. h., sie funktioniert in allen Browsern. Leider gab es in der ursprünglichen Implementierung keine direkte Möglichkeit, zu erkennen, wann ein Dialogfeld geöffnet oder geschlossen wird.

Ab Chrome 132 gibt es ein neues ToggleEvent. Es enthält dieselbe ToggleEvent, die von einem popover gesendet wird. Wenn bei <dialog>-Elementen showModal oder show aufgerufen wird, sendet das <dialog>-Element ein ToggleEvent mit newState=open. Wenn eine <dialog> geschlossen wird (über ein Formular, eine Schaltfläche oder eine closewatcher), wird eine ToggleEvent mit newState=closed gesendet.

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");
  }
});

Elementaufnahme

Die Webplattform ermöglicht es einer Webanwendung, einen Videotrack des aktuellen Tabs oder der Region aufzuzeichnen. Ab Chrome 132 können Web-Apps auch Elemente erfassen. Das ist besonders nützlich, wenn Elemente so positioniert sind, dass sie sich überschneiden können.

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;

Demo ansehen

File System Access API auf Android und WebView

Die File System Access API ist schon seit einiger Zeit in Chrome für Computer verfügbar. Mit ihr können Webanwendungen mit Dateien im lokalen Dateisystem des Nutzers interagieren. Ab Chrome 132 ist die API jetzt auf Android-Geräten und in WebViews verfügbar.

Wenn Sie eine Datei lesen möchten, rufen Sie showOpenFilePicker() auf. Daraufhin wird eine Dateiauswahl angezeigt und ein Dateihandle zurückgegeben, mit dem Sie die Datei lesen können. Wenn Sie eine Datei auf dem Laufwerk speichern möchten, können Sie entweder den zuvor erhaltenen Dateihandle verwenden oder showSaveFilePicker() aufrufen, um einen neuen Dateihandle zu erhalten.

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

…und vieles mehr

Natürlich gibt es noch viel mehr.

• Unterstützung für sideways-rl- und sideways-lr-Keywords für die CSS-Eigenschaft writing-mode.
• Das Roll-out von per Tastatur fokussierbaren Scroll-Containern wurde fortgesetzt.
• Fügen Sie den Schnittstellen Request und Response eine bytes()-Methode hinzu, die ein Versprechen zurückgibt, das mit einem Uint8Array aufgelöst wird.

Weitere Informationen

Dies sind nur einige wichtige Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 132.

• Versionshinweise für Chrome 132
• Das ist neu in den Chrome-Entwicklertools (132)
• ChromeStatus.com-Updates für Chrome 132
• Chrome-Release-Kalender

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Sobald Chrome 133 veröffentlicht wird, informieren wir Sie hier über die Neuigkeiten in Chrome.