- 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 %.
div
externe existe toujours.
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
etHSLA
, ainsi que les coordonnéesRGB
etRGBA
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, .