- 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 sur les performances à l'aide d'en-têtes HTTP.
- La nouvelle propriété CSS
display: contents
peut faire disparaître les cases.
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.
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 %.
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.
- La syntaxe permettant de spécifier les coordonnées
HSL
etHSLA
, ainsi que les coordonnéesRGB
etRGBA
pour la propriété de couleur correspond désormais à la spécification CSS Couleur 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 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 !