Nouveautés de Chrome 65

Pete LePage

• L'API CSS Paint vous permet de générer par programmation une image.
• L'API Server Timing permet aux serveurs Web de fournir les informations de temps sur les performances via des en-têtes HTTP.
• la nouvelle propriété CSS display: contents les boîtes disparaissent !

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 le Liste des modifications du dépôt source Chromium.

API CSS Paint

L'API CSS Paint vous permet d'effectuer les opérations suivantes : générer une image par programmation 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 dessine 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 créer l'effet d'ondulation sur un bouton Material, vous pouvez utiliser l'API Paint.

Il s'agit également d'une méthode efficace de polyfilling pour les fonctionnalités CSS non compatibles 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 planification des ressources pour suivre les performances de votre site pour les vrais utilisateurs. Jusqu'à présent, la plate-forme moyen pour le serveur de créer des rapports sur la durée des performances.

La nouvelle API Server Timing permet d' pour transmettre les 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 la réponse et enregistrez-les 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 elle disparaît. Imaginons que j'ai deux div, un à l'intérieur de 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.

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

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

Toutefois, une fois que vous appliquez display: contents à un enfant, celui-ci devient flexible. et sont disposées selon les mêmes règles que celles qui auraient été appliquées leurs parents.

Consultez l'excellent post de Rachel Andrew. Magasin de vitre présentant du contenu à afficher pour obtenir plus de détails et d'autres exemples.

Et bien plus !

Ce ne sont là que quelques-unes des modifications apportées aux développeurs dans Chrome 65 il y en a bien d'autres.

• Syntaxe permettant de spécifier les coordonnées HSL et HSLA, ainsi que les coordonnées RGB et RGBA pour la propriété "color" correspondent aux Spécifications CSS Color 4
• Une nouvelle règle de fonctionnalité permet de contrôler des requêtes XHR synchrones via un en-tête HTTP ou allow de l'iFrame.

N'oubliez pas de consulter la section Nouveautés des outils pour les développeurs Chrome, pour découvrir les nouveautés des outils de développement dans Chrome 65. Et, si vous souhaitez les progressive web apps, découvrez les nouvelles Série de vidéos PWA Roadshow. Ensuite, cliquez sur le bouton S'abonner 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 la sortie de Chrome 66, .