Nouveautés de Chrome 65

Pete LePage

• L'API CSS Paint vous permet de générer une image de manière programmatique.
• L'API Server Timing permet aux serveurs Web de fournir des informations de durée de performances via des en-têtes HTTP.
• la nouvelle propriété CSS display: contents peut faire disparaître les zones.

Et ce n'est pas tout ! Ce n'est pas tout !

Je m'appelle Pete LePage. Entrons maintenant dans le vif du sujet et découvrons les nouveautés de Chrome 65 pour les développeurs.

Vous souhaitez consulter la liste complète des modifications ? Consultez la liste des modifications du dépôt de sources Chromium.

API CSS Paint

L'API CSS Paint vous permet de générer une image de manière automatisée pour les propriétés CSS telles que background-image ou border-image.

Au lieu de référencer une image, vous pouvez utiliser la nouvelle fonction Paint pour dessiner l'image, comme avec un élément de canevas.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

Par exemple, au lieu d'ajouter des éléments DOM supplémentaires pour créer l'effet d'ondulation sur un bouton de style Material, vous pouvez utiliser l'API Paint.

Il s'agit également d'une méthode efficace de polyfill des fonctionnalités CSS qui ne sont pas encore compatibles avec les navigateurs.

Surma a publié un excellent post avec plusieurs démonstrations dans son explication.

API Server Timing

Nous espérons que vous utilisez les API de navigation et de temps de ressources pour suivre les performances de votre site pour les utilisateurs réels. Jusqu'à présent, il n'existait pas de moyen simple pour le serveur de générer des rapports sur la durée des performances.

La nouvelle API Server Timing permet à votre serveur de transmettre des informations de synchronisation au navigateur, ce qui vous donne une meilleure idée de vos performances globales.

Vous pouvez suivre autant de métriques que vous le souhaitez: temps de lecture de la base de données, temps de démarrage ou tout ce qui est important pour vous, en ajoutant un en-tête Server-Timing à votre réponse:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

Elles sont affichées dans les outils pour les développeurs Chrome, ou vous pouvez les extraire de l'en-tête de réponse et les enregistrer avec vos autres analyses de performances.

display: contents

La nouvelle propriété CSS display: contents est assez élégante !

Lorsqu'ils sont ajoutés à un élément de conteneur, tous les enfants prennent leur place dans le DOM et disparaissent essentiellement. Imaginons que j'ai deux div, l'un à l'intérieur de l'autre. Mon div externe a une bordure rouge, un arrière-plan gris et j'ai défini une largeur de 200 pixels. Le div interne présente une bordure bleue et un arrière-plan bleu clair.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

Par défaut, la div interne est contenue dans la div externe.

Je suis le <div> intérieur

L'ajout de display: contents au div externe fait disparaître le div externe et que ses contraintes ne sont plus appliquées au div interne. La largeur de la div interne est désormais de 100 %.

Utilisez les outils de développement pour inspecter le DOM et notez que le div externe existe toujours.

Cela peut être utile dans de nombreux cas, mais le plus courant concerne les appareils Flexbox. Avec flexbox, seuls les enfants immédiats d'un conteneur flexible deviennent des éléments flexibles.

Toutefois, une fois que vous avez appliqué display: contents à un enfant, ses enfants deviennent des éléments flexibles et sont disposés selon les mêmes règles que celles appliquées à leur parent.

Consultez l'excellent article de Rachel Andrew intitulé Vanishing box with display content (Vanishing Box avec un contenu d'affichage) pour en savoir plus et voir d'autres exemples.

Et plus encore

Ce ne sont là que quelques-unes des modifications apportées à Chrome 65 pour les développeurs. Bien entendu, il y en a bien d'autres.

• La syntaxe permettant de spécifier HSL et HSLA, ainsi que les coordonnées RGB et RGBA pour la propriété de couleur correspond désormais à la spécification CSS Color 4.
• Une nouvelle règle de fonctionnalité vous permet de contrôler les requêtes XHR synchrones via un en-tête HTTP ou l'attribut iFrame allow.

Consultez la section New in Chrome DevTools (Nouveautés dans les outils pour les développeurs Chrome) pour découvrir les nouveautés de Chrome 65. Si les progressive web apps vous intéressent, regardez la nouvelle série de vidéos PWA Roadshow. Ensuite, cliquez sur le bouton S'abonner sur notre chaîne YouTube. Vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

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