Le CSS contrast-color() permet de générer automatiquement des couleurs de texte lisibles (noir ou blanc) en fonction de la couleur de fond, résolvant ainsi les problèmes de contraste insuffisant sur les sites web. Cette fonction native du navigateur, introduite dans les spécifications CSS de niveau 5, élimine le besoin de bibliothèques JavaScript ou de calculs dynamiques, car elle effectue les calculs de contraste lors du rendu initial de la page. Elle s’intègre directement dans les feuilles de style, comme color: contrast-color(var(--brand-color)), et s’adapte instantanément aux changements de thème sans manipulation supplémentaire.

Malgré son utilité, la fonction actuelle reste limitée : elle ne retourne que du noir ou du blanc, et son nom a été modifié (anciennement color-contrast()), ce qui peut causer des incompatibilités avec des tutoriels obsolètes. Les futures versions pourraient étendre ses fonctionnalités, comme l’ajout de listes de couleurs candidates ou de ratios cibles, mais pour l’instant, elle se concentre sur une solution simple et efficace pour un problème persistant, où 70 % des sites échouent encore aux tests de contraste WCAG en 2025.

La fonction CSS shape() du module Shapes Level 2 permet de créer des tracés complexes et fluides directement dans les feuilles de style, offrant une alternative aux méthodes rigides comme polygon() ou path(). Contrairement à ces dernières, elle combine la syntaxe vectorielle SVG avec des unités CSS flexibles (pourcentages, em, etc.), garantissant des formes responsives sans dépendre d’images externes ou de calculs lourds.

L’article explique son fonctionnement via des commandes de dessin intuitives (from, move to, line to, curve, etc.), similaires à celles des tracés SVG, mais adaptées aux besoins du CSS moderne. Elle s’applique notamment aux propriétés clip-path (pour découper des éléments) et offset-path (pour animer des objets le long d’un tracé).

Enfin, le guide illustre son utilité avec des cas concrets comme une bulle de dialogue responsive ou une bannière à bordure incurvée, tout en soulignant ses avantages en termes de performances et de référencement naturel. Bien que supportée par la plupart des navigateurs récents, cette fonction reste à explorer pour des designs plus dynamiques et maintenables.

L’article d’Alsacréations explique comment la propriété CSS align-content simplifie désormais le centrage vertical, une tâche autrefois complexe en CSS. Historiquement, les développeurs devaient recourir à des techniques comme vertical-align ou des combinaisons de position: absolute et transform, souvent fragiles. Grâce aux mises à jour des spécifications CSS (notamment le CSS Box Alignment Module Level 3), align-content fonctionne désormais dans tous les modes d’affichage, y compris les blocs natifs, sans nécessiter Flexbox ou Grid.

L’auteur illustre cette évolution avec deux exemples concrets : centrer verticalement un contenu dans un conteneur de hauteur fixe en utilisant simplement align-content: center, ou aligner un élément en bas avec align-content: end. Contrairement à Flexbox, cette méthode préserve le comportement natif des enfants (marges, flux normal), évitant ainsi des modifications structurelles inutiles. Toutes les valeurs classiques de la propriété (start, center, end, etc.) sont désormais applicables, offrant une solution universelle et moderne.

Cette avancée, déjà supportée par tous les navigateurs modernes, marque la fin des solutions de contournement pour le centrage vertical. Elle permet d’écrire moins de code tout en gardant un rendu fiable et maintenable, simplifiant ainsi l’intégration web.

Eric Meyer explore une solution pour rendre accessibles des en-têtes de tableau avec cellules divisées diagonalement, comme dans la documentation d’Apollo 16. Il propose d’abord une structure HTML avec deux lignes d’en-têtes, mais cette approche échoue aux critères d’accessibilité WCAG 1.3.3. Une alternative validée par des experts consiste à utiliser rowspan pour fusionner les cellules de la première ligne, améliorant ainsi la navigation au clavier.

Pour le rendu visuel, Meyer utilise du positionnement CSS absolu et relatif pour superposer la deuxième ligne d’en-têtes sur la première, créant l’effet de division diagonale. Un dégradé linéaire sert à matérialiser cette séparation, bien qu’un SVG soit suggéré pour une implémentation plus robuste en production.

L’article souligne les limites de cette méthode, notamment des risques de chevauchement des textes ou de dépassement des cellules, nécessitant parfois un ajustement de la hauteur minimale. Malgré ces défis, la solution offre un compromis entre accessibilité et design, tout en invitant à des améliorations futures.

L’article de Josh W. Comeau compare les performances des animations en CSS et en JavaScript, un sujet souvent abordé avec des idées reçues. L’auteur explique que, contrairement aux apparences, les animations JavaScript ne sont pas nécessairement plus lentes, mais leur exécution sur le fil principal (main thread) les rend vulnérables aux blocages causés par d’autres tâches JavaScript. À l’inverse, les animations CSS s’exécutent sur un fil dédié, ce qui les rend plus fluides dans des applications complexes.

L’analyse se concentre sur deux méthodes : les keyframes CSS et une boucle JavaScript utilisant requestAnimationFrame. Bien que le JavaScript moderne soit optimisé pour des calculs rapides, son exécution sur le fil principal le rend sensible aux interruptions, contrairement au CSS qui bénéficie d’un traitement séparé. L’auteur illustre ce point avec une démonstration où des blocages du fil principal perturbent davantage l’animation JavaScript que l’animation CSS.

Enfin, l’article souligne que le choix entre CSS et JavaScript dépend du contexte : le CSS est idéal pour des animations simples et performantes, tandis que le JavaScript offre plus de flexibilité pour des interactions dynamiques ou complexes, malgré les risques de latence liés au fil principal.

L’article aborde les difficultés rencontrées avec les Cross-Document View Transitions, une fonctionnalité permettant d’animer les transitions entre pages HTML classiques sans framework. L’auteur explique que les tutoriels obsolètes, utilisant une balise <meta> désormais dépréciée, induisent en erreur, tandis que les solutions pour Single-Page Applications (SPA) ne s’appliquent pas aux sites multi-pages. Les problèmes courants incluent des transitions silencieusement bloquées par un délai de 4 secondes, des distorsions d’images ou des styles CSS complexes pour gérer les noms de transitions.

L’auteur souligne l’absence de documentation claire et actualisée, rendant l’implémentation ardue malgré des démos prometteuses. Il annonce une série en deux parties pour clarifier les bonnes pratiques, comme l’utilisation de l’API @view-transition en CSS, la gestion des événements pagereveal et pageswap, ou encore l’optimisation des noms de transitions pour éviter des fichiers CSS surchargés. La seconde partie promet des solutions pour les projets à grande échelle, notamment la gestion des animations avec prefers-reduced-motion.

L’article présente deux nouvelles fonctions CSS, sibling-index() et sibling-count(), issues du module CSS Values and Units Level 5, permettant de simplifier la création d’effets de cascade décalée (staggered animations) sans recourir à des boucles Sass ou à du JavaScript. Ces fonctions exploitent des données déjà connues du navigateur, comme la position d’un élément parmi ses frères ou le nombre total de ses frères, pour appliquer des animations dynamiques en une seule ligne de CSS, sans limite de taille de liste.

L’auteur explique que les méthodes traditionnelles (comme les sélecteurs :nth-child() ou les manipulations JavaScript) sont lourdes et peu maintenables, surtout pour des listes dynamiques. À l’inverse, sibling-index() et sibling-count() offrent une solution élégante et performante, fonctionnant aussi bien pour 5 éléments que pour 5 000, sans générer de code superflu ni dépendre de variables injectées dynamiquement.

Ces fonctions, déjà approuvées par le CSS Working Group, résolvent un problème récurrent en CSS en donnant accès à des informations structurelles du DOM directement dans les styles, ouvrant la voie à des mises en page plus dynamiques et maintenables.

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.