Nouveautés de Chrome 69

Pete LePage

Chrome a été lancé il y a 10 ans. Beaucoup de choses ont changé depuis, mais notre objectif d'établir une base solide pour les applications Web modernes n'a pas changé !

Dans Chrome 69, nous avons ajouté la prise en charge des é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 zone de l'écran, y compris l'espace situé derrière l'encoche (parfois appelée "encoche").
  • L'API Web Locks vous permet d'acquérir de manière asynchrone un verrouillage, de le maintenir pendant l'exécution de la tâche, puis de le libérer.

Et ce n'est pas tout ! En savoir plus

Je m'appelle Pete LePage. Entrons dans le vif du sujet et 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

Voir la démonstration | Source

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

Pour un carrousel d'images, j'ajoute 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 de manière fluide jusqu'à la position idéale.


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

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

Le forçage de défilement CSS fonctionne bien, même lorsque les cibles de forçage ont des tailles différentes ou lorsqu'elles sont plus grandes que le défileur. Pour en savoir plus et découvrir des exemples, consultez l'article Well-Controlled Scrolling with CSS Scroll Snap.

Encoches

téléphone mobile avec découpe de l'écran
Les navigateurs ajoutent une marge supplémentaire sur un appareil mobile doté d'une encoche pour éviter que le contenu ne soit masqué par celle-ci.

Un nombre croissant d'appareils mobiles est lancé avec une encoche, parfois appelée encoche. Pour y remédier, les navigateurs ajoutent une petite marge supplémentaire à votre page afin que le contenu ne soit pas masqué par la découpe.

Mais que faire si vous souhaitez utiliser cet espace ?

C'est désormais possible avec les variables d'environnement CSS et la balise Meta viewport-fit. Par exemple, pour indiquer au navigateur de se développer dans la zone de découpe de l'écran, définissez la propriété viewport-fit dans la balise méta 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);
}

Vous trouverez un excellent article sur le blog WebKit concernant la conception de sites Web pour iPhone X. Vous pouvez également consulter l'explication pour plus de détails.

API Web Locks

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

Par exemple, si une application Web exécutée dans plusieurs onglets souhaite s'assurer qu'un seul onglet se synchronise sur 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 verrouillage synchronise les données avec le réseau. Si un autre onglet tente d'acquérir le même verrou, il est mis en file d'attente. Une fois le verrouillage levé, le verrouillage est accordé à la prochaine requête mise en file d'attente et exécuté.

MDN propose un excellent tutoriel sur les serrures Web, qui comprend une explication plus détaillée et de nombreux exemples. Vous pouvez également approfondir vos connaissances en consultant les spécifications.

Et bien plus !

Ce ne sont là que quelques-unes des modifications apportées à Chrome 69 pour les développeurs. Bien entendu, il y en a bien 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 un grand nombre d'exemples très intéressants envoyés par la communauté.
  • Une nouvelle méthode toggleAttribute() est disponible pour les éléments qui activent ou désactivent l'existence d'un attribut, comme classList.toggle().
  • Les tableaux JavaScript bénéficient de deux nouvelles méthodes : flat() et flatMap(). Ils renvoient un nouveau tableau dans lequel tous les éléments du sous-tableau 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 merci spécial à toutes les personnes qui ont contribué à la réalisation des 28 épisodes de Nouveautés dans 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 à quel point les nouveautés de Chrome ont évolué depuis notre premier épisode ? Regardez cette vidéo de progression amusante de 30 secondes qui retrace notre histoire depuis notre première vidéo jusqu'à aujourd'hui.

Et bien sûr, merci d'avoir regardé cette vidéo et de nous avoir fait part de vos commentaires. Je les ai tous lus et je prends vos suggestions très au sérieux. Ces vidéos se sont améliorées grâce à vous !

Merci de votre attention !

Nouveautés de Chrome : les gaffes

Nous avons réalisé une petite vidéo amusante avec les images "bloopers". Après l'avoir regardé, j'ai appris quelques points:

  • Lorsque je craque pour mes mots, je fais des bruits étranges.
  • Je fais des grimaces et je tire la langue.
  • Je bouge beaucoup.

S'abonner

Si vous souhaitez rester informé de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès la sortie de Chrome 70, je serai là pour vous présenter les nouveautés de Chrome.