API largement disponible Mars 2026 pour le web

12 API navigateur désormais largement disponibles en mars 2026 : Quoi déployer en production

En mars 2026, 12 API navigateur ont atteint le statut de disponibilité large — ce qui signifie un support stable dans tous les principaux navigateurs depuis au moins 2,5 ans. Cela simplifie les décisions d'implémentation : vérifier Can I Use et les métriques utilisateur confirme la préparation pour la production. L'accent est mis sur les propriétés CSS, les en-têtes HTTP et les événements JavaScript pour optimiser les performances, la typographie et la gestion des données.

Liste des fonctionnalités clés :

• Clear-Site-Data
• contain-intrinsic-size
• @counter-style
• Événements d'orientation de l'appareil
• hyphenate-character
• hyphens
• image-set()
• <link rel="modulepreload">
• Requêtes média overflow
• Gestionnaire de stockage
• Requête média de fréquence de mise à jour
• subgrid

Clear-Site-Data : Réinitialisation complète des données locales

L'en-tête HTTP Clear-Site-Data permet à un serveur d'initier la suppression du stockage du navigateur : cache, cookies, localStorage, IndexedDB, service workers. Il est utilisé lors de la déconnexion, du changement d'utilisateur ou de la récupération suite à un cache corrompu.

Syntaxe et directives

Les directives sont spécifiées entre guillemets doubles, séparées par des virgules :

Clear-Site-Data: "cache"
Clear-Site-Data: "cache", "cookies"
Clear-Site-Data: "*"

Directives clés :

• "cache" — cache HTTP, bfcache, shaders WebGL.
• "cookies" — cookies et authentification HTTP pour le domaine et les sous-domaines.
• "storage" — localStorage, sessionStorage, IndexedDB, service workers.
• "executionContexts" (expérimental) — rechargement des contextes.
• "clientHints" (expérimental) — réinitialisation des Client Hints.
• "prefetchCache", "prerenderCache" (expérimental) — règles de spéculation.
• "*" — tous les types de données.

Exemples d'utilisation

Déconnexion avec nettoyage complet :

HTTP/1.1 200 OK
Clear-Site-Data: "cache", "cookies", "storage", "executionContexts", "prefetchCache", "prerenderCache"
Content-Type: text/html

Cookies uniquement :

Clear-Site-Data: "cookies"

En production, cet en-tête résout les problèmes de données résiduelles après POST /logout, y compris les conflits de service worker et les bundles mis en cache. Les pages de récupération avec "cache", "storage" restaurent rapidement l'état sans DevTools.

contain-intrinsic-size : Stabiliser la mise en page avec le confinement

La propriété contain-intrinsic-size définit des tailles de repli pour les éléments avec contain: size ou content-visibility: auto. Elle empêche le reflow lors du rendu hors de la fenêtre visible en fixant la hauteur/largeur pour le défilement.

Syntaxe

contain-intrinsic-size: none;
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 300px 200px;
contain-intrinsic-size: auto 320px;
contain-intrinsic-size: auto 400px auto 250px;
contain-intrinsic-size: auto none;

Valeurs :

• none — pas de substitution.
• <length> — taille fixe.
• auto <length> — mémorise la taille réelle après le premier rendu.
• auto none — revient à none si aucune mémoire n'est disponible.

Exemples

Flux d'actualités :

.feed-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

Carte produit :

.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

Cette propriété élimine le 'saut' du défilement : sans elle, les blocs invisibles ont une hauteur nulle, provoquant un recalcul au défilement. Le mode auto optimise après le premier rendu.

@counter-style : Styles de liste personnalisés

La règle @counter-style définit des styles de numérotation personnalisés pour les listes en utilisant des descripteurs : system, symbols, additive-symbols. Elle étend les styles intégrés comme decimal, disc, etc.

Syntaxe et descripteurs

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

Descripteurs principaux :

• system : cyclic, numeric, alphabetic, fixed, additive.
• symbols : chaînes/images pour les marqueurs.
• additive-symbols : paires poids-symbole pour les chiffres romains.
• prefix/suffix : encadrement.
• range : valeurs autorisées.
• pad : longueur minimale (remplissage par des zéros).
• fallback : style de repli.

Exemples

Lettres cerclées :

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

.items {
  list-style: circled-alpha;
}

Fusée pour les listes :

@counter-style rocket {
  system: cyclic;
  symbols: "\1F680";
  suffix: " ";
}

ul.features {
  list-style: rocket;
}

Pour les sections :

@counter-style chapter {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ". ";
}

.article h2::before {
  counter-increment: section;
  content: counter(section, chapter);
}

En production, @counter-style simplifie la localisation de la numérotation, minimisant la logique JS/backend. Assurez-vous d'avoir un fallback et speak-as pour l'accessibilité.

Événements d'orientation de l'appareil et autres fonctionnalités

Les événements d'orientation de l'appareil fournissent des données sur l'orientation et l'accélération de l'appareil via des événements DOM. La liste est complétée par : hyphenate-character et hyphens pour la césure, image-set() pour les images responsives, <link rel="modulepreload"> pour le préchargement de modules, les requêtes média overflow/fréquence de mise à jour pour l'adaptation des performances, le gestionnaire de stockage pour les quotas, subgrid pour les grilles.

Points clés à retenir

• Largement disponibles — au moins 2,5 ans de support stable dans tous les navigateurs.
• Vérifiez les métriques utilisateur et Can I Use avant l'implémentation.
• Clear-Site-Data est essentiel pour la déconnexion et la récupération.
• contain-intrinsic-size stabilise le défilement avec content-visibility.
• @counter-style pour une typographie personnalisée sans JS.

— Editorial Team