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

Nouveautés de Chrome 115

Adriana Jara

Voici les informations à retenir :

Utilisez ScrollTimeline et ViewTimeline pour créer des animations liées au défilement qui améliorent l'expérience utilisateur.
Les cadres clôturés fonctionnent avec d'autres API Privacy Sandbox pour intégrer du contenu pertinent tout en empêchant le partage de contexte inutile.
Grâce à l'API Topics, le navigateur peut partager avec des tiers des informations sur les centres d'intérêt d'un utilisateur tout en préservant la confidentialité.
Et ce n'est pas tout : bien d'autres fonctionnalités sont disponibles.

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

Animations basées sur le défilement

Les animations basées sur le défilement sont un modèle UX courant sur le Web. Une animation liée au défilement est associée à la position de défilement d'un conteneur de défilement. Cela signifie que lorsque vous faites défiler l'écran vers le haut ou vers le bas, l'animation liée avance ou recule en réponse directe.

Les exemples suivants illustrent quelques cas d'utilisation. Vous pouvez par exemple créer des indicateurs de lecture qui se déplacent lorsque vous faites défiler l'écran:

Indicateur de lecture au-dessus d'un document, basé sur le défilement.

Les animations liées au défilement peuvent également créer des éléments qui apparaissent progressivement à l'écran:

Les images de cette page apparaissent progressivement.

Par défaut, une animation associée à un élément s'exécute sur la timeline du document. Son heure d'origine commence à 0 lorsque la page se charge et commence à avancer au fur et à mesure que le temps passe. Il s'agit de la timeline d'animation par défaut et, jusqu'à présent, elle était la seule que vous pouviez utiliser.

La spécification des animations liées au défilement définit deux nouveaux types de timelines que vous pouvez utiliser:

Timeline de progression de défilement: timeline liée à la position de défilement d'un conteneur de défilement le long d'un axe particulier.
Timeline de progression d'affichage: timeline liée à la position relative d'un élément particulier dans son conteneur de défilement.

Voici un exemple de code qui utilise une timeline de progression de défilement anonyme pour créer un indicateur de progression de lecture fixé en haut du viewport.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Pour obtenir plus d'informations et d'autres exemples, consultez la section sur les animations de défilement d'entraînement.

Cadres cloisonnés

La Privacy Sandbox est une initiative qui vise à créer des technologies qui protègent la confidentialité des utilisateurs en ligne, tout en fournissant aux développeurs des outils leur permettant d'assurer la croissance de leurs activités numériques.

Bon nombre de ses propositions visent à répondre aux cas d'utilisation intersites sans cookies tiers ni autres mécanismes de suivi. Exemple :

L'API Protected Audience: permet de diffuser des annonces par centres d'intérêt tout en protégeant la confidentialité.
Stockage partagé: permet d'accéder aux données intersites non partitionnées dans un environnement sécurisé.

Pour des raisons de confidentialité, certaines de ces API nécessitent un nouveau moyen d'intégrer du contenu. La solution est appelée un cadre cloisonné.

Les cadres clôturés fonctionnent avec d'autres propositions du Privacy Sandbox pour afficher des documents provenant de différentes partitions de stockage sur une seule page.

Un frame clôturé est un élément HTML pour le contenu intégré, semblable à un iFrame. Contrairement aux iFrames, un frame clôturé limite la communication avec son contexte d'intégration pour permettre au frame d'accéder aux données intersites sans les partager avec le contexte d'intégration.

De même, les données first party dans le contexte de la représentation vectorielle continue ne peuvent pas être partagées avec la trame cloisonnée.

Fonctionnalité	`iframe`	`fencedframe`
Intégrer du contenu	Oui	Oui
Le contenu intégré peut accéder au DOM du contexte d'intégration	Oui	Non
Le contexte d'intégration peut accéder au DOM du contenu intégré	Oui	Non
Attributs observables, tels que `name`	Oui	Non
URL (`http://example.com`)	Oui	Oui (selon le cas d'utilisation)
Source opaque gérée par le navigateur (`urn:uuid`)	Non	Oui
Accès aux données intersites	Non	Oui (selon le cas d'utilisation)

Par exemple, supposons que news.example (le contexte d'embedding) intègre une annonce de shoes.example dans un cadre clôturé. news.example ne peut pas exfiltrer de données de l'annonce shoes.example, et shoes.example ne peut pas apprendre de données first party auprès de news.example.

Comparaison de l'état avant et après le partitionnement de l'espace de stockage.

Consultez ces articles pour en savoir plus sur les cadres délimités, l'API Protected Audience, Shared Storage et plus encore.

API Topics

Par le passé, les cookies tiers et d'autres mécanismes ont été utilisés pour suivre le comportement de navigation des utilisateurs sur les différents sites afin d'en déduire leurs centres d'intérêt. Ces mécanismes sont progressivement abandonnés dans le cadre de l'initiative Privacy Sandbox.

L'API Topics permet à un navigateur de partager des informations avec des tiers sur les centres d'intérêt d'un utilisateur tout en préservant la confidentialité.

L'API Topics permet de diffuser des annonces ciblées par centres d'intérêt sans suivre les sites consultés par l'utilisateur. Le navigateur observe et enregistre les sujets qui semblent intéresser l'utilisateur en fonction de son activité de navigation. Ces informations sont enregistrées sur l'appareil de l'utilisateur.

Par exemple, l'API peut suggérer le thème "Fiber & Textile Arts" à un utilisateur qui consulte le site Web knitting.example.

Les thèmes permettent aux plates-formes ad tech de sélectionner des annonces pertinentes. Contrairement aux cookies tiers, ces informations sont partagées sans révéler d'autres informations sur l'utilisateur lui-même ou sur son activité de navigation.

Consultez la présentation de la Privacy Sandbox pour en savoir plus sur la taxonomie des thèmes et l'utilisation de l'API Topics.

Et bien plus !

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

La taille maximale d'un WebAssembly.Module sur le thread principal est passée à 8 mégaoctets.
La propriété CSS display accepte désormais plusieurs mots clés comme valeur, en plus des anciens mots clés précomposés.
Un essai Origin est disponible pour l'API Compute Pressure, qui fournit des informations générales sur l'état actuel du matériel de l'appareil.

Documentation complémentaire

Cela ne couvre que certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications apportées à Chrome 115.

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.

Bonjour Adriana Jara. Dès la sortie de Chrome 116, je serai là pour vous présenter les nouveautés de Chrome.