Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 132

Pete LePage

Voici les informations à retenir :

L'élément de boîte de dialogue ToggleEvent vous indique quand un <dialog> s'ouvre ou se ferme.
Capturez des éléments spécifiques pour les partager dans une vidéo.
L'API File System Access est désormais disponible sur Android et dans les WebViews
Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.

Je m'appelle Pete LePage. Voyons ce que Chrome 132 a de nouveau à offrir aux développeurs.

Événements de basculement des éléments de boîte de dialogue

L'élément <dialog> est utile pour représenter n'importe quel type de boîte de dialogue en HTML. Il est largement disponible en tant que référence, ce qui signifie qu'il fonctionne dans tous les navigateurs. Malheureusement, l'implémentation initiale n'incluait pas de moyen direct de détecter quand une boîte de dialogue s'ouvre ou se ferme.

À partir de Chrome 132, une nouvelle ToggleEvent est disponible. Il intègre le même ToggleEvent que celui distribué par un popover. Pour les éléments <dialog>, lorsque showModal ou show est appelé, <dialog> distribue un ToggleEvent avec newState=open. Lorsqu'un <dialog> est fermé (à l'aide d'un formulaire, d'un bouton ou d'un closewatcher), il distribue un ToggleEvent avec 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");
  }
});

Capture d'éléments

Éléments superposés avec la capture d'éléments.

La plate-forme Web permet à une application Web de capturer une piste vidéo de l'onglet ou de la région actuelle. À partir de Chrome 132, les applications Web peuvent capturer un élément. Cela est particulièrement utile lorsque les éléments sont positionnés de manière à se chevaucher.

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;

Regardez la démonstration.

API File System Access sur Android et WebView

L'API File System Access est disponible sur Chrome Desktop depuis un certain temps. Elle permet aux applications Web d'interagir avec les fichiers du système de fichiers local des utilisateurs. À partir de Chrome 132, l'API est désormais disponible sur Android et dans les WebViews.

Pour lire un fichier, appelez showOpenFilePicker(), qui affiche un sélecteur de fichiers, puis renvoie un gestionnaire de fichiers que vous pouvez utiliser pour lire le fichier. Pour enregistrer un fichier sur le disque, vous pouvez utiliser le gestionnaire de fichiers que vous avez obtenu précédemment ou appeler showSaveFilePicker() pour obtenir un nouveau gestionnaire de fichiers.

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

Et bien plus !

Bien sûr, il y a bien d'autres choses.

Prise en charge des mots clés sideways-rl et sideways-lr pour la propriété CSS writing-mode.
Le déploiement des conteneurs de défilement sélectionnables au clavier a repris.
Ajoutez une méthode bytes() aux interfaces Request et Response, qui renvoie une promesse résolue avec un Uint8Array.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens suivants pour en savoir plus sur les modifications apportées à Chrome 132.

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Dès que Chrome 133 sera disponible, nous vous présenterons les nouveautés de Chrome.