Nouveautés de Chrome 69

Pete LePage

10 ans se sont écoulées depuis la sortie de Chrome. Beaucoup de choses ont changé depuis, mais notre objectif d'établir une base solide pour les applications Web modernes reste le même.

Dans Chrome 69, nous avons ajouté la compatibilité avec:

  • La fonctionnalité CSS Scroll Snap vous permet de créer des expériences de défilement fluides.
  • Les encoches vous permettent d'utiliser toute la surface de l'écran, y compris l'espace situé derrière l'encoche, parfois appelé "encoche".
  • L'API Web Locks vous permet d'obtenir un verrou de manière asynchrone, de le maintenir pendant l'exécution du travail, puis de le relâcher.

Et ce n'est pas tout : beaucoup plus !

Je m'appelle Pete LePage. C'est parti pour découvrir 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.

Instantané de défilement CSS

Voir la démonstration | Source

La fonctionnalité Instantané de défilement CSS vous permet de créer des expériences de défilement fluides en déclarant des positions d'ancrage de 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'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, le défilement de chaque image se fait de manière fluide jusqu'à la position parfaite.


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

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

L'ancrage de défilement CSS fonctionne bien, même lorsque les cibles d'ancrage ont des tailles différentes ou qu'elles sont plus grandes que le conteneur de défilement. Pour en savoir plus et obtenir des exemples, consultez l'article Défilement bien contrôlé avec CSS Scroll Snap.

Encoches

téléphone mobile avec encoche
Les navigateurs ajoutent une marge supplémentaire aux appareils mobiles dotés d'une encoche pour éviter que du contenu ne soit recouvert par cette encoche.

Le nombre d'appareils mobiles dotés d'une encoche pour écran ne cesse d'augmenter. Pour gérer cela, les navigateurs ajoutent une petite marge supplémentaire à votre page afin que le contenu ne soit pas masqué par l'encoche.

Mais que faire si vous voulez utiliser cet espace ?

Avec les variables d'environnement CSS et la balise Meta viewport-fit, c'est désormais possible. Par exemple, pour indiquer au navigateur de se développer dans la zone d'encoche d'affichage, 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);
}

Il existe un excellent article sur le blog WebKit sur la conception de sites Web pour iPhone X, mais vous pouvez consulter cette explication pour plus de détails.

API Web Locks

L'API Web Locks vous permet d'acquérir un verrou de manière asynchrone, de le maintenir pendant que le travail est effectué, puis de le débloquer. 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 exécutée 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 permettant d'acquérir le verrou 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 verrou libéré, le verrouillage est attribué à la prochaine requête en file d'attente, puis elle est exécutée.

MDN propose un excellent guide de présentation de Web Locks qui comprend une explication plus détaillée et de nombreux exemples. Vous pouvez également aller plus loin et consulter les spec.

Et bien plus !

Ce ne sont là que quelques-unes des modifications apportées à Chrome 69 pour les développeurs, bien sûr, mais 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 d'un cercle à l'aide de dégradés coniques. Lea Verou dispose d'un polyfill CSS conic-gradient() que vous pouvez utiliser. La page comprend tout un tas d'exemples très intéressants envoyés par la communauté.
  • Il existe une nouvelle méthode toggleAttribute() au niveau des éléments, qui permet d'activer/de désactiver l'existence d'un attribut, semblable à classList.toggle().
  • Les tableaux JavaScript reçoivent deux nouvelles méthodes : flat() et flatMap(). Elles renvoient un nouveau tableau dans lequel tous les éléments de sous-tableau sont lissés.
  • OffscreenCanvas déplace les tâches du thread principal vers un nœud de calcul, ce qui permet d'éliminer les goulots d'étranglement qui affectent les performances.

Surprises cachées

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

Un grand merci à toutes les personnes qui ont contribué à la création des 28 épisodes de New in 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 savoir si les nouveautés de Chrome ont progressé depuis notre premier épisode ? Regardez cette amusante vidéo de progression de 30 secondes qui retrace notre histoire de notre première vidéo à aujourd'hui !

Bien sûr, nous vous remercions de votre attention et de vos commentaires. Je les ai tous lus, et j'attache une grande importance à vos suggestions. Ces vidéos se sont améliorées grâce à vous !

Merci de votre attention !

Nouveautés du Bloopers Chrome

Nous avons créé un petit bêtisier amusant pour vous faire plaisir ! Après l'avoir regardée, j'ai appris quelques choses:

  • Quand je trébuche, je fais des bruits étranges.
  • Je fais des grimaces et je tire la langue.
  • Je bouge beaucoup.

S'abonner

Pour suivre l'actualité de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome afin de recevoir une notification par e-mail chaque fois qu'une nouvelle vidéo est mise en ligne.

Je m'appelle Pete LePage et, dès la sortie de Chrome 70, je serai là pour vous dire : quelles sont les nouveautés de Chrome !