Contexte d'Interop et adoption historique

Depuis 2020, les principaux fournisseurs de navigateurs – Google, Apple, Microsoft, Mozilla, ainsi que les équipes d'Igalia et Bocoup – collaborent via le projet Interop pour aligner le support des standards web. L’exemple du subgrid illustre la dynamique : implémenté dans Firefox en 2019, il a été ajouté à Interop en 2023 et a atteint près de 100 % de disponibilité sur les navigateurs majeurs avant la fin de l’année. En 2026, Mozilla a lancé un système de vote qui alimente la feuille de route d’Interop 2027, permettant aux développeurs de prioriser les fonctionnalités les plus demandées.

Fonctions CSS et mécanisme d'exécution

Le groupe Chromium a déjà intégré une syntaxe @function qui rappelle la déclaration de fonctions JavaScript. La fonction reçoit des variables personnalisées et renvoie une valeur via la déclaration result. Exemple :

@function --gradient-to-transparent(--color, --direction: bottom) {
  result: linear-gradient(
    to var(--direction),
    var(--color),
    transparent
  );
}
.elem { background: --gradient-to-transparent(red); }

Lors du calcul du style, le moteur CSS résout d’abord les variables, puis exécute la fonction dans le même thread que le cascade, évitant ainsi les appels externes. Cette approche conserve la sécurité du modèle sandbox, car aucune logique arbitraire n’est exécutée ; seules les opérations CSS standard (calculs, fonctions de couleur, transformations) sont permises. Le principal défi réside dans la phase de recomposition : chaque modification de variable déclenche la réévaluation de toutes les fonctions dépendantes, ce qui peut augmenter la charge de travail du layout si le nombre de fonctions est élevé.

Propriétés de forme : corner‑shape et border‑shape

La proposition corner‑shape introduit de nouveaux modes de connexion des côtés d’un élément, dont le squircle basé sur les superellipses. Contrairement à clip-path, la forme modifie réellement la boîte de bordure, ce qui entraîne un suivi correct des bordures, des ombres et des outlines. En octobre 2026, la propriété reste absente de Firefox et Safari, mais les développeurs peuvent l’utiliser comme amélioration progressive grâce à la détection de support.

Le border‑shape offre un contrôle de bas niveau en autorisant la définition de lignes, d’arcs et de courbes de Bézier pour dessiner la bordure. Cette capacité permet d’animer la forme du contour en interpolant les points de contrôle, ce qui s’intègre aux animations CSS sans recourir à du SVG externe. Le rendu passe par le pipeline de peinture du navigateur : le calcul du chemin de bordure se fait avant le rasterisation, garantissant une synchronisation précise avec les transformations CSS.

Container queries ancrés et détection de fallback

L’API d’ancrage, adoptée dans Interop 2026, a déjà fourni les outils de positionnement relatif entre deux éléments. La version « Level 2 » ajoute un type de container query capable de détecter si l’élément cible utilise la position de secours (fallback). Cette information, exposée via une pseudo‑classe, permet de conditionner l’ajout d’un pointeur visuel ou d’ajuster la taille du tooltip sans JavaScript. L’impact sur le moteur de mise en page est limité : la requête ne déclenche qu’une vérification de l’état de l’ancre, évitant une recomposition complète.