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

Nouveautés de Chrome 116

Adriana Jara

Voici les informations à retenir :

Utilisez l'API Document Picture-in-picture pour augmenter la productivité des utilisateurs.
Il est désormais plus facile de déboguer les feuilles de style manquantes dans les outils de développement.
Et ce n'est pas tout : bien d'autres fonctionnalités sont disponibles.

Je m'appelle Adriana Jara. Voyons ce que Chrome 116 a de nouveau à offrir aux développeurs.

API Picture-in-Picture pour les documents

L'API Picture-in-picture pour les documents permet d'ouvrir une fenêtre toujours au premier plan pouvant être remplie de contenu HTML arbitraire.

Fenêtre Picture-in-picture affichant la bande-annonce de Sintel. — Fenêtre Picture-in-Picture créée avec l'API Picture-in-Picture de Document (démo).

La fenêtre Picture-in-picture de l'API Picture-in-picture de document est semblable à une fenêtre vierge de même origine ouverte à l'aide de window.open(), avec quelques différences:

La fenêtre Picture-in-picture flotte au-dessus des autres fenêtres.
La fenêtre Picture-in-picture n'est jamais plus longue que la fenêtre d'ouverture.
Impossible de naviguer dans la fenêtre Picture-in-picture.
La position de la fenêtre Picture-in-picture ne peut pas être définie par le site Web.

Le code HTML suivant configure un lecteur vidéo personnalisé et un élément de bouton pour ouvrir le lecteur vidéo dans une fenêtre Picture-in-picture.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

Le code JavaScript suivant appelle documentPictureInPicture.requestWindow() lorsque l'utilisateur clique sur le bouton pour ouvrir une fenêtre Picture-in-Picture vide. La promesse renvoyée est résolue avec un objet JavaScript de fenêtre Picture-in-picture. Le lecteur vidéo est déplacé vers cette fenêtre à l'aide de append().

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Pour en savoir plus et obtenir des exemples, consultez Picture-in-picture pour n'importe quel élément.

Améliorations manquantes du débogage des feuilles de style dans les outils pour les développeurs.

Les outils pour les développeurs ont bénéficié de plusieurs améliorations pour identifier et déboguer les problèmes liés aux feuilles de style manquantes.

Tout d'abord, l'arborescence Sources > Page n'affiche désormais que les feuilles de style déployées et chargées avec succès afin de réduire la confusion.

De plus, Sources > Éditeur souligne désormais les instructions "failed", @import, url() et href, et affiche des info-bulles d'erreur en ligne à côté d'elles.

Instructions soulignées avec des info-bulles dans le panneau "Sources"

En plus des liens vers les requêtes ayant échoué, la console fournit désormais des liens vers la ligne exacte qui fait référence à une feuille de style qui n'a pas pu être chargée.

La console fournit des liens vers les lignes exactes contenant des énoncés problématiques.

Le panneau "Network" (Réseau) renseigne de manière cohérente la colonne Initiator (Initiateur) avec des liens vers la ligne exacte qui fait référence à une feuille de style qui n'a pas pu être chargée.

Le panneau "Problèmes" liste tous les problèmes de chargement des feuilles de style, y compris les URL non valides, les requêtes ayant échoué et les instructions @import mal placées.

Panneau "Problèmes" avec des liens vers les sources et les demandes.

Pour en savoir plus sur les outils pour les développeurs dans Chrome 116, consultez les nouveautés de DevTools.

Et bien plus !

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

Le chemin d'animation permet aux auteurs de positionner n'importe quel objet graphique et de l'animer le long d'un chemin spécifié par le développeur.
Les propriétés display et content-visibility sont désormais compatibles avec les animations d'images clés, ce qui permet d'ajouter des animations de sortie uniquement en CSS.
L'API fetch peut désormais être utilisée avec les lecteurs Bring Your Own Buffer, ce qui réduit les coûts et les copies de collecte des déchets, et améliore la réactivité pour les utilisateurs.

Documentation complémentaire

Cela ne couvre que certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires dans Chrome 116.

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.

Yo soy Adriana Jara, et dès que Chrome 117 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.