CSS enveloppé 2025 —

Si je devais diviser les évolutions CSS en catégories, nous avons dépassé l’époque où nous demandions simplement border-radius 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é.

L’équipe Chrome « CSS enveloppé 2025 » n’est pas seulement une liste de fonctionnalités ; c’est un manifeste pour un Web dynamique et natif. Pour quelqu’un qui a passé quelques années à documenter ces évolutions – de définir les époques « CSS5 » aux subtilités de utilitaires de mise en page modernes — Je me retrouve à regarder la synthèse 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 pourrez trouver un aperçu complet des fonctionnalités remarquables du rapport de Chromevu à travers le prisme de mes récentes expériences et de mes espoirs pour l’avenir de la plateforme.

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 profonde dans l’histoire de la sélection personnalisable (et articles connexes), cela a été un long chemin impliquant Ouvrir l’interface utilisateurdes noms de bikeshed comme <selectmenu> et <selectlist>et enfin atterrir sur une solution qui réutilise l’existant <select> élément.

L’introduction de appearance: base-select est une base solide. Cela nous permet de personnaliser entièrement le <select> élément – y compris le bouton et la liste déroulante (via ::picker(select)) — en utilisant le CSS standard. Fondamentalement, cela est construit dans un souci d’amélioration progressive. En englobant nos styles dans une requête de fonctionnalité, nous garantissons une expérience transparente sur tous les navigateurs.

Nous pouvons adopter ce nouveau comportement sans casser les anciens navigateurs :

select {
  /* Opt-in for the new customizable select */
  @supports (appearance: base-select) {
    &, &::picker(select) {
      appearance: base-select;
    }
  }
}

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éé un Démo Poké-aventure montrant comment le nouveau <selectedcontent> L’élément peut cloner du contenu riche (comme une icône Pokéball) à partir d’une option directement dans le bouton.

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.

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 de ::scroll-marker et ::scroll-button() les pseudo-éléments changent 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 y a eu quelques problèmes d’accessibilité autour de cette fonctionnalité, et même si ceux-ci étaient vraiment valables, je suis sûr que c’est à 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 en utilisant scroll-marker-group et stylisez les boutons en utilisant le positionnement des ancres pour les placer exactement là où nous voulons.

.carousel {
  overflow-x: auto;
  scroll-marker-group: after; /* Creates the container for dots */

  /* Create the buttons */
  &::scroll-button(inline-end),
  &::scroll-button(inline-start) {
    content: " ";
    position: absolute;
    /* Use anchor positioning to center them */
    position-anchor: --carousel;
    top: anchor(center);
  }

  /* Create the markers on the children */
  div {
    &::scroll-marker {
      content: " ";
      width: 24px;
      border-radius: 50%;
      cursor: pointer;
    }
    /* Highlight the active marker */
    &::scroll-marker:target-current {
      background: white;
    }
  }
}

Requêtes d’état : une chose collante est bloquée ? Un truc accrocheur cassé ?

Pendant longtemps, nous n’avons pas pu savoir si un « un objet collant est coincé » ou si un « élément accrocheur est cassé » sans compter sur les 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 container-type: scroll-statenous pouvons désormais styliser les enfants selon qu’ils sont coincé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 : on peut enfin appliquer une ombre sur un en-tête seulement quand il colle réellement au haut de la fenêtre :

.header-container {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  header {
    transition: box-shadow 0.5s ease-out;
    /* The query checks the state of the container */
    @container scroll-state(stuck: top) {
      box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px;
    }
  }
}

• Démo : UN en-tête collant cela n’applique une ombre que lorsqu’elle est réellement bloquée.

• Démo : UN Liste sur le thème des 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 caractère actuellement capturé.

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 :

1. if() Déclarations
   Nous obtenons enfin des conditions en CSS. Le if() La fonction 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 verbeux @media blocs pour les modifications de propriétés uniques.
2. @function fonctions
   Nous pouvons enfin déplacer une certaine logique vers un endroit différent, ce qui donne lieu à des fichiers plus propres, une véritable fonctionnalité de qualité de vie.
3. 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 simplecela élimine le besoin de coder en dur les 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 :

.card-container > * {
  animation: reveal 0.6s ease-out forwards;
  /* No more manual --index variables! */
  animation-delay: 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 : Placer des objets dans un cercle parfait en utilisant sibling-index, sibling-countet le nouveau CSS @function fonctionnalité.

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 l’occasion 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 carrousel, mais « CSS Wrapped » met en évidence une é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 des requêtes de conteneur ancrées (@container anchored(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 cela pourrait bien être la réponse. En utilisant view-transition-group: nearestnous 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.

.card img {
  view-transition-name: photo;
  view-transition-group: nearest; /* Keep it nested! */
}

Typographie et formes

Enfin, l’ergonome en moi a hâte d’essayer Garniture de la zone de textequi 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 le shape() Les fonctions ouvrent des dispositions 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 où CSS devient capable de gérer la logique, les états et les interactions complexes qui appartenaient auparavant à JavaScript. Des fonctionnalités comme moveBefore (en préservant l’état du DOM pour les iframes/vidéos) et attr() (en utilisant des types au-delà des chaînes pour les couleurs et les grilles) cimentent davantage cette réalité.

Si certaines de ces fonctionnalités sont pour l’instant 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 CSS enveloppé!

(gg, ouais)