Si je devais diviser les évolutions CSS en catégories, nous avons dépassé l'époque où nous demandions simplement un rayon-frontière pour avoir l'impression de vivre dans le futur. Nous vivons actuellement à une époque où la plate-forme nous fournit des outils qui ne se contentent pas de modifier la couche visuelle, mais redéfinissent fondamentalement la façon dont nous concevons les interfaces. Je pensais que le nombre de fonctionnalités annoncées en 2024 ne pourrait pas être dépassé. Je ne me suis jamais aussi trompé.
Le « CSS Wrapped 2025 » de l’équipe Chrome n’est pas seulement une liste de fonctionnalités ; c'est un manifeste pour un web dynamique et natif. En tant que personne ayant passé quelques années à documenter ces évolutions – de la définition des époques « CSS5 » aux subtilités des utilitaires de mise en page modernes – je me retrouve à regarder la conclusion de cette année avec un immense sentiment d’enthousiasme. Nous assistons à une évolution vers une « ergonomie optimisée » et des « interactions nouvelle génération » qui nous permettent de cesser de lutter contre le code et de commencer à sculpter les interfaces dans leur état naturel.
Dans cet article, vous pouvez trouver un aperçu complet des fonctionnalités remarquables du rapport de Chrome, vues à travers le prisme de mes récentes expériences et de mes espoirs pour l’avenir de la plate-forme.
La révolution des composants : enfin une sélection native personnalisable
Pendant des années, nous nous sommes appuyés sur de lourdes bibliothèques JavaScript pour styliser les listes déroulantes, un « problème vieux de plusieurs décennies » que la plateforme a finalement résolu. Comme je l'ai détaillé dans ma plongée approfondie dans l'histoire de la sélection personnalisable (et les articles associés), cela a été un long chemin impliquant Open UI, des noms de suppression de vélos comme
L'ajout fantastique permettant d'autoriser un contenu riche dans des options, telles que des images ou des drapeaux, est très amusant. Nous pouvons créer toutes sortes de sélections de nos jours :
Démo : j'ai créé une démo de Poké-adventure montrant comment le nouvel élément
Voir la sélection personnalisable Pen A avec des images à l'intérieur des options et le contenu sélectionné [forked] par utilitybend.
Démo : un aperçu complet du style de la sélection avec uniquement des pseudo-éléments.
Voir la sélection personnalisable Pen A avec uniquement des pseudo-éléments [forked] par utilitybend.
Démo : Ou vous pouvez passer au niveau supérieur avec cette démo de sélection de menu à l'aide d'optgroups.
Voir le Pen Un menu de sélection réel avec optgroups [forked] par utilitybend. Cette fonctionnalité à elle seule signale un changement massif dans la façon dont nous allons créer des formulaires, réduisant ainsi les dépendances et la dette technique. Marqueurs de défilement et mort du carrousel JavaScript La création de carrousels a toujours été un point de friction entre les développeurs et les clients. Les clients les adorent, les développeurs redoutent le JavaScript nécessaire pour les rendre accessibles et performants. L’arrivée des pseudo-éléments ::scroll-marker et ::scroll-button() change complètement cette dynamique. Ces fonctionnalités nous permettent de créer des points de navigation et des boutons de défilement uniquement avec du CSS, liés nativement au conteneur de défilement. Comme je l'ai écrit sur mon blog, c'était l'amour au premier slide. La possibilité de créer un curseur entièrement fonctionnel et accessible sans une seule ligne de JavaScript n’est pas seulement pratique ; c'est un triomphe pour la performance. Il existe certains problèmes d'accessibilité autour de cette fonctionnalité, et même si ceux-ci sont valides, il pourrait y avoir un moyen pour nous, développeurs, de la faire fonctionner. La bonne nouvelle est que tous ces changements dans l'interface utilisateur rendent les choses beaucoup plus faciles que la manipulation personnalisée du DOM et le déplacement des balises aria, mais je m'éloigne du sujet… Nous pouvons désormais regrouper automatiquement les marqueurs à l'aide de scroll-marker-group et styliser les boutons en utilisant le positionnement des ancres pour les placer exactement là où nous le souhaitons.
.carrousel { débordement-x : auto ; groupe de marqueurs de défilement : après ; /* Crée le conteneur pour les points */
/* Crée les boutons */ &::bouton de défilement (fin en ligne),&::bouton de défilement (démarrage en ligne) { contenu : " " ; position : absolue ; /* Utiliser le positionnement des ancres pour les centrer */ position-ancre : --carrousel ; en haut : ancre (centre) ; }
/* Crée les marqueurs sur les enfants */ div{ &::marqueur de défilement { contenu : " " ; largeur : 24 px ; rayon de bordure : 50 % ; curseur : pointeur ; } /* Mettez en surbrillance le marqueur actif */ &::scroll-marker:cible-courant { fond : blanc ; } } }
Démo : Mon expérience créant un carrousel uniquement à partir de HTML et CSS, en utilisant le positionnement des ancres pour placer les boutons.
Voir le Pen Carousel Pure HTML et CSS [forked] par utilitybend.
Démo : un remake de curseur astucieux de boutique en ligne utilisant attr() pour extraire dynamiquement les images d'arrière-plan dans les marqueurs.
Voir le remake du curseur élégant Pen Webshop en CSS [forked] par utilitybend. Requêtes d'état : une chose collante est bloquée ? Un truc accrocheur cassé ? Pendant longtemps, nous n'avons pas eu la capacité de savoir si un « élément collant est coincé » ou si un « élément accrocheur est cassé » sans nous fier aux hacks d'IntersectionObserver. Chrome 133 a introduit les requêtes d'état de défilement, nous permettant d'interroger ces états de manière déclarative. En définissant conteneur-type: scroll-state, nous pouvons désormais styliser les enfants selon qu'ils sont bloqués, cassés ou débordants. C’est une amélioration massive de la « qualité de vie » que j’attendais avec impatience depuis le CSS Day 2023. Elle a même beaucoup évolué puisqu’on voit aussi le sens du scroll, adorable ! Pour un exemple simple : nous pouvons enfin appliquer une ombre à un en-tête uniquement lorsqu'elle colle réellement au haut de la fenêtre : .header-conteneur { type de conteneur : état de défilement ; position : collante ; haut : 0 ;
en-tête { transition : retrait de l'ombre de la boîte en 0,5 s ; /* La requête vérifie l'état du conteneur */ @container scroll-state (bloqué : haut) { boîte-ombre : rgba(0, 0, 0, 0.6) 0px 12px 28px 0px ; } } }
Démo : un en-tête collant qui n'applique une ombre que lorsqu'elle est réellement bloquée.
Voir les en-têtes Pen Sticky avec requête d'état de défilement, vérifiant si l'élément collant est bloqué [forked] par utilitybend.
Démo : une liste sur le thème Pokémon qui utilise des requêtes d'état de défilement combinées au positionnement d'ancre pour déplacer un cadre sur le personnage actuellement capturé.
Consultez la requête Pen Scroll-state pour vérifier quel élément est capturé avec CSS, version Pokemon [forked] par utilitybend. Ergonomie optimisée : logique en CSS La section « Ergonomie optimisée » de CSS Wrapped met en évidence les fonctionnalités qui rendent nos flux de travail plus intuitifs. Trois fonctionnalités se démarquent comme transformatrices dans la façon dont nous écrivons la logique :
Déclarations if()Nous obtenons enfin des conditions en CSS. La fonction if() agit comme un opérateur ternaire pour les feuilles de style, nous permettant d'appliquer des valeurs basées sur des requêtes de support, de support ou de style en ligne. Cela réduit le besoin de blocs @media détaillés pour les modifications de propriétés uniques. Fonctions @functionNous pouvons enfin déplacer une partie de la logique vers un endroit différent, ce qui entraîne des fichiers plus propres, une véritable fonctionnalité de qualité de vie. sibling-index() et sibling-count()Ces fonctions de comptage d'arbres résolvent le problème des animations décalées ou du style des éléments en fonction de la taille de la liste. Comme je l'ai exploré dans Styliser les frères et sœurs avec CSS n'a jamais été aussi simple, cela élimine le besoin de coder en dur des propriétés personnalisées (comme --index: 1) dans notre HTML.
Exemple : Calculer des mises en page Nous pouvons désormais écrire des formules mathématiques concises. Par exemple, échelonner une animation pour les cartes entrant à l’écran devient trivial : .conteneur de carte > * { animation : révélez un ralentissement de 0,6 s vers l'avant ; /* Plus de variables --index manuelles ! */ délai d'animation : calc(sibling-index() * 0,1s); }
J'ai même expérimenté l'utilisation de ces fonctions avec la trigonométrie pour placer des éléments dans un cercle parfait sans aucun JavaScript.
Démo : animations de cartes stupéfiantes de manière dynamique.
Voir les cartes Pen Stagger utilisant sibling-index() [forked] par utilitybend.
Démo : placer des éléments dans un cercle parfait à l'aide de sibling-index, sibling-count et de la nouvelle fonctionnalité CSS @function.
Voir le stylo Le cercle utilisant sibling-index, sibling-count et les fonctions [forked] par utilitybend. Ma liste de tâches CSS : fonctionnalités que j'ai hâte d'essayer Pendant que j'étais occupé à sculpter des sélections et des transitions, le rapport « CSS Wrapped 2025 » regorge d'autres goodies que je n'ai pas encore eu la chance de lancer dans CodePen. Ceux-ci figurent en bonne place sur ma liste pour mes prochaines expériences : Requêtes de conteneur ancrées J'ai utilisé CSS Anchor Positioning pour les boutons de ma démo de carrousel, mais « CSS Wrapped » met en évidence unévolution de ceci : requêtes de conteneur ancrées. Cela résout un problème que nous avons tous rencontré avec les info-bulles : si le navigateur retourne l’info-bulle de haut en bas en raison de contraintes d’espace, la « flèche » reste souvent pointée dans la mauvaise direction. Avec les requêtes de conteneur ancrées (@containeranchoed(fallback: flip-block)), nous pouvons styliser l'élément en fonction de la position de repli réellement choisie par le navigateur. Groupes de transition de vue imbriquée Les transitions de vue ont été une révolution, mais elles s'accompagnaient d'un compromis spécifique : elles aplatissaient l'arborescence des éléments, ce qui cassait souvent les transformations 3D ou débordait : clip. J'ai toujours eu le sentiment qu'il manquait quelque chose, et ceci pourrait bien être la réponse. En utilisant view-transition-group: close, nous pouvons enfin imbriquer les groupes de transition les uns dans les autres. Cela nous permet de conserver des effets de détourage ou des rotations 3D lors d'une transition, ce qui était auparavant impossible car les éléments étaient hissés au niveau supérieur. .carte img { vue-transition-nom : photo ; groupe de transition de vue : le plus proche ; /* Gardez-le imbriqué ! */ }
Typographie et formes Enfin, l'ergonome en moi a hâte d'essayer Text Box Trim, qui promet de supprimer cet espace supplémentaire ennuyeux au-dessus et au-dessous du contenu du texte (le premier) pour enfin obtenir un alignement vertical parfait. Et pour le côté créatif, corner-shape et la fonction shape() ouvrent des mises en page non rectangulaires, permettant des « carrés » et des chemins complexes qui répondent aux variables CSS. Cela étant dit, j’ai hâte d’avoir un design plein d’écureuils ! Un avenir plein d'espoir Nous assistons à un monde dans lequel CSS devient capable de gérer la logique, les états et les interactions complexes qui appartenaient auparavant à JavaScript. Des fonctionnalités telles que moveBefore (préservation de l'état DOM pour les iframes/vidéos) et attr() (utilisation de types au-delà des chaînes pour les couleurs et les grilles) cimentent davantage cette réalité. Si certaines de ces fonctionnalités sont actuellement expérimentales ou spécifiques à Chrome, la dynamique est indéniable. Nous devons espérer une prise en charge continue sur tous les navigateurs grâce à des initiatives telles que Interop pour garantir que ces fonctionnalités deviennent la référence. Cela étant dit, disposer de moteurs de navigation est tout aussi important que de disposer de toutes ces fonctionnalités impressionnantes dans « Chrome d’abord ». Ces nouvelles fonctionnalités doivent être discutées, bricolées et testées avant d'arriver dans les navigateurs. C'est un moment fantastique pour se lancer dans CSS. Nous ne nous contentons plus de styliser des documents ; nous créons des applications dynamiques, ergonomiques et robustes avec une boîte à outils native plus puissante que jamais. Lançons-nous dans cette nouvelle ère et faisons passer le message. C'est du CSS enveloppé !
