Nouveautés de Chrome 116

Adriana Jara

Voici les informations à retenir :

Je m'appelle Adriana Jara. Découvrons ensemble les nouveautés de Chrome 116 pour les développeurs.

API Document Picture-in-picture.

L'API Document Picture-in-picture permet d'ouvrir une fenêtre toujours au premier plan contenant du contenu HTML arbitraire.

Fenêtre Picture-in-picture pour la bande-annonce de Sintel
Fenêtre Picture-in-picture créée avec l'API Document Picture-in-picture (démonstration)

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

  • La fenêtre Picture-in-picture flotte au-dessus des autres fenêtres.
  • La fenêtre Picture-in-picture ne survit jamais à la fenêtre d'ouverture.
  • Il n'est pas possible 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 ci-dessous permet de configurer un lecteur vidéo personnalisé et un élément 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 se résout avec un objet JavaScript de fenêtre Picture-in-picture. Le lecteur vidéo est déplacé dans 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);
});

Consultez la section Picture-in-picture pour tous les éléments pour obtenir plus de détails et d'exemples.

Amélioration du débogage des feuilles de style manquantes dans les outils de développement.

Nous avons apporté un certain nombre d'améliorations aux outils de développement 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 correctement déployées et chargées afin de réduire les confusions.

Par ailleurs, le menu Sources > Editor (Sources > Éditeur) souligne désormais et affiche des info-bulles d'erreur intégrées à côté des instructions ayant échoué,@import, url() et href.

Instructions soulignées avec des info-bulles dans le panneau &quot;Sources&quot;

  • 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 dont le chargement a échoué.

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

Le panneau "Network" (Réseau) remplit systématiquement la colonne Initiator (Initiateur) avec des liens vers la ligne exacte qui fait référence à une feuille de style dont le chargement a échoué.

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

Panneau &quot;Problèmes&quot; contenant des liens vers les sources et les demandes

Pour en savoir plus sur les outils de développement dans Chrome 116, consultez Nouveautés concernant les outils de développement.

Et bien plus !

Bien sûr, ce n'est pas tout.

  • La trajectoire d'animation permet aux auteurs de positionner n'importe quel objet graphique et de l'animer le long du tracé 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 d'extraction peut désormais être utilisée avec les lecteurs de tampon Bring Your Own Buffer, ce qui réduit les frais généraux de récupération de mémoire et les copies, et améliore la réactivité pour les utilisateurs.

Complément d'informations

Nous n'aborderons ici que certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 116.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Adriana Jara, soja, et dès la sortie de Chrome 117, je serai là pour vous dire quelles nouveautés Chrome sont disponibles !