Pré-charger les polices de caractère dont on sait à l'avance qu'elles seront utilisées, pour que le navigateur n'attende pas d'avoir chargé le CSS pour les télécharger.
Cette technique permet de limiter les layout shifts provoqués par le remplacement de la police par défaut par la police personnalisée, et d'améliorer le temps de chargement global de la page.
La propriété CSS interpolate-size est un un peu le nouveau box-sizing: border-box; : elle permet de transitioner depuis ou vers un mot clé (auto par exemple) en plus des grandeurs fixes, chose qui a longtemps été impossible avec du pur CSS.
Il suffit de la déclarer à la racine et elle s'applique partout. Mais elle n'est pas activé par défaut pour éviter les régression sur les anciens sites.
L'usage des popover HTML comme alternative à l'attribut title qui n'est ni accessible ni utilisable sur mobile.
Il y a tout de même encore quelques efforts à faire pour le positionnement et l'interactivité.
Un outil pour faciliter l'usage des fonction CSS d' "easing" (aucune idée de comment traduire ça).
Très bien conçu et très sympa esthétiquement, avec cette petite touche néon :)
Initiation aux animations de défilement (scroll animation) en CSS.
La transition CSS à laquelle les développeurs n'osaient même pas rêver pendant de nombreuses années est maintenant possible 🥳
Comment ajouter un thème sombre à votre site et un système permettant de passer de l'un à l'autre facilement avec très peu de JavaScript.
Un effet de verre semi-transparent très sympa en CSS !
Introduction aux View Transitions CSS pour animer nativement la transition entre deux états d'une application web.
La propriété CSS overflow gère la valeur clip qui apporte de la flexibilité.
Il semblerait que CSS ait maintenant son propre logo 🙌
Une introduction hyper didactique aux Container queries CSS et à pourquoi leur adoption est encore faible malgré leur support par plus de 90% des versions de navigateurs.
Un guide très complet sur le sélecteur CSS :has et sur ce que sa puissance permet d'accomplir.
Les petites subtilités du positionnement sticky en CSS et les quelques cas qui peuvent le conduire à un comportement contre-intuitif.
J'ai toujours beaucoup de mal avec les librairies CSS utility-first type Tailwind mais il faut admettre que son argumentation tient la route sur pas mal de points.
Un choix d'organisation intéressant pour CSS. L'idée est de répartir vos classes dans 3 catégories distinctes : le cosmétique (apparence visuelle de vos composants), le layout (les différentes façons d'agencer vos composants) et le spacing (des classes utilitaires pour créer des espaces dans et entre vos composants).
L'approche est que ces 3 catégories soient mutuellement exclusives. Interdiction de mettre du margin ou du display dans la catégorie cosmétique par exemple.
Vous construisez ensuite votre site en piochant dans les différentes classes disponibles. Ça favorise la réutilisabilité et l'harmonie.
C'est une philosophie qu'on peut placer à mi-chemin entre le CSS vanilla et les frameworks utilitaires type Tailwind.
Douze propriétés CSS modernes à connaître pour résoudre des problèmes autrefois difficiles à contourner.
De la difficulté de centrer des trucs dans d'autres trucs. Délicieux à lire 🤗
Le layout CSS de type "masonry" (une grille d'éléments de taille différentes, sans gap) pourrait arriver un jour nativement dans CSS.