- Liste récapitulative des fonctionnalités CSS/HTML nouvellement ajoutées ou dont la prise en charge s’est élargie cette année, organisée sous un angle pratique, couvrant largement les transitions d’UI, les formulaires, la typographie et même le CSS fonctionnel
- Parmi les nouveautés clés : les transitions de taille vers des mots-clés comme
auto, HTML popover/invoker, ainsi que CSS @function et if() ; beaucoup étant d’abord prises en charge par Chrome, une stratégie d’amélioration progressive est nécessaire
- Les champs qui s’agrandissent automatiquement avec
field-sizing, les Select personnalisés, text-wrap: balance/pretty, l’easing linear() et les chemins shape() permettent d’améliorer facilement la qualité visuelle et l’utilisabilité
- Avec davantage d’outils de contrôle des valeurs et des flux, comme
attr() renforcé, reading-flow pour contrôler l’ordre de lecture, ou calc-size(), le périmètre de conception gérable en CSS seul s’élargit
- Gardez aussi un œil sur Masonry,
random(), margin-trim, ou encore les extensions de View Transitions, encore en cours de standardisation ou de déploiement, tandis que Container Queries, :has(), dvh, etc. sont déjà devenus des bases du travail quotidien
Animate to Auto
- Fonctionnalité permettant des transitions fluides entre une valeur fixe et
auto pour des éléments dont la hauteur dépend d’un contenu arbitraire
- En déclarant globalement
interpolate-size: allow-keywords, on autorise des transitions comme height: 0 → auto
- Ou bien, sans
interpolate-size, on peut utiliser calc-size() pour effectuer la transition avec height: calc-size(auto, size)
- Son avantage est d’éliminer les anciennes astuces fragiles comme
max-height ou les mesures hors écran + animation JS, tout en préservant le comportement naturel du layout
- Côté prise en charge, c’est actuellement surtout centré sur Chrome ; comme l’animation est un plus appréciable mais non essentielle, une approche PE (Progressive Enhancement) est bien adaptée
Popovers & Invokers
- L’attribut
popover est une fonctionnalité HTML qui ajoute à un élément arbitraire un comportement d’ouverture/fermeture ainsi que l’API JS correspondante ; il s’agit d’une catégorie d’overlay légère distincte d’une modale
- Avec les attributs invoker, un contrôle déclaratif est possible sans JS
- Son intérêt est de fournir nativement au niveau HTML des éléments comme l’accessibilité, la navigation clavier et la gestion du focus, réduisant ainsi le risque d’oublis à l’implémentation
- La prise en charge est large pour Popover, tandis qu’Invoker est d’abord disponible dans Chrome, avec des écarts sur certains détails comme
popover="hint"
- Un polyfill est disponible, ce qui permet une adoption y compris pour des UX essentielles
@function
- Introduit des fonctions définies par l’utilisateur dans le système des fonctions de valeurs CSS, permettant d’abstraire une logique commune sous la forme
@function --foo(--x) { result: ... }
- En apportant réduction des duplications (DRY) et simplification des déclarations, cela améliore la lisibilité et la maintenabilité
- La prise en charge est d’abord côté Chrome ; quand c’est pertinent, on peut mettre en place un fallback élégant avec
property: fallback puis property: --func() à la ligne suivante
- À noter : incompatible avec les fonctions Sass
if()
- Première fonction de branchement au niveau des valeurs en CSS : elle permet d’énumérer des conditions
media(), supports() ou style() comme dans un switch, et de retourner la première valeur correspondante
- Exemple : décrire
grid-template-columns selon les breakpoints dans une seule déclaration
- Son effet : meilleure lisibilité et moins de répétitions, avec une bonne complémentarité avec les
@function personnalisées
- La prise en charge est d’abord Chrome ; il est recommandé de déclarer d’abord une valeur de fallback afin d’appliquer un pattern PE
field-sizing
- Présentation de la propriété
field-sizing, qui permet aux champs de saisie/édition de grandir automatiquement selon leur contenu
- Le cas le plus représentatif est l’extension automatique en hauteur de
<textarea>, avec des usages possibles aussi pour des UX de redimensionnement instantané en ligne
- La prise en charge concerne Chrome, avec une arrivée prévue dans Safari ; au besoin, un remplacement léger en JS reste possible
- Comme il s’agit d’une amélioration d’UX plutôt que d’une fonction essentielle, une adoption progressive est adaptée
Custom Selects
- Au-delà du simple habillage visuel du
select, il devient possible, après opt-in explicite, de styler entièrement l’interface de sélection ouverte elle-même
- Le PE fonctionne très bien : dans les environnements non pris en charge, on retombe de manière sûre sur le
<select> natif
- La prise en charge est d’abord côté Chrome, avec
appearance: base-select et ::picker(select) pour élargir la surface de contrôle
text-wrap
text-wrap: balance équilibre la longueur des lignes pour les grands textes comme les titres, tandis que text-wrap: pretty améliore aussi le corps de texte en réduisant les lignes orphelines et en soignant le rendu- L’effet est une meilleure lisibilité et une meilleure qualité typographique, perceptibles immédiatement et sans coût
- La prise en charge est large pour
balance, tandis que pretty est surtout disponible dans Chrome et Safari, ce qui le rend bien adapté au PE
linear() easing
- Contrairement au mot-clé
linear, la fonction linear() permet de définir une courbe d’easing précise avec un nombre arbitraire de points, ce qui est particulièrement utile pour des comportements complexes comme le rebond
- Là où
cubic-bezier() reste limité, linear() offre un contrôle fin du timing et bénéficie d’une prise en charge complète
- Si nécessaire, on peut prévoir un fallback via un easing nommé ou
cubic-bezier()
shape()
- La fonction
shape(), qui corrige les limites de path() — réservé aux pixels et à la syntaxe difficile — permet de décrire des chemins arbitraires en s’appuyant sur des unités responsives et des propriétés personnalisées
- Elle permet un masquage de formes arbitraires avec
clip-path, ainsi que du placement/de l’animation le long d’un chemin avec offset-path ; une future combinaison avec shape-outside est également annoncée
- La prise en charge existe dans Chrome et Safari, avec un déploiement sous drapeau dans Firefox ; en pratique, il est recommandé de concevoir de beaux fallbacks
More Powerful attr()
attr() prend désormais en charge la définition de type, ce qui permet de lire directement depuis des attributs HTML des valeurs non textuelles comme des nombres ou des couleurs afin de les utiliser comme valeurs CSS- L’enjeu est d’élargir les patterns où l’on injecte depuis le markup des éléments comme couleurs de thème, compteurs ou tailles
- La prise en charge est d’abord Chrome ; il est recommandé de commencer par des renforcements visuels plutôt que d’en faire dépendre le layout principal
Reading Flow
- Introduction de la propriété
reading-flow, qui permet de corriger logiquement l’ordre de tabulation dans des layouts où l’ordre visuel et l’ordre source divergent
- Lors d’une réorganisation en grille, on peut spécifier un flux de focus adapté au mode de layout, par exemple avec
reading-flow: grid-rows
- Cela permet de réduire les risques d’accessibilité avec une seule déclaration CSS, tout en augmentant la liberté de composition
- La prise en charge étant d’abord côté Chrome, il est recommandé d’éviter les réordonnancements excessifs tant que le support n’est pas plus généralisé
Stuff to Keep an Eye On
- Le layout Masonry est encore en cours de clarification dans les spécifications, et la proposition
item-flow pourrait étendre les possibilités de placement au-delà de la grille
- La fonction
random(), déjà proposée par Safari, est utile pour mettre en œuvre des variations visuelles expressives
margin-trim est utile mais surtout centré sur Safari, tandis que sibling-index()/count(), disponibles dans Chrome, sont pratiques pour des animations en décalé- Il y a aussi de bonnes nouvelles côté cross-browser avec
view-transition-name: match-element; pour View Transitions et les travaux en cours dans Firefox
- La rationalisation de la multiplication/division dans
calc() avec mélange d’unités approche du stade expérimental validé, ce qui pourrait réduire le besoin des anciens hacks de conversion de type
- L’article soulève aussi l’absence de nommage par version comme « CSS4 », et présente une liste de référence rassemblant les nouveautés des cinq dernières années
Great Stuff to Remember
- Container Queries et leurs unités restent une base essentielle, avec un gain de productivité majeur depuis les media queries
:has() permet des sélections basées sur le parent ou sur l’état, offrant une grande polyvalence pour résoudre en CSS seul des sélections combinatoires complexes- View Transitions, Anchor Positioning, Scroll-Driven Animations ont désormais atteint Safari, ce qui réduit les freins à leur adoption en production
- Les unités de viewport supplémentaires comme dvh sont désormais Baseline, améliorant la stabilité du viewport mobile
Points forts du code et des usages
- Transition de taille : définir globalement
interpolate-size: allow-keywords ou, lors d’un changement d’état, utiliser height: calc-size(auto, size) pour créer une animation sur la hauteur du contenu
- Branchement de grille : avec le pattern
if(media(...): valeur; ... else: valeur;), on concentre les colonnes de template selon les breakpoints dans une seule déclaration
- Select personnalisé :
select, ::picker(select) { appearance: base-select } active un picker personnalisé
- Easing rebond :
animation-timing-function: linear( ... nombreux points ... ) permet de construire une courbe précise de rebond/amortissement
- Chemin de découpe :
clip-path: shape( ... ) permet de mettre en place un masquage de forme responsive basé sur des proportions
Guide d’application en pratique
- Pour les fonctionnalités avec de fortes disparités de prise en charge navigateur, l’adoption doit se faire en privilégiant les fallbacks et en évaluant le rapport entre coût d’entrée et bénéfice
- Les animations, la typographie et les effets visuels sont de bons candidats au PE, tandis que des éléments d’accessibilité essentiels comme l’ordre du focus ou de tabulation devraient attendre une prise en charge plus large
- Les fonctions et branchements personnalisés offrent un ROI maximal lorsqu’ils sont documentés dans les règles de conception et combinés à des tokens et propriétés personnalisées pour devenir des patterns partagés d’équipe
- Les améliorations de UX des formulaires (
field-sizing, Custom Selects) apportent un gain particulièrement perceptible dans des scénarios mobile-first
Conclusion
- Le CSS moderne version 2025 est marqué par l’extension des fonctions de valeurs, des branchements logiques et du contrôle des formes, faisant de cette année un moment où l’on peut « faire davantage en CSS », avec une vraie valeur dans une adoption progressive via le PE
- En s’appuyant sur les fondamentaux (container queries,
:has(), unités de viewport) puis en introduisant en priorité des éléments à fort rendement comme animate-to-auto, if() ou shape(), on obtient une feuille de route réaliste
3 commentaires
On dirait que le CSS est presque devenu un langage à part entière. Il permet désormais des implémentations logiques dans une large mesure... Je me demande même si on peut encore appeler ça une feuille de style.
Il va y avoir plein de fonctionnalités géniales ; des choses qu’il fallait jusqu’ici implémenter en JavaScript
Le CSS s’est vraiment énormément amélioré.