Toujours bon à prendre :)
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.
Moult frameworks d'animations CSS.
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.
Visiblement il s'agit plus de Selectors Module Level 4 que de CSS4 à proprement parler mais ça donne quand même une bonne vision de ce qu'il serait possible de faire en CSS dans les années à venir.
Flexbox expliqué en GIF animé.
Le dessin en CSS pour les nuls.
Une saine lecture. C'est du classique mais il est toujours bon de rappeler les possibilités offertes par CSS. Bon par contre, n'abusez pas de sélecteurs ultra compliqués. Même s'il est possible de faire des choses assez complexes, ça ne veut pas dire que c'est judicieux. En ce qui me concerne, les sélecteurs avancés me sont surtout utiles quand je dois customiser du code HTML sur lequel je n'ai pas la main.
Juste une petite rectification sur l'article :after et :before sont des pseudo-éléments et pas des pseudo-classes.
Par contre quand je vois ce type d'articles je m'interroge toujours sur les performances de chaque sélecteur. Je me doute qu'à moins d'y aller comme un bourrin, les différences en perf sont négligeables mais si quelqu'un a un comparatif ça m'intéresse.