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 Fenced Frames fonctionnent avec d'autres API de la Privacy Sandbox pour intégrer du contenu pertinent tout en évitant le partage de contexte inutile.
Avec 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 : ce n'est pas tout.

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

Animations liées au défilement

Les animations liées au défilement sont un modèle d'expérience utilisateur courant sur le Web. Une animation liée au défilement est lié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 associée avance ou recule en réponse directe.

Les exemples suivants illustrent certains cas d'utilisation. Par exemple, vous pouvez créer des indicateurs de lecture qui se déplacent à mesure que vous faites défiler l'écran:

Indicateur de lecture affiché en haut d'un document, accessible par le défilement.

Les animations liées au défilement peuvent également créer des éléments qui apparaissent en fondu à mesure qu'ils s'affichent:

Les images de cette page apparaissent en fondu à mesure qu'elles s'affichent.

Par défaut, une animation associée à un élément est exécutée sur la timeline du document. Son heure d'origine commence à 0 lors du chargement de la page et commence à avancer au fur et à mesure que l'heure de l'horloge progresse. 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 d'animations liées au défilement définit deux nouveaux types de timelines que vous pouvez utiliser:

Scroll Progress Timeline (Timeline de progression de défilement) : timeline associée à la position de défilement d'un conteneur de défilement le long d'un axe particulier.
Afficher la timeline de progression: une 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 la lecture fixé en haut de la fenêtre d'affichage.

<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();
}

Consultez la section Animations de défilement/défilement pour obtenir tous les détails et d'autres exemples.

Cadres cloisonnés

L'initiative Privacy Sandbox vise à concevoir des technologies qui protègent la confidentialité des utilisateurs en ligne et donnent aux développeurs les outils nécessaires pour développer leurs activités numériques.

Bon nombre de ses propositions visent à satisfaire des 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 à des données intersites non partitionnées dans un environnement sécurisé.

Pour préserver la confidentialité, certaines de ces API nécessitent une nouvelle méthode d'intégration du contenu. Cette solution s'appelle un frame cloisonné.

Les cadres cloisonnés fonctionnent en combinaison avec d'autres propositions de la Privacy Sandbox pour afficher les documents de différentes partitions de stockage sur une seule page.

Un frame cloisonné est un élément HTML pour un contenu intégré, similaire à un iFrame. Contrairement aux iFrames, un frame cloisonné 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 de représentation vectorielle continue.

De même, aucune donnée first party dans le contexte d'intégration ne peut être partagée avec le frame cloisonné.

Sélection	`iframe`	`fencedframe`
Intégrer du contenu	Oui	Oui
Le contenu intégré peut accéder au DOM de contexte d'intégration	Oui	Non
Le contexte de représentation vectorielle continue 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 à des données intersites	Non	Oui (selon le cas d'utilisation)

Par exemple, supposons que news.example (le contexte d'intégration) intègre une annonce de shoes.example dans un frame cloisonné. news.example ne peut pas exfiltrer les données de l'annonce shoes.example, et shoes.example ne peut pas apprendre les données first party à partir de news.example.

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

Consultez ces articles pour obtenir de la documentation sur Fenced Frames, l'API Protected Audience, le stockage partagé et plus encore.

API Topics

Auparavant, des cookies tiers et d'autres mécanismes ont été utilisés pour suivre le comportement de navigation des internautes sur les sites afin d'identifier les centres d'intérêt. Ces mécanismes sont abandonnés dans le cadre de l'initiative Privacy Sandbox.

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

L'API Topics permet d'utiliser la publicité ciblée par centres d'intérêt sans suivre les sites consultés par un 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" pour un utilisateur qui consulte le site Web knitting.example.

Les thèmes sont un signal pour aider les plates-formes ad tech à 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 ni sur son activité de navigation.

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

Et bien plus !

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

La taille maximale d'un WebAssembly.Module sur le thread principal passe à 8 mégaoctets
La propriété CSS display accepte désormais plusieurs mots clés en tant que valeur, en plus des anciens mots clés précomposés.
Une phase d'évaluation est disponible pour l'API Compute Pressure. Elle fournit des informations générales sur l'état actuel du matériel de l'appareil.

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

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 116, je serai là pour vous dire quelles sont les nouveautés de Chrome !