Nouveautés de Chrome 110

Adriana Jara

Voici les informations à retenir :

  • Ajoutez un style personnalisé à vos éléments Picture-in-picture avec la nouvelle pseudo-classe :picture-in-picture.
  • Définissez le comportement de lancement de votre application Web avec launch_handler dans votre fichier manifeste.
  • Utilisez l'attribut credentialless dans des iFrames pour intégrer des contenus tiers qui ne définissent pas de règle de l'intégrateur multi-origine.
  • Et ce n'est pas tout : ce n'est pas tout.

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

Pseudo-classe Picture-in-picture

Avec l'API Picture-in-picture, les sites Web peuvent créer une fenêtre vidéo flottante, toujours au-dessus, pour que les utilisateurs continuent à regarder des contenus multimédias tout en interagissant avec d'autres contenus.

La pseudo-classe :picture-in-picture vous permet désormais d'ajouter des styles aux éléments pour améliorer l'expérience.

L'extrait ci-dessous montre comment utiliser la classe Picture-in-picture pour ajouter au conteneur vidéo un message rappelant à l'utilisateur que la vidéo est en cours de lecture ailleurs.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

Réutilisez la pseudo-classe pour l'élément vidéo afin de rendre l'élément transparent et d'afficher correctement le message.

Testez cet exemple et améliorez votre expérience vidéo Picture-in-picture.

launch_handler du fichier manifeste.

L'API Launch Handler vous permet de contrôler le mode de lancement de votre application Web, par exemple, si elle utilise une fenêtre existante ou une nouvelle, et si la fenêtre choisie est redirigée vers l'URL de lancement.

Prenons un exemple: dans les environnements de bureau, si vous installez une application, puis que vous y accédez dans le navigateur, un bouton permet de passer à la fenêtre de l'application autonome. Auparavant, le seul comportement possible était de lancer l'application dans une nouvelle fenêtre.

Désormais, vous pouvez personnaliser leur comportement de lancement à l'aide des applications Web membres du fichier manifeste launch_handler.

Par exemple, avec l'extrait de code ci-dessous, tous les lancements de cette application Web se concentrent sur une fenêtre d'application existante et y accèdent (le cas échéant) au lieu de toujours lancer une nouvelle fenêtre.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless iFrame.

L'un des principaux défis liés à l'isolation multi-origine est que tous les iFrames multi-origines doivent déployer les propriétés COEP et CORP . Un iFrame sans ces en-têtes ne sera pas chargé par le navigateur.

L'attribut credentialless permet d'intégrer des iFrames tiers qui ne définissent pas ces en-têtes.

Avec credentialless, l'iFrame est chargé à partir d'un autre contexte vide. Plus précisément, il est chargé sans cookies. L'iFrame commence par un bocal à cookies vide.

De même, les API de stockage telles que LocalStorage, CacheStorage, etc., chargent et stockent les données dans la nouvelle partition éphémère. Cet espace de stockage est effacé une fois le document de premier niveau déchargé. Cela permet de supprimer la restriction COEP.

Consultez cet article pour en savoir plus sur l'utilisation sécurisée de credentialless pour charger du contenu tiers dans vos iFrames.

Et bien plus !

Et bien d'autres choses encore.

Web SQL est désormais supprimé dans les contextes non sécurisés.

La propriété initial-letter CSS permet de définir le nombre de lignes qu'une lettre initiale doit s'insérer dans les lignes de texte suivantes.

FileSystemHandle inclut désormais une méthode remove().

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 110.

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.

Je m'appelle Adriana Jara et dès que Chrome 111 sera disponible, je serai là pour vous faire part des nouveautés de Chrome.