La propriété font-display
(pour laquelle on devrait plutôt parler de "descripteur pour font-face" comme mentionné dans l'article) permet d'indiquer au browser quoi afficher le temps qu'il télécharge les webfonts de la page.
Un outil de Mozilla pour apprendre à utiliser les grilles CSS.
Un outil CSS-only pour noter (donner une note) de 1 à 5 étoiles.
Quel CSS peut-on utiliser pour le design de mails.
Un workaround CSS pour ne pas avoir de valeur inattendue dans le event.target
d'un event handler en Javascript quand vous l'attachez à un élément plus haut dans le DOM.
Ça fait un peu bizarre de devoir mêler ainsi du CSS et du JS mais pourquoi pas. Attention au support navigateur par contre.
:focus-within
permet de styliser un élément qui contient un élément qui a focus.
Changer la couleur du curseur d'insertion de texte.
Une lib pour répartir une liste d’éléments en colonnes automatiquement.
C'est une alternative à jQuery Masonry.
Un outil très intéressant dans Chrome qui permet de mapper un fichier local (par exemple un fichier CSS ou JS) et un fichier distant. Du coup, lors du chargement, le browser charge votre fichier local à la place du fichier distant et le met à jour en temps réel. C'est extrêmement utile pour le CSS notamment.
Plein d'exemples de timelines réalisées en CSS.
Une ode à CSS.
Et je ne peux que plussoyer. CSS est souvent décrié mais il permet de faire des choses tellement incroyables avec un syntaxe des plus simples.
Très ingénieux. Je pense que c'est déjà assez largement utilisé sans qu'on s'en rende compte.
L'idée est de ne pas utiliser d'animations basiques mais plutôt des animations différentes en fonction de l'action qui vient d'être faite.
Si vous avez la flemme de tout lire, les vidéos sont très parlantes.
Via https://mastodon.social/users/stephaniewalter/updates/2406448
Tout ce qu'il faut savoir sur Flexbox ! Il y a des outils pédagogiques, des showcases, des cheat-sheets, etc.
Belle démo d'animation CSS.
Jouer avec les animations CSS en live.
GridLayout arrive tout doucement. Flex a déjà résolu bon nombre de problèmes du passé mais Grid permet de nouvelles choses et renforce la séparation entre structure (HTML) et style (CSS).
Intéressant même si ça n'apporte pas beaucoup plus que la console web qui est déjà très bien faite pour accéder aux propriétés CSS d'un élément HTML.