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 les iFrames pour intégrer du contenu tiers qui ne définit pas de règle pour l'intégrateur multi-origines
  • Et ce n'est pas tout : bien d'autres fonctionnalités sont disponibles.

Je m'appelle Adriana Jara. Intéressons-nous maintenant aux nouveautés de Chrome 110 pour les développeurs.

Pseudo-classe :picture-in-picture

Grâce à l'API Picture-in-picture, les sites Web peuvent créer une fenêtre vidéo flottante, toujours en haut de l'écran pour que les utilisateurs continuent de consommer des contenus multimédias tout en interagissant avec d'autres contenus.

Avec la pseudo-classe CSS :picture-in-picture, vous pouvez désormais ajouter des styles aux éléments pour améliorer l'expérience.

L'extrait de code ci-dessous montre comment utiliser la classe Picture-in-Picture pour ajouter un message au conteneur vidéo qui rappelle à l'utilisateur que la vidéo est maintenant diffusée 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;
}

Utilisez à nouveau la pseudo-classe sur l'élément vidéo pour le rendre transparent et afficher correctement le message.

Testez cet exemple et améliorez vos expériences vidéo en mode 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, vous pouvez choisir d'utiliser une fenêtre existante ou une nouvelle fenêtre, et d'accéder à l'URL de lancement dans la fenêtre choisie.

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

Les applications Web peuvent désormais personnaliser leur comportement de lancement à l'aide du membre de fichier manifeste launch_handler.

Par exemple, l'extrait de code ci-dessous fait en sorte que tous les lancements de cette application Web se concentrent sur une fenêtre d'application existante et y accèdent (s'il existe) au lieu de lancer toujours une nouvelle fenêtre.

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

credentialless iFrames.

L'un des plus grands défis de l'isolation entre origines multiples est que toutes les iFrames entre origines multiples doivent déployer 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ée à partir d'un autre contexte vide. En particulier, il est chargé sans cookies. L'iFrame commence avec un cookie jar vide.

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

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

Et bien plus !

Et bien sûr, il y en a bien d'autres.

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

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

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

Documentation complémentaire

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

S'abonner

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

Je m'appelle Adriana Jara. Dès que Chrome 111 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.