Cette page de CSS-Tricks explore les différentes unités de longueur en CSS, essentielles pour dimensionner les éléments d'une page web. Elle distingue les unités absolues, comme le pixel (px), qui restent constantes quelle que soit la résolution de l'écran, des unités relatives, qui s'adaptent en fonction d'autres facteurs comme la taille de la police ou de l'écran. L'article détaille neuf types d'unités, couvrant les dimensions, l'espace, le temps et même le son, tout en expliquant leur utilité pour contrôler précisément le rendu visuel.

L’article explore quatre nouvelles fonctionnalités CSS 2025 pour une gestion avancée des couleurs, permettant de créer des thèmes dynamiques sans dépendre de préprocesseurs ou de JavaScript. Il met en avant des espaces colorimétriques modernes comme color() pour exploiter des gamuts élargis (Display P3, Rec2020) et des modèles perceptuellement uniformes comme oklch(), offrant des dégradés de luminosité plus naturels que le traditionnel HSL.

Parmi les outils présentés, color-mix() permet de fusionner des couleurs de manière intelligente, tandis que les syntaxes relatives (comme from) facilitent la dérivation de palettes à partir d’une teinte de base. Le dark mode est simplifié via color-scheme et light-dark(), évitant les requêtes média complexes. Ces innovations visent à uniformiser l’affichage des couleurs tout en optimisant l’accessibilité et l’adaptabilité aux écrans modernes.

L’article souligne aussi des fonctionnalités complémentaires comme accent-color pour personnaliser les éléments natifs de formulaire et contrast-color() pour ajuster automatiquement le texte en fonction du fond. Ces évolutions marquent une rupture avec les méthodes traditionnelles, en intégrant nativement dans CSS des capacités autrefois réservées aux outils externes.

Les fonctions CSS natives avec la règle @function permettent de créer des outils de calcul personnalisés directement dans le navigateur, évitant ainsi l'usage de préprocesseurs comme SASS ou de JavaScript pour des opérations complexes. Leur principal avantage réside dans la performance : les calculs sont exécutés nativement par le moteur du navigateur (en C++), ce qui améliore la vitesse de rendu et réduit les dépendances externes. Par exemple, une fonction peut encapsuler des calculs répétitifs, comme des espacements ou des tailles, pour un code plus maintenable.

La syntaxe des @function repose sur des règles strictes, notamment un typage explicite pour garantir la cohérence des données. Les types (<number>, <length>, <color>, etc.) permettent au navigateur de valider les entrées et d'optimiser les calculs. Le polymorphisme, via l'opérateur |, offre une flexibilité supplémentaire en autorisant une fonction à accepter plusieurs types de données, comme une taille absolue ou un pourcentage, pour des designs plus adaptables.

Enfin, ces fonctions simplifient la création de designs fluides en combinant des calculs mathématiques (comme clamp()) avec des règles dynamiques, réduisant le besoin de media queries. Leur adoption est particulièrement pertinente pour les projets axés sur la performance, où chaque milliseconde compte.

L’article d’Ahmad Shadeed présente la syntaxe des requêtes média en plage (range syntax), une évolution des media queries classiques (min-width/max-width) pour simplifier la gestion des breakpoints en responsive design. L’idée centrale est d’éviter les bugs de layout liés aux chevauchements de valeurs (ex. : un élément masqué à 300px par deux requêtes contradictoires) en utilisant des opérateurs de comparaison clairs comme width <= 300px ou 300px <= width <= 500px, plus intuitifs que les combinaisons de min-width et max-width.

L’auteur illustre les limites des méthodes traditionnelles, où des ajustements manuels (ex. : max-width: 299px vs min-width: 300px) deviennent complexes avec plusieurs breakpoints, et souligne les avantages des requêtes en plage : meilleure lisibilité, maintenance simplifiée et support étendu depuis 2023. Cette syntaxe, intégrée aux Media Queries Level 4, permet aussi de définir des plages de valeurs directement, comme (300px <= width <= 500px), réduisant les erreurs de logique et accélérant le débogage.

L’auteur exprime une critique envers Tailwind CSS, qu’il compare à l’utilisation d’ingrédients industriels pour préparer une tarte à la citrouille, plutôt qu’à une version artisanale. Bien que Tailwind offre des avantages en termes de rapidité et d’efficacité, il estime que cette approche élimine la maîtrise du CSS, une compétence qu’il considère comme un artisanat à part entière.

Il souligne que le CSS bien écrit repose sur des principes comme la cascade, les variables personnalisées, les systèmes d’espacement cohérents et les sélecteurs adaptés, des aspects que Tailwind contourne au profit de classes utilitaires. Pour lui, cette méthode prive les développeurs de la compréhension profonde du langage, au profit d’une productivité immédiate.

Enfin, il met en avant des figures comme Kevin Powell, qui démontrent que le CSS natif permet des designs élégants et maintenables sans dépendre d’outils externes. Selon lui, l’adoption systématique de Tailwind freine l’apprentissage et la maîtrise du CSS, réduisant le développement à une simple "assemblage" plutôt qu’à une création réfléchie.

Cette page présente les Scroll-Driven Animations, une nouvelle API CSS permettant de créer des animations déclenchées par le défilement, sans JavaScript. L’idée centrale est d’associer des animations existantes (comme @keyframes) à une progression de défilement plutôt qu’à une durée fixe, simplifiant ainsi les effets visuels dynamiques. L’auteur, Josh W. Comeau, illustre ce concept avec des exemples concrets et détaille son fonctionnement, tout en mentionnant les limites actuelles, notamment un support partiel des navigateurs (85 % selon Can I Use, avec Firefox nécessitant un flag).

L’article s’adresse aux développeurs familiarisés avec les animations CSS et explore des fonctionnalités avancées comme les timelines liés ou les plages d’animation personnalisées. Il aborde aussi les pièges à éviter et propose des solutions de contournement, comme un polyfill imparfait. Malgré un support encore incomplet, l’auteur encourage son adoption pour des améliorations cosmétiques, anticipant une généralisation prochaine, notamment dans Firefox.

Enfin, la page s’inscrit dans un contexte plus large, avec une mention de la sortie récente d’un cours de l’auteur sur les animations, bien que le contenu principal se concentre sur l’API elle-même. Les exemples interactifs permettent de tester les possibilités offertes par cette technologie émergente.

L’article de CSS-Tricks présente sept exemples concrets de view transitions, une fonctionnalité CSS moderne permettant d’animer les changements de vue entre pages ou éléments. L’auteur explique d’abord le principe de base, notamment l’activation via la règle @view-transition et l’utilisation de types d’animations personnalisés, tout en respectant les préférences de réduction de mouvement des utilisateurs. Il détaille ensuite la structure technique pour appliquer des animations entrantes et sortantes via des pseudo-éléments comme ::view-transition-old(root) et ::view-transition-new(root).

L’article propose des recettes prêtes à l’emploi, comme l’effet pixelate dissolve qui combine flou et fondu pour une transition visuelle originale. Chaque exemple inclut le code nécessaire et des explications sur leur implémentation, avec une attention particulière portée à la compatibilité navigateur (tous les principaux navigateurs supportent désormais les view transitions, bien que certaines animations puissent varier). L’auteur encourage à expérimenter ces techniques pour enrichir l’expérience utilisateur tout en restant accessible aux débutants.

L’article explique comment gérer l’état visuel d’une interface directement en CSS plutôt qu’en JavaScript, notamment pour des interactions simples comme des panneaux, des icônes ou des thèmes. Il présente le checkbox hack, une technique où une case à cocher masquée sert de machine à états, déclenchant des changements de style via le pseudo-sélecteur :checked et les combinateurs de frères. Avec l’arrivée de :has(), cette méthode devient plus flexible, permettant de placer la case n’importe où dans le DOM tout en contrôlant des éléments précédents.

L’auteur illustre cette approche avec un exemple de bascule entre thèmes clair et sombre, utilisant color-scheme et la fonction light-dark() pour adapter dynamiquement les couleurs. Bien que pratique, cette technique repose sur des sélecteurs comme #id, dont l’impact sur les performances est à considérer. L’article souligne aussi l’importance d’utiliser hidden plutôt que disabled pour masquer la case, tout en notant ses limites en termes d’accessibilité.

Le principe d’animation squash and stretch (écrasement et étirement), issu des 12 principes de base de Disney, consiste à déformer un objet en mouvement pour lui donner une apparence plus dynamique et réaliste. L’auteur illustre ce concept avec une balle qui s’aplatit à l’impact et s’allonge lors du rebond, tout en soulignant l’importance de modérer l’effet pour éviter un rendu exagéré.

L’application concrète sur le web concerne souvent des icônes SVG, comme des flèches qui s’étirent et s’amincissent au survol. Cette technique, subtile mais efficace, améliore l’interactivité perçue. L’article propose un tutoriel pour implémenter ce effet, en partant d’un code SVG simple et en utilisant des bibliothèques JavaScript pour faciliter l’animation.

Cette page explique comment créer un sélecteur de plage de dates en CSS, principalement grâce à la syntaxe :nth-child(n of selector). L’auteure montre comment cette méthode permet de cibler des éléments spécifiques parmi un groupe, comme le deuxième élément d’une classe donnée, plutôt que le deuxième enfant global. Un exemple concret illustre la construction d’un calendrier où l’utilisateur peut sélectionner une plage de dates, avec une gestion partielle en JavaScript pour ajuster dynamiquement les dates choisies. L’approche combine CSS moderne et un peu de logique JavaScript pour une interaction fluide.

L’article de CSS-Tricks explore les alternatives à l’utilisation excessive de la déclaration !important en CSS, souvent employée pour forcer la priorité d’une règle mais qui complique la maintenance des projets. L’auteur souligne que cette méthode contourne le système de cascade naturel, rendant le code moins prévisible et plus difficile à gérer, notamment dans des équipes ou des projets évolutifs. Plutôt que de recourir à !important, il recommande des solutions comme l’ajustement de la spécificité des sélecteurs, l’ordre des règles ou l’utilisation de couches de cascade pour obtenir des résultats plus propres et durables. L’article aborde aussi les mécanismes de priorité en CSS, où la spécificité et l’ordre des déclarations déterminent quelles règles s’appliquent, tout en mettant en garde contre les effets pervers d’une surutilisation de !important.

La fonction CSS shape() permet de créer des formes complexes (lignes, arcs, courbes) avec une syntaxe plus lisible et flexible que path(), en s’appuyant sur des commandes proches du SVG mais compatibles avec les unités et fonctions CSS comme calc() ou var(), ce qui facilite la création de formes dynamiques et responsives ([CSS-Tricks][1]) ; elle s’utilise principalement avec clip-path pour découper visuellement un élément (la forme agit comme un “emporte-pièce”), ou avec offset-path pour animer un élément le long d’un tracé ([CSS-Tricks][1]) ; chaque forme est définie comme une suite d’instructions partant d’un point initial (from) puis enchaînant des segments (line, arc, curve), permettant de construire progressivement des formes sophistiquées tout en restant manipulables et combinables avec les autres propriétés CSS

Découvrez comment créer un menu "drill-down" (navigation imbriquée) avec des éléments HTML <details> et <summary>, permettant d'afficher des sous-menus imbriqués comme des poupées russes. L'article explique comment structurer le HTML pour une navigation à plusieurs niveaux, puis utilise la règle CSS @scope pour limiter le style aux éléments pertinents, évitant ainsi les conflits de style. Une solution élégante pour des interfaces compactes et interactives.

Josh Comeau révèle comment créer un effet visuel subtil où l’en-tête d’un site semble changer de couleur en défilant, grâce à des éléments "bloqueurs" en CSS. En utilisant position: sticky et des calques transparents (un bleu pour l’intro, un blanc pour le contenu), il simule un changement d’opacité sans JavaScript. Une astuce simple mais bluffante pour ajouter du polish à un site !

Présentation de quatre fonctionnalités CSS modernes qui permettent de gérer des animations et interactions avancées directement dans le navigateur, réduisant fortement le besoin de JavaScript. L’article met notamment en avant View Transitions, qui permet de créer facilement des transitions animées entre pages ou états d’interface, et Scroll-Driven Animations, qui synchronisent les animations avec la position de défilement pour réaliser des effets comme le parallaxe ou l’apparition d’éléments. Il explique aussi animation-composition, qui combine plusieurs transformations sans écraser les valeurs existantes, et @property, qui introduit des variables CSS typées et animables, rendant possibles des transitions fluides sur des propriétés complexes comme les dégradés ou les couleurs.

Cet article présente des astuces pour améliorer l'expérience utilisateur des interfaces. Il aborde des détails comme l'équilibrage du texte avec text-wrap: balance, l'harmonisation des bordures avec des rayons concentriques, l'animation contextuelle des icônes, l'affinage du rendu textuel sur macOS avec antialiased, l'utilisation de chiffres tabulaires pour une largeur uniforme, et l'importance des animations interruptibles pour une interaction fluide. Ces techniques, bien que subtiles, contribuent grandement à la qualité perçue d'une interface.

Cet article explore les possibilités offertes par la nouvelle fonctionnalité de personnalisation des éléments <select> dans les navigateurs modernes, en se concentrant sur les navigateurs basés sur Chromium. L'auteur, Patrick Brosset, présente plusieurs démonstrations créatives et amusantes utilisant cette fonctionnalité, comme une pile de dossiers personnalisés. Il explique les étapes et techniques utilisées pour créer ces démonstrations, en commençant par le code HTML de base et en passant par le CSS pour styliser les éléments. L'article souligne également la compatibilité avec les navigateurs non supportants, qui afficheront simplement des éléments <select> standards.

Cet article traite de l'importance de la propriété CSS z-index pour contrôler l'ordre d'affichage des éléments sur une page web. L'auteur, Amit Sheen, souligne les problèmes liés à l'utilisation de valeurs arbitraires et élevées de z-index, souvent appelées "magic numbers". Ces pratiques peuvent entraîner des conflits, des difficultés de maintenance et de débogage. L'article met en lumière l'importance d'une approche plus structurée pour éviter ces problèmes, bien qu'il ne traite pas directement des contextes d'empilement (stacking contexts).

Cet article de CSS-Tricks présente une méthode concise pour centrer un élément positionné absolument en CSS, utilisant seulement trois lignes de code. La technique exploite les propriétés place-self: center et inset: 0, qui fonctionnent sur tous les navigateurs. L'auteur explique que cette approche est plus idiomatique et réutilise les propriétés d'alignement familières, tout en offrant une flexibilité pour positionner les éléments de manière précise. Un bon rappel pour les amateurs de CSS!

L’article analyse de manière nuancée les avantages et les inconvénients des loaders SVG par rapport aux loaders au format raster pour les interfaces web, en mettant l’accent sur la performance et l’esthétique : les SVG offrent une meilleure évolutivité, des fichiers souvent plus légers et peuvent être stylés ou animés via CSS/DOM, ce qui améliore l’adaptabilité à différentes résolutions, tandis que les images raster peuvent être plus simples pour des visuels complexes mais entraînent des compromis en taille et en clarté, ce qui influence le choix selon les besoins de design et de performance.