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

Je m'appelle Adriana Jara. Voyons ce que Chrome 110 a de nouveau à offrir aux 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.

Membre du fichier manifeste launch_handler.

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

Prenons un exemple: dans les environnements pour ordinateur, si vous installez une application, puis y accédez dans le navigateur, un bouton vous 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.

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 a bien d'autres choses.

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.