Interop 2027 : les nouveautés CSS à utiliser dès aujourd'hui

Interop 2027 est en cours de préparation, et la plupart des propriétés CSS de la liste de souhaits fonctionnent déjà dans Chrome et Edge. Certaines peuvent partir en production aujourd'hui, à condition que la page reste correcte sans elles. Voici cinq fonctionnalités tirées du top 10 de Josh W. Comeau, leur état actuel, et un tri simple : à utiliser maintenant ou à attendre.

Interop en un exemple

Interop est un projet annuel où les grands éditeurs de navigateurs (Google, Apple, Microsoft et Mozilla, avec Igalia et Bocoup) choisissent ensemble des axes de travail. L'exemple de Comeau, c'est Subgrid : Firefox l'a livré en 2019, les autres n'ont presque pas bougé pendant des années, puis il est entré dans Interop 2023, et à la fin de cette année-là il était disponible dans tous les navigateurs modernes. Pour 2027, Mozilla a ouvert un classement où les développeurs votent pour les fonctionnalités qu'ils veulent, et l'équipe compte s'en servir pour choisir les axes.

Une seule ligne de support vaut pour tout ce qui suit et qui a une fiche caniuse. Les encadrés de Comeau, en octobre 2026, disent tous la même chose : supporté dans Chrome 155 et Edge 154, pas dans Firefox 157 ni Safari 27. La vraie question n'est donc pas « est-ce que ça marche partout ? », mais « que se passe-t-il là où ça ne marche pas ? ».

Dès aujourd'hui : corner-shape

corner-shape change la façon dont border-radius relie deux côtés. Au lieu du quart de cercle, on peut demander squircle, bevel, notch ou scoop. Contrairement à clip-path, elle modifie la border box elle-même : bordures, outlines et ombres suivent le nouveau coin. Comeau parle d'une amélioration progressive parfaite : Firefox et Safari gardent simplement le coin arrondi.

.card {
  border-radius: 16px;
  corner-shape: bevel;
}

Pour régler le rayon d'abord, le générateur de border-radius donne la valeur, et le biseau vient par-dessus. Pour une forme qui doit être identique partout dès aujourd'hui, l'outil reste clip-path, avec ce que cela implique pour les ombres.

Dès aujourd'hui, derrière @supports : interpolate-size

interpolate-size: allow-keywords permet une transition de height: 0 vers height: auto, l'accordéon que tout le monde simule en JavaScript. Comeau précise que c'est dans Chrome depuis 2024, et son conseil est net : placer la transition dans une requête @supports, sinon les navigateurs non compatibles reçoivent un petit délai en plus.

html {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 300ms, content-visibility 300ms;
    transition-behavior: allow-discrete;
  }
  details:open::details-content {
    height: auto;
  }
}

Avec prudence : reading-flow et les requêtes scroll-state

reading-flow règle un vrai problème d'accessibilité. L'ordre de tabulation suit le DOM, donc une grille qui se réorganise sur mobile fait parcourir les éléments au clavier dans un ordre qui ne correspond plus à l'écran. reading-flow: grid-rows fait suivre au focus les rangées visibles, et reading-order donne un contrôle plus fin. Livrez-la, mais ne comptez pas encore dessus : dans Firefox et Safari, l'ordre reste celui du DOM, qui doit donc rester logique.

Les requêtes de conteneur scroll-state indiquent au CSS quand un en-tête en position: sticky est collé, ou si un conteneur peut encore défiler vers le haut ou le bas. Ailleurs, l'en-tête ne change simplement pas d'apparence, ce qui convient la plupart du temps.

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .header-content { border-bottom: 1px solid; }
}

À attendre : les fonctions CSS

@function permet de définir sa propre fonction CSS avec des paramètres et un result, puis de l'appeler comme --gradient-to-transparent(red). C'est la plus enthousiasmante de la liste et la pire à livrer en amélioration progressive, car une fonction produit en général une valeur dont le design dépend. Là où elle n'est pas supportée, la déclaration est ignorée et la propriété retombe sur la valeur précédente. Apprenez-la maintenant, gardez-la hors du CSS de production tant qu'un seul moteur la gère.

La liste de Comeau compte cinq autres choix, dont border-shape, les décorations de gouttière avec la propriété rule, les animations déclenchées au défilement et une fonction inherit() proposée qu'aucun navigateur n'implémente encore, selon lui.

Prochaine étape : choisissez une carte ou un accordéon de votre site, ajoutez corner-shape ou le bloc interpolate-size, puis ouvrez la page dans Firefox ou Safari pour vérifier que rien n'a cassé. Ensuite, votez dans le classement Interop 2027. Source : Josh W. Comeau, The Future of CSS: My top 10 picks for Interop 2027.