Ce billet de CSS-Tricks explore comment exploiter la relation parent-enfant en CSS pour créer des animations efficaces et simplifiées. L’idée centrale est d’animer le conteneur parent plutôt que chaque enfant individuellement, ce qui réduit la complexité du code et améliore les performances.

L’exemple principal utilise un conteneur <main> contenant quatre cercles positionnés absolument. En appliquant une rotation et une réduction de largeur au parent, les cercles se déplacent et s’animent automatiquement, car leur position dépend de celle du parent. L’article montre aussi comment combiner des transformations (comme skew, rotate, scale) sur le parent et les enfants pour obtenir des effets visuels variés, comme des carrés qui s’échangent ou se séparent.

L’approche est particulièrement utile pour des animations simples et synchronisées, où les transformations du parent influencent directement le comportement des enfants. L’article propose également des variantes avec des éléments <details> pour déclencher les animations via des interactions utilisateur. Une astuce pratique pour des animations fluides et faciles à maintenir !

L’article présente la propriété CSS field-sizing: content, qui permet de dimensionner dynamiquement les champs de formulaire (comme les <select> ou <input>) en fonction de leur contenu, sans recourir à JavaScript. Actuellement supportée uniquement par Chrome, cette propriété offre une solution élégante pour adapter la largeur des champs à leur contenu, tout en respectant les placeholders comme largeur minimale. L’auteur illustre son utilité à travers plusieurs cas d’usage : interfaces conversationnelles (formulaires plus naturels), pagination (menus déroulants adaptés), saisie d’URL (champs de sous-domaines ou identifiants), ou encore sections héroïques avec filtres dynamiques. L’article souligne aussi l’importance de définir des largeurs minimales et maximales pour éviter les problèmes d’affichage, et encourage son adoption comme amélioration progressive, compatible avec les navigateurs ne la supportant pas encore. Une propriété prometteuse pour des designs plus fluides et intuitifs.

Eric Meyer explore dans ce billet une méthode pour transformer des parenthèses en notes latérales (asidenotes) à l’aide uniquement de HTML et CSS, en s’appuyant sur la fonctionnalité d’ancrage CSS (anchor()). Il explique son approche : marquer le texte parenthétique avec une classe, ajouter un élément pour le marqueur, puis utiliser des styles conditionnels pour repositionner le texte en note latérale dans les navigateurs compatibles. Malgré un résultat visuel satisfaisant, il souligne les limites de cette méthode — notamment la nécessité d’ajouter du balisage superflu et l’impossibilité de supprimer proprement les parenthèses ou de gérer automatiquement la ponctuation finale sans JavaScript. Il conclut que cette solution, bien qu’intéressante, n’est pas viable pour une utilisation réelle, et évoque une approche alternative utilisant des éléments personnalisés et le Light DOM pour une prochaine publication.

Josh W. Comeau explique comment la fonction CSS linear() permet de créer des animations avancées (ressorts, rebonds, etc.) directement en CSS, sans dépendre de bibliothèques JavaScript. Contrairement aux courbes de Bézier traditionnelles, linear() utilise une série de points pour dessiner une courbe d'animation personnalisée, offrant ainsi plus de flexibilité. L'article présente des outils comme Linear() Easing Generator et EasingWizard pour générer automatiquement ces valeurs, optimisant ainsi la création d'animations fluides et naturelles. Cependant, cette approche a des limites : elle reste basée sur le temps (contrairement aux animations physiques réelles), peut mal gérer les interruptions, et nécessite beaucoup de points pour un rendu réaliste. Malgré cela, les tests montrent un impact minimal sur les performances. L'auteur recommande d'utiliser des variables CSS pour stocker les fonctions linear() et de prévoir des alternatives pour les navigateurs non compatibles. Une méthode efficace pour enrichir les animations CSS tout en respectant les préférences utilisateur (comme prefers-reduced-motion).

Ahmad Shadeed explore dans cet article comment construire une mise en page de section moderne et dynamique en CSS, en s’appuyant sur des techniques avancées comme les container queries, le sélecteur :has(), la fonction clamp(), et les unités de requête de conteneur (cqw). Il propose une solution pour adapter automatiquement la disposition d’une section (en-tête + grille de cartes) selon le nombre d’éléments, en évitant les orphelins visuels et en optimisant l’espace. L’auteur détaille aussi l’utilisation de la typographie fluide, des layouts responsives pour les cartes, et des styles conditionnels (par exemple, si une image est absente). Des astuces comme display: contents pour intégrer l’en-tête dans la grille ou random() pour des bordures aléatoires (expérimental) sont également présentées. Une démonstration pratique et des exemples de code illustrent chaque concept, montrant comment le CSS moderne permet de créer des designs flexibles et adaptatifs sans JavaScript.

Andy Clarke explore dans cet article comment les animations ambiantes, discrètes et lentes, peuvent enrichir l’identité visuelle et la narration d’un site web sans distraire l’utilisateur. À travers trois études de cas (Reuven Herman, Mike Worth et EPD), il illustre des techniques concrètes : morphing de chemins SVG, superposition de mouvements pour créer de la profondeur, interactions subtiles et respect des préférences d’accessibilité (comme prefers-reduced-motion). Ces animations, réalisées avec CSS ou GSAP, transforment des éléments statiques en expériences vivantes, tout en restant en arrière-plan. L’article met l’accent sur l’optimisation des SVGs, la performance et l’intégration harmonieuse du mouvement dans le design, prouvant que même dans des secteurs traditionnels, l’animation peut renforcer une marque sans dominer le contenu.

L’article explore les possibilités créatives offertes par la propriété CSS shape-outside, qui permet de faire épouser le flux de texte aux contours d’une image ou d’une forme personnalisée, au lieu de se limiter à un rectangle classique. L’auteur illustre son propos avec des exemples concrets, comme un site web pour une artiste de country fictive, Patty Meltt. Il montre comment utiliser shape-outside pour créer des mises en page dynamiques et immersives : text wrapping autour de portraits, d’instruments de musique, ou même de montages photo, en jouant avec les canaux alpha des images ou des clip-path. L’article détaille aussi des astuces pour simuler un centrage d’image ou contourner les limites des rotations CSS. L’objectif ? Rendre les longs contenus visuellement plus engageants et moins statiques, en intégrant images et texte dans une composition harmonieuse. Des exemples interactifs sont disponibles dans un lab en ligne pour expérimenter ces techniques. Une lecture inspirante pour les designers et développeurs web cherchant à ajouter du mouvement et de la personnalité à leurs layouts.

John Rhea explique comment il a recréé l’animation du bouton Google Gemini de Gmail en utilisant uniquement du CSS, notamment la fonction shape() et des animations. L’animation originale montre une étoile à quatre branches qui tourne et une forme extérieure se transformant entre plusieurs formes (fleur, cylindre, hexagone, cercle) tout en tournant. Rhea détaille sa méthode : il a dessiné les cinq formes dans un logiciel vectoriel, veillant à ce qu’elles aient le même nombre de points d’ancrage pour permettre une interpolation fluide entre elles. Il a ensuite converti ces formes en syntaxe CSS shape(), défini des variables CSS pour chaque forme, et utilisé des transitions et des @keyframes pour animer la rotation, le changement de couleur et la morphose entre les formes. Le résultat final reproduit fidèlement l’effet visuel du bouton Gmail, avec une approche purement CSS et sans JavaScript. Un projet ludique qui met en lumière les possibilités créatives des nouvelles fonctionnalités CSS.

L’article s’intéresse à la fonctionnalité CSS la plus décriée selon le State of CSS 2025 : les fonctions trigonométriques, notamment sin() et cos(). Pourtant, ces fonctions offrent des usages pratiques et créatifs, comme la création de dispositions circulaires (placer des éléments autour d’un cercle), des layouts ondulés (effets de vagues ou entrelacs), ou encore des animations amorties (mouvements réalistes de ressorts ou de pendules). L’auteur explique leur principe via le cercle unité et montre comment les utiliser en CSS pour des effets visuels dynamiques, sans recourir à des valeurs magiques. L’objectif ? Réconcilier les développeurs avec ces outils souvent perçus comme complexes, mais en réalité puissants et accessibles. Une invitation à explorer leur potentiel au-delà des préjugés !

Ce tutoriel explique l’utilité des pseudo-classes fonctionnelles en CSS pour cibler des éléments de manière plus efficace et lisible :

• :is() : Permet de regrouper plusieurs sélecteurs (logique OU) pour appliquer les mêmes styles, réduisant la redondance.
  Exemple : :is(h1, h2, h3) { color: [#333](https://raphael.salique.fr/liens/./add-tag/333); }

• :not() : Exclut un élément d’une sélection, utile pour appliquer des styles à tous sauf à quelques exceptions.
  Exemple : li:not(:last-child) { border-bottom: 1px solid [#ccc](https://raphael.salique.fr/liens/./add-tag/ccc); }

• :where() : Similaire à :is(), mais avec une spécificité nulle, idéal pour des styles de base facilement surchargeables.
  Exemple : :where(header, main, footer) { margin: 1rem 0; }

• :has() : Cible un élément parent en fonction de ses descendants, une nouveauté puissante pour des sélections contextuelles.
  Exemple : article:has(img) { border: 2px solid red; }

Ces sélecteurs améliorent la concision et la maintenabilité du code CSS.

Dans cet article, Andy Clarke explore le concept d’animations ambiantes : des mouvements subtils et lents qui apportent de la vie à un design sans distraire l’utilisateur. Contrairement aux animations interactives ou narratives, les animations ambiantes se fondent dans l’arrière-plan, créant une atmosphère discrète mais immersive. Clarke illustre son propos en transformant une couverture de comic book statique en une animation CSS/SVG où les éléments (plumes, fumée, expressions) s’animent de manière naturelle et presque imperceptible. L’objectif ? Renforcer la personnalité d’une marque ou d’un projet sans nuire à l’expérience utilisateur, en privilégiant des transitions douces, des boucles fluides et une approche minimaliste.

L’auteur partage des conseils pratiques : privilégier les éléments qui bougeraient naturellement (feuilles, fumée, ombres), éviter les mouvements brusques, et respecter les préférences utilisateur (comme le mode prefers-reduced-motion). Il insiste sur l’importance de la modération et de la performance, en utilisant des SVG bien structurés et du CSS optimisé. Un exemple concret et un démo CodePen accompagnent l’article, montrant comment ces micro-interactions, bien dosées, ajoutent de la profondeur et du charme à un design.

Josh W. Comeau analyse la nouvelle règle CSS @starting-style, qui permet d’utiliser des transitions pour animer l’apparition d’éléments (ex: fondu, déplacement), là où on utilisait avant des @keyframes.

Le piège :
Contrairement aux @keyframes, les styles définis dans @starting-style ne sont pas prioritaires et peuvent être écrasés par des sélecteurs plus spécifiques (ID, styles inline). Résultat : l’animation ne se déclenche pas.

Exemple :
Un bouton génère des particules avec une transition sur transform. Si la position finale est définie en JavaScript (style inline), @starting-style est ignoré.

Solutions :

• Forcer avec !important (peu maintenable),
• Utiliser des variables CSS pour égaliser la spécificité,
• Revenir aux @keyframes, plus simples et compatibles.

Verdict :
@starting-style est pratique, mais les @keyframes restent souvent plus fiables.

L'article explique que OKLCH est un modèle de couleur conçu pour être perceptuellement uniforme, c’est-à-dire que les variations de ses valeurs (Lightness, Chroma, Hue) correspondent mieux à la façon dont les humains perçoivent les couleurs. Contrairement à des modèles comme RGB ou HSL, OKLCH permet de créer des palettes de couleurs cohérentes en luminosité et en intensité, même en changeant seulement la teinte ou la clarté. Il évite les déformations de couleur lors de la création de dégradés ou de nuances, et supporte une gamme de couleurs plus large que le sRGB, notamment sur les écrans modernes (Display-P3). Bien que compatible avec les navigateurs récents, il est conseillé de prévoir des alternatives pour les anciens navigateurs. Un outil comme oklch.fyi facilite la génération et la conversion de palettes OKLCH. Idéal pour les designers et développeurs cherchant plus de précision et de cohérence visuelle.

CSS Elevator est un projet ingénieux démontrant comment créer une machine à états interactive (un ascenseur) en CSS pur, sans JavaScript. L’auteur utilise des variables CSS personnalisées (via @property), des compteurs, la pseudo-classe :has(), et des transitions pour simuler le déplacement entre les étages, calculer la durée des trajets, afficher la direction, et même gérer l’accessibilité avec aria-live. Les boutons radio servent de déclencheurs d’état, tandis que des astuces comme le délai de mise à jour des variables permettent de mémoriser l’état précédent. Le résultat est une animation fluide, réactive et accessible, prouvant que le CSS moderne peut gérer des logiques complexes, idéal pour des prototypes ou des environnements sans JavaScript.

L’article explique comment CSS Anchor Positioning révolutionne le positionnement des éléments en permettant de lier un élément cible à un ancrage précis, indépendamment de leur relation parent-enfant dans le DOM. Contrairement à position: absolute, qui nécessite souvent une restructuration du HTML ou des calculs fragiles, cette nouvelle API permet de définir un ancrage (anchor-name) sur un élément et de positionner un autre élément (position-anchor) par rapport à ses bords (top, right, bottom, left) ou à une grille 3x3 (position-area). Elle offre aussi des mécanismes de repli intelligents (position-try-fallbacks) pour éviter les débordements hors de la viewport, comme basculer automatiquement un popup du haut vers le bas si l’espace manque. Idéal pour des composants dynamiques et responsives, cette technique simplifie des cas d’usage complexes (tooltips, badges, menus contextuels) sans JavaScript, même si son support reste limité aux navigateurs basés sur Chromium pour l’instant.

L'auteur analyse et améliore la section "hero" du site Time.com, critiquant notamment le passage trop précoce à un affichage mobile (1 colonne) qui gaspille l’espace disponible sur les écrans intermédiaires. Il propose une approche plus flexible et progressive, en utilisant des techniques CSS modernes : CSS Grid, container queries, display: contents, style queries, grid areas, et le sélecteur :has() pour créer un layout adaptatif et dynamique. L’objectif est de laisser le contenu guider la mise en page, avec des transitions fluides entre 1, 2 et 3 colonnes, tout en optimisant l’espace et la lisibilité. L’article illustre aussi l’utilisation des query units (cqw) pour des tailles de police fluides et des astuces comme text-wrap: pretty pour équilibrer les titres. Une démonstration concrète de comment construire des layouts robustes et modulaires avec du CSS avancé.

L'article explore comment concevoir des citations en bloc et des citations extraites pour refléter l'identité visuelle d'une marque et aider à raconter son histoire. L'auteur explique comment styliser l'élément HTML blockquote en utilisant des bordures, des guillemets décoratifs, des formes personnalisées et d'autres propriétés inattendues. Des exemples interactifs montrent comment des bordures simples, des guillemets stylisés et des formes variées peuvent transformer des citations en éléments de design expressifs et distinctifs, renforçant ainsi la personnalité et la voix d'une marque.

L'article présente une technique CSS pour créer des placeholders d'images flous (LQIP) avec un minimum de balisage, nécessitant seulement une propriété CSS personnalisée. Cette méthode utilise un entier pour encoder les informations de couleur et de luminosité, permettant de générer des placeholders sans JavaScript ni éléments supplémentaires. L'approche est minimaliste et efficace, bien que les résultats soient très flous comparés à d'autres solutions. L'article explore également différentes techniques de LQIP et explique comment cette méthode CSS se distingue par sa simplicité et son intégration facile.

L'article explore comment styliser les lettrines pour refléter l'identité visuelle d'une marque et enrichir la narration. L'auteur combine les pseudo-éléments ::first-letter et la propriété initial-letter avec d'autres propriétés CSS comme border-image et clip-path pour créer des effets visuels uniques. Des exemples pratiques montrent comment utiliser des ombres, des contours, des arrière-plans, des bordures et des transformations pour rendre les lettrines plus attrayantes. L'article met en lumière l'importance des lettrines dans la conception web pour attirer l'attention et guider le lecteur, tout en ajoutant une touche distinctive et mémorable.

Suite et fin de https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/ https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/ et https://css-tricks.com/better-css-shapes-using-shape-part-3-curves/ la quatrième partie de la série sur la fonction shape() en CSS explore les commandes close et move, qui, bien que rarement utilisées, sont incroyablement utiles pour certaines formes complexes. La commande close permet de fermer une forme en revenant automatiquement au point de départ initial, simplifiant ainsi le code et le rendant plus lisible, surtout pour les formes avec plusieurs sous-parties. La commande move, quant à elle, permet de déplacer le point de départ à un nouvel emplacement sans dessiner de ligne, facilitant la création de formes composées de plusieurs parties non connectées. Ces commandes sont particulièrement utiles pour créer des formes découpées et des motifs répétitifs, offrant une grande flexibilité et expressivité. L'utilisation de variables CSS avec ces commandes permet de rendre le code plus adaptable et facile à ajuster, démontrant ainsi la puissance de la fonction shape() pour créer des designs complexes et dynamiques.