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 déclenchées par le défilement qui améliorent l'expérience utilisateur.
Les cadres délimité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 déclenchées par le défilement sont un modèle d'expérience utilisateur 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. Autrement dit, lorsque vous faites défiler la page vers le haut ou vers le bas, l'animation associée avance ou revient en arrière en réponse directe.

Les exemples suivants illustrent certains 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 est exécutée 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 basées sur le défilement définit deux nouveaux types de timelines que vous pouvez utiliser:

Timeline de progression de défilement: timeline associée à la position de défilement d'un conteneur de défilement sur un axe particulier.
Timeline de progression d'affichage: timeline associé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 en savoir plus et obtenir d'autres exemples, consultez la section Animations de défilement.

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 ciblées 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é.

Afin de préserver la confidentialité, certaines de ces API nécessitent une nouvelle méthode d'intégration de contenu. La solution est appelée "cadre clôturé".

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, aucune donnée first party dans le contexte d'intégration ne peut être partagée avec le frame clôturé.

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 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 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" pour un utilisateur qui visite le site Web knitting.example.

Les thèmes sont un signal qui aide 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 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 Mo.
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

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

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