Novità di Chrome 132

Pete LePage

Ecco cosa devi sapere:

• Elemento di finestra di dialogo ToggleEvent ti consente di sapere quando un <dialog> si è aperto o chiuso.
• Acquisisci elementi specifici per la condivisione di video.
• L'API File System Access è ora disponibile su Android e nelle WebView
• E c'è molto altro.

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 132.

Eventi di attivazione/disattivazione degli elementi della finestra di dialogo

L'elemento <dialog> è utile per rappresentare qualsiasi tipo di finestra di dialogo in HTML. È disponibile a livello generale, il che significa che funziona su tutti i browser. Purtroppo, l'implementazione iniziale non includeva un modo diretto per rilevare quando una finestra di dialogo si apre o si chiude.

A partire da Chrome 132, è disponibile un nuovo ToggleEvent. Include lo stesso ToggleEvent inviato da un popover. Per gli elementi <dialog>, quando viene chiamato showModal o show, <dialog> invia un ToggleEvent con newState=open. Quando un <dialog> viene chiuso (utilizzando un modulo, un pulsante o un closewatcher), viene inviato un ToggleEvent con 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");
  }
});

Acquisizione di elementi

La piattaforma web consente a un'app web di acquisire una traccia video della scheda o della regione corrente e, a partire da Chrome 132, le app web possono acquisire un elemento. Questa funzionalità è particolarmente utile quando gli elementi sono posizionati in modo da sovrapporsi.

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;

Dai un'occhiata alla demo.

L'API File System Access su Android e WebView

L'API File System Access è disponibile su Chrome per computer da un po' di tempo e consente alle app web di interagire con i file sul file system locale degli utenti. A partire da Chrome 132, l'API è ora disponibile su Android e in WebView.

Per leggere un file, chiama showOpenFilePicker(), che mostra un selettore di file, quindi restituisce un handle file che puoi utilizzare per leggere il file. Per salvare un file sul disco, puoi utilizzare l'handle file ottenuto in precedenza o chiamare showSaveFilePicker() per ottenere un nuovo handle file.

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

E tanto altro.

Ovviamente ce ne sono molti altri.

• Supporto per le parole chiave sideways-rl e sideways-lr per la proprietà CSS writing-mode.
• L'implementazione dei contenitori di scorrimento attivabili da tastiera è ripresa.
• Aggiungi un metodo bytes() alle interfacce Request e Response, che restituisce una promessa che si risolve con un Uint8Array.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i seguenti link per ulteriori modifiche in Chrome 132.

• Note di rilascio di Chrome 132.
• Novità di Chrome DevTools (132).
• Aggiornamenti di ChromeStatus.com per Chrome 132.
• Calendario delle release di Chrome.

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Non appena verrà rilasciato Chrome 133, ti comunicheremo le novità di Chrome.