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.

Suite de https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/ et https://css-tricks.com/better-css-shapes-using-shape-part-2-more-on-arcs/, la troisième partie de la série sur la fonction shape() en CSS explore la commande curve, essentielle pour créer des courbes de Bézier et maîtriser pleinement cette fonction. Contrairement aux commandes line et arc précédemment abordées, la commande curve offre une flexibilité accrue pour dessiner des formes complexes en spécifiant des points de contrôle, sans nécessiter de connaissances mathématiques approfondies. L'article compare les commandes curve et arc, illustrant comment chacune peut être utilisée pour arrondir les coins des formes avec des résultats légèrement différents. Des exemples pratiques, tels que la création d'onglets arrondis et de polygones arrondis, démontrent l'utilisation de la commande curve en remplaçant les commandes line par des combinaisons de line et curve, bien que les calculs puissent être complexes et nécessiter des ajustements. L'utilisation de variables CSS simplifie la gestion et l'ajustement des formes, rendant la création de designs complexes plus accessible. Enfin, l'article encourage l'expérimentation avec la commande curve pour créer des formes esthétiques et rappelle que des outils en ligne sont disponibles pour faciliter l'utilisation et l'optimisation du code.

Suite de https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/ la deuxième partie de la série sur la fonction shape() en CSS se concentre sur l'utilisation avancée de la commande arc, permettant de créer des formes complexes comme des secteurs et des arcs. L'article, qui suppose une compréhension préalable de la première partie, explore comment manipuler les arcs en utilisant des variables CSS pour contrôler leur taille et leur position, tout en utilisant des mots-clés comme top et center pour simplifier la définition des points. Il aborde les défis liés à la gestion des directions et des tailles des arcs, proposant des solutions pratiques comme l'utilisation de border-radius pour ajuster les formes et l'introduction de conditionnelles en ligne pour modifier dynamiquement les propriétés des arcs. L'article conclut en encourageant l'expérimentation avec la commande arc pour créer des formes esthétiques, tout en notant que la maîtrise des arcs elliptiques est rarement nécessaire pour la plupart des projets.

L'article, 1er d'une série de 4, explore l'utilisation de la nouvelle fonction shape() en CSS pour créer des formes plus complexes et personnalisées. La fonction shape(), actuellement supportée dans Chrome 137+ et Safari 18.4+, permet d'utiliser des commandes similaires à celles de SVG mais avec une syntaxe CSS plus standard, offrant ainsi plus de flexibilité et de fonctionnalités. L'article se concentre sur l'utilisation des lignes et des arcs pour créer des formes, en expliquant comment convertir des chemins SVG en formes CSS et en fournissant des exemples pratiques pour dessiner des rectangles, des découpes circulaires, des onglets arrondis et des rayons inversés. L'auteur souligne également l'importance d'analyser les formes pour simplifier leur création et propose un convertisseur en ligne pour faciliter la transition de SVG à CSS.

L'article présente 10 fonctionnalités récentes des CSS :

• Min, max and clamp - min et max se passent de commentaires, et clamp permet de combiner les deux - une valeur minimale, une valeur préférée, et une valeur maximale
• Container queries - les container query font que les éléments répondent à la taille du conteneur de leur parent plutôt qu'à celle du viewport
• text-wrap: balance & pretty - cette propriété contrôle comment le texte est réparti entre les lignes pour améliorer la lisibilité, la valeur "balance" crée des lignes de longueur égale, alors que "pretty" évite les orphelines (mots se retrouvant seuls sur la dernière ligne)
• CSS Relative Color Syntax - la syntaxe "from" permet d'extraire et de modifier des composants individuels pour toute source de couleur
• Margin Block/Inline Properties - ces propriétés de marge et de padding (margin-block, margin-inline, padding-block, padding-inline) répondent aux besoins induits par différents modes d'écriture et de direction de lecture en CSS, remplaçant les propriétés left / right / top / bottom
• @starting-style - permet d'animer des éléments depuis display:none, en définissant des styles initiaux quand un élément apparaît
• :has() - permet de sélectionner des éléments parents, en se basant sur leurs enfants
  
- Media Query Ranges - simplifie la syntaxe pour définir des intervalles min/max
• light-dark - est un raccourci pour définir différentes valeurs basées sur les préférences de l'utilisateur sur le mode (sombre / light)
• color-scheme - est utile en combinaison avec light-dark, pour informer le navigateur quel jeu de couleurs est supporté par un composant, ce qui permet aux éléments natifs de correspondre automatiquement aux préférences de l'utilisateur
• Nesting - permet d'écrire des CSS en imbriquant les sélecteurs enfants dans leurs parents
• Units - de nouvelles unités comme dvh sont apparues (pour les navigateurs mobiles)
• @layer - permet de gérer des conflits de spécificité en ordonnant explicitement les groupes de styles.

L'article explore une technique avancée des animations CSS avec des keyframes partiels. En omettant les points de départ ou de fin dans une animation, les valeurs initiales sont héritées du contexte, rendant les animations plus dynamiques et réutilisables. Cette approche permet de créer des animations qui s'adaptent à l'état actuel de l'élément, facilitant ainsi des transitions plus fluides et personnalisées. De plus, l'utilisation de variables CSS dans les keyframes permet de définir des valeurs dynamiques, augmentant encore la flexibilité et la puissance des animations CSS.

L'article explore comment transformer les boîtes de dialogue HTML en éléments visuellement attrayants et cohérents avec l'identité d'une marque. En utilisant des techniques CSS avancées telles que ::backdrop, backdrop-filter, et des animations, l'auteur montre comment dépasser les designs génériques pour créer des expériences utilisateur uniques et mémorables. L'article met en lumière des exemples concrets, comme l'intégration de designs rétro inspirés des années 90, tout en maintenant l'accessibilité et la performance. Il encourage les designers à voir les boîtes de dialogue non seulement comme des éléments fonctionnels, mais aussi comme des opportunités pour renforcer le storytelling et l'identité visuelle d'un site web.

L'article explore comment les techniques d'animation des dessins animés classiques peuvent inspirer les animations CSS modernes. L'auteur, Andy Clarke, montre comment il a appliqué ces principes pour créer des animations engageantes sur le site web du compositeur Mike Worth. Les limitations budgétaires des anciens dessins animés ont conduit à des techniques créatives, comme la réutilisation de cellules et de fonds, qui peuvent être reproduites avec CSS. Ces animations améliorent l'expérience utilisateur et renforcent l'identité de la marque.

L'article explore les nouvelles capacités de la fonction attr() en CSS, qui permet désormais d'utiliser des valeurs autres que du texte, comme des couleurs, des nombres, et des pourcentages. Cette fonctionnalité, bien que non supportée par tous les navigateurs, offre une flexibilité accrue pour styliser des éléments HTML en fonction de leurs attributs. L'auteur présente divers cas d'utilisation, tels que l'assignation de colonnes dans une grille CSS, la gestion des délais d'animation, et la définition de couleurs dynamiques, tout en soulignant les avantages en termes de séparation des préoccupations et de réduction des conflits CSS.

L'article décrit le processus de recréation d'une animation P5.js de Rach Smith en utilisant CSS, en particulier la propriété offset-path. Initialement, l'auteur a tenté de suivre manuellement les positions et directions de chaque boîte dans l'animation, ce qui s'est avéré complexe. Cependant, il a découvert que l'utilisation de offset-path avec la fonction inset() permettait de créer un chemin carré le long duquel les boîtes pouvaient se déplacer en animant les valeurs de offset-distance. Cette méthode a simplifié le processus et permis de distribuer uniformément les boîtes grâce à des valeurs de animation-delay calculées proportionnellement. L'article explore également l'utilisation de offset-path avec d'autres formes comme polygon() pour créer des animations intéressantes et variées.

Les CSS Relative Colors permettent de manipuler dynamiquement les couleurs sans recourir à des préprocesseurs comme Sass. Ils offrent une méthode native pour ajuster l'opacité et créer des variations de couleurs directement en CSS. Cette fonctionnalité est supportée par les principaux navigateurs et permet de simplifier la gestion des couleurs dans les projets web. Les couleurs relatives utilisent des fonctions comme rgb() et hsl() pour modifier les canaux de couleur, facilitant ainsi la création de thèmes et d'effets visuels cohérents. Elles peuvent également être combinées avec color-mix() pour des ajustements plus complexes, offrant une flexibilité accrue dans le design web.

Tout est dans le titre

En résumé, si les valeurs comparées dans max sont un calcul et qu'un de ces calculs échoue, l'intégralité de max échoue... donc il vaut mieux entourer le calcul par un @supports