Nouveautés de Chrome 69

Pete LePage

Dix ans se sont écoulés depuis la première version de Chrome. Beaucoup de choses ont changé depuis, mais notre objectif de créer une base solide pour les applications Web modernes n'a pas changé !

Dans Chrome 69, nous avons ajouté la compatibilité avec les éléments suivants :

  • CSS Scroll Snap vous permet de créer des expériences de défilement fluides et élégantes.
  • Les encoches vous permettent d'utiliser toute la surface de l'écran, y compris l'espace derrière l'encoche.
  • L'API Web Locks vous permet d'acquérir un verrou de manière asynchrone, de le conserver pendant l'exécution du travail, puis de le libérer.

Et ce n'est pas tout ! Découvrez-en plus.

Je suis Pete LePage. Découvrons les nouveautés de Chrome 69 pour les développeurs.

Vous souhaitez consulter la liste complète des modifications ? Consultez la liste des modifications apportées au dépôt source Chromium.

CSS Scroll Snap

CSS Scroll Snap vous permet de créer des expériences de défilement fluides et élégantes en déclarant des positions d'accrochage de défilement qui indiquent au navigateur où s'arrêter après chaque opération de défilement. C'est très utile pour les carrousels d'images ou les sections paginées où vous souhaitez que l'utilisateur fasse défiler la page jusqu'à un point spécifique.

Pour un carrousel d'images, j'ajouterais scroll-snap-type: x mandatory; au conteneur de défilement et scroll-snap-align: center; à chaque image. Ensuite, lorsque l'utilisateur fait défiler le carrousel, chaque image est déplacée en douceur jusqu'à la position idéale.


#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

L'accrochage de défilement CSS fonctionne bien, même lorsque les cibles d'accrochage ont des tailles différentes ou lorsqu'elles sont plus grandes que le défileur. Pour en savoir plus et découvrir des exemples à tester, consultez l'article Well-Controlled Scrolling with CSS Scroll Snap (Défilement bien contrôlé avec CSS Scroll Snap).

Encoches

téléphone mobile avec encoche
Les navigateurs ajoutent une marge supplémentaire sur un appareil mobile avec encoche pour éviter que le contenu ne soit masqué par l'encoche.

Un nombre croissant d'appareils mobiles sont mis sur le marché avec une encoche, parfois appelée "notch". Pour y remédier, les navigateurs ajoutent une petite marge supplémentaire à votre page afin que l'encoche ne masque pas le contenu.

Mais que faire si vous souhaitez utiliser cet espace ?

Grâce aux variables d'environnement CSS et à la balise meta viewport-fit, vous pouvez désormais le faire. Par exemple, pour indiquer au navigateur de s'étendre dans la zone d'encoche, définissez la propriété viewport-fit dans la balise meta viewport sur cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Vous pouvez ensuite utiliser les variables d'environnement CSS safe-area-inset-* pour mettre en page votre contenu.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

Pour en savoir plus, consultez l'excellent article du blog WebKit intitulé Designing Websites for iPhone X (Concevoir des sites Web pour l'iPhone X) ou la présentation.

API Web Locks

L'API Web Locks vous permet d'acquérir un verrou de manière asynchrone, de le conserver pendant l'exécution d'une tâche, puis de le libérer. Tant que le verrou est maintenu, aucun autre script de l'origine ne peut acquérir le même verrou, ce qui permet de coordonner l'utilisation des ressources partagées.

Par exemple, si une application Web s'exécutant dans plusieurs onglets souhaite s'assurer qu'un seul onglet se synchronise avec le réseau, le code de synchronisation tente d'acquérir un verrou nommé network_sync_lock.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

Le premier onglet à acquérir le verrou synchronisera les données avec le réseau. Si un autre onglet tente d'acquérir le même verrou, il sera mis en file d'attente. Une fois le verrouillage levé, la prochaine requête en file d'attente se verra accorder le verrouillage et s'exécutera.

MDN propose une excellente introduction aux verrous Web, qui inclut une explication plus détaillée et de nombreux exemples. Vous pouvez également approfondir vos connaissances et consulter la spécification.

Et bien plus !

Bien sûr, ce ne sont que quelques-uns des changements apportés à Chrome 69 pour les développeurs. Il y en a beaucoup d'autres.

dégradé conique

  • À partir de la spécification CSS4, vous pouvez désormais créer des transitions de couleur autour de la circonférence d'un cercle à l'aide de dégradés coniques. Lea Verou propose un polyfill CSS conic-gradient() que vous pouvez utiliser. La page inclut également de nombreux exemples très intéressants soumis par la communauté.
  • Une nouvelle méthode toggleAttribute() est disponible sur les éléments. Elle permet d'activer ou de désactiver l'existence d'un attribut, comme classList.toggle().
  • Les tableaux JavaScript disposent de deux nouvelles méthodes : flat() et flatMap(). Ils renvoient un nouveau tableau dans lequel tous les éléments des sous-tableaux sont regroupés.
  • OffscreenCanvas déplace le travail du thread principal vers un nœud de calcul, ce qui permet d'éliminer les goulots d'étranglement des performances.

Surprises cachées

Avez-vous trouvé tous les easter eggs de la vidéo ?

Un grand merci à toutes les personnes qui ont contribué à la création des 28 épisodes de Nouveautés de Chrome. Chacune de ces personnes est géniale !

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

Vous voulez voir le chemin parcouru par Nouveautés de Chrome depuis notre premier épisode ? Regardez cette vidéo de 30 secondes qui retrace notre histoire, de notre première vidéo à aujourd'hui.

Et bien sûr, merci de nous avoir regardés et de nous avoir fait part de vos commentaires. Je les lis tous et prends vos suggestions à cœur. Ces vidéos se sont améliorées grâce à vous !

Merci de votre attention !

Nouveautés de Chrome : bêtisier

Nous avons rassemblé quelques-unes de nos plus belles bourdes pour votre plus grand plaisir ! Après l'avoir regardée, j'ai appris plusieurs choses :

  • Quand je me trompe de mot, je fais des bruits étranges.
  • Je fais des grimaces et je tire la langue.
  • Je bouge beaucoup.

S'abonner

Pour ne pas manquer nos vidéos, abonnez-vous à notre chaîne YouTube Chrome Developers. Vous recevrez une notification par e-mail chaque fois que nous publierons une nouvelle vidéo.

Je m'appelle Pete LePage et, dès que Chrome 70 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.