Nouveautés de Chrome 65

Et ce n'est pas tout : beaucoup plus !

Je m'appelle Pete LePage. C'est parti pour découvrir les nouveautés de Chrome 65 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.

API CSS Paint

L'API CSS Paint vous permet de générer par programmation une image 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, un peu comme 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 stylisé Material, vous pouvez utiliser l'API Paint.

Il s'agit également d'une méthode efficace pour émuler des fonctionnalités CSS qui ne sont pas encore prises en charge dans un navigateur.

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 gestion des ressources pour suivre les performances de votre site pour les utilisateurs réels. Jusqu'à présent, le serveur n'avait pas de moyen simple de créer un rapport sur la chronologie de ses performances.

La nouvelle API Server Timing permet à votre serveur de transmettre des informations de synchronisation au navigateur. Vous bénéficiez ainsi d'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 s'affichent dans les outils pour les développeurs Chrome. Vous pouvez aussi 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 soignée.

Lorsqu'ils sont ajoutés à un élément de conteneur, tous les éléments enfants prennent sa place dans le DOM et disparaissent essentiellement. Imaginons que j'ai deux div, l'un à l'intérieur de l'autre. Mon div extérieur a une bordure rouge, un arrière-plan gris, et j'ai défini une largeur de 200 pixels. L'élément div intérieur a 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 l'âme sœur <div>

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

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

Cela peut s'avérer utile dans de nombreux cas, mais le plus courant concerne le Flexbox. Avec Flexbox, seuls les enfants immédiats d'un conteneur flexible deviennent des éléments Flex.

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 qui auraient été appliquées à leur parent.

Consultez l'excellent post de Rachel Andrew intitulé Vanishing box with display content (Boîtes de rangement avec contenu d'affichage) pour plus de détails et d'autres exemples.

Et bien plus !

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

Consultez la page Nouveautés des outils pour les développeurs Chrome pour découvrir les nouveautés de Chrome 65. Si les progressive web apps vous intéressent, consultez la nouvelle série de vidéos PWA Roadshow. Cliquez ensuite sur le bouton S'abonner sur notre chaîne YouTube. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera mise en ligne.

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