Le CSS moderne a ajouté des fonctions et des propriétés qui remplacent des catégories entières de media queries et de hacks JavaScript. Les incontournables :
clamp() — valeurs fluides et délimitées
h1 { font-size: (, , ); }
Le CSS moderne a ajouté des fonctions et des propriétés qui remplacent des catégories entières de media queries et de hacks JavaScript. Les incontournables :
h1 { font-size: (, , ); }
clamp(min, preferred, max) offre une typographie/espacement fluide qui s'adapte régulièrement à la fenêtre d'affichage tout en restant dans les limites — remplaçant plusieurs points d'arrêt de media queries font-size par une seule ligne.
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; } /* perfect square at any width */
Avant cela, maintenir une boîte 16:9 réactive nécessitait le fameux hack padding-bottom: 56.25%. Maintenant, c'est une seule déclaration — et elle réserve l'espace (bon pour le CLS) avant le chargement des images.
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); } /* whichever is LARGER → a minimum floor */
min()/max() choisissent la plus petite/plus grande valeur, permettant à une propriété d'être réactive sans media query (p. ex. « 90% de largeur, mais pas plus de 1200px »).
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
subgrid permet à une grille imbriquée d'hériter des lignes de piste de son parent, de sorte que les éléments entre des cartes séparées (titres, corps, boutons) s'alignent parfaitement sur des lignes partagées — auparavant impossible sans hauteurs fixes.
.flex { display: flex; gap: 1rem; } /* gap now works in flexbox, not just grid */
Ces fonctionnalités éliminent des hacks de longue date : clamp()/min()/max() remplacent des piles de media queries pour le dimensionnement fluide, aspect-ratio remplace le hack de padding et protège le décalage de mise en page, et subgrid résout l'alignement entre composants.
Elles rendent les mises en page réactives et proportionnelles considérablement plus simples et robustes — le CSS moderne fait de manière déclarative ce qui avait besoin de JS ou de tricks fragiles.