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
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
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.
- À 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()
etflatMap()
. 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 ?
- Bande dessinée sur Chrome
- Bracelets Chromerc
- Canon à pomme de terre
- Pete Monster
- Dinosaure en bois du CDS 2017
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 !