Compatibilité multi-navigateur par défaut : fonctionnement des solutions de remplacement Baseline dans Modern Web Guidance

Tara Agyemang

Date de publication : 12 novembre 2026

Demandez à un agent de codage IA de créer une info-bulle ou une boîte de dialogue modale, et examinez attentivement le code qu'il écrit. La plupart du temps, l'agent extrait du code JavaScript pour recréer des fonctionnalités intégrées au navigateur. Si vous demandez à l'agent d'utiliser des fonctionnalités CSS ou HTML plus récentes, il ignore souvent la détection des fonctionnalités et les solutions de remplacement. Cette omission laisse les utilisateurs de navigateurs non compatibles avec une page défectueuse.

Modern Web Guidance intègre la compatibilité avec les navigateurs dans chaque recommandation. Chaque guide associe des fonctionnalités Web modernes à des données de compatibilité Baseline et à des modèles de remplacement validés. Cet article explique comment votre agent utilise ces données pour écrire du code moderne et compatible avec plusieurs navigateurs.

Pourquoi les agents de codage se trompent sur la compatibilité des navigateurs sans conseils

Sans instructions, les agents de codage vérifient rarement les navigateurs que votre projet doit prendre en charge avant d'écrire du code. Au lieu de cela, ils ont tendance à tomber dans l'un des deux extrêmes :

• Utilisation par défaut de code ancien : les données d'entraînement des modèles sont pleines de modèles anciens, et les évaluations de Modern Web Guidance montrent que les modèles recommandent encore beaucoup de ces modèles. Les agents écrivent souvent du code JavaScript complexe ou ajoutent des bibliothèques externes alors qu'une fonctionnalité HTML ou CSS intégrée pourrait faire l'affaire.
• Utiliser de nouvelles fonctionnalités sans filet de sécurité : lorsque vous demandez à un agent d'utiliser une fonctionnalité Web plus récente, il écrit généralement du code pour les navigateurs compatibles et s'arrête là. Il ignore la détection des fonctionnalités et ne propose pas de solutions de remplacement, ce qui empêche la page de s'afficher dans les navigateurs qui ne sont pas compatibles avec la fonctionnalité.

Les données de la suite d'évaluation Modern Web Guidance montrent à quel point cet écart est courant. Pour les fonctionnalités qui ne fonctionnent pas encore sur tous les principaux navigateurs, la suite d'évaluation teste la détection des fonctionnalités, les règles @supports, les solutions de remplacement ou les polyfills conditionnels. Les modèles non guidés ne réussissent ces vérifications que dans 43 % des cas. Lorsque Modern Web Guidance est activé, le taux de réussite passe à 87 %.

Comment les données de référence guident chaque recommandation

Pour déterminer quand une fonctionnalité Web nécessite une solution de remplacement, Modern Web Guidance s'appuie sur Baseline. Baseline suit la compatibilité sur l'ensemble des principaux navigateurs (Chrome, Edge, Firefox et Safari sur ordinateur et mobile) avec trois états :

• Baseline : largement disponible : la fonctionnalité est compatible avec tous les principaux navigateurs depuis au moins 30 mois.
• Baseline Newly available : la fonctionnalité est compatible avec tous les principaux navigateurs, à partir de la date à laquelle le dernier navigateur a ajouté la compatibilité.
• Disponibilité limitée : la fonctionnalité n'est pas encore compatible avec tous les principaux navigateurs.

Chaque guide Modern Web Guidance inclut l'état Baseline intégré et les données de version du navigateur du package web-features. Lorsqu'un agent de codage charge un guide, il obtient l'état exact de la compatibilité de la fonctionnalité, les dates de sortie et les versions de navigateur, ainsi que les instructions d'implémentation. Exemple :

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

Par défaut, Modern Web Guidance suit deux règles basées sur ces données :

• Fonctionnalités Baseline largement disponibles : votre agent utilise ces fonctionnalités directement, sans détection de fonctionnalités ni code de remplacement supplémentaires. Cette règle permet de garder votre codebase léger et d'éviter les solutions de contournement inutiles.
• Fonctionnalités Baseline nouvellement disponibles et à disponibilité limitée : les guides de ces fonctionnalités incluent une stratégie de remplacement validée. Votre agent utilise la fonctionnalité moderne lorsqu'elle est compatible et fournit une solution de remplacement propre pour les autres navigateurs.

Quatre modèles de remplacement utilisés par Modern Web Guidance

Toutes les fonctionnalités Web ne nécessitent pas le même type de remplacement. Modern Web Guidance associe chaque fonctionnalité à l'une des quatre approches de remplacement en fonction de son comportement dans les navigateurs non compatibles :

Amélioration progressive sans code de remplacement

Certaines fonctionnalités modernes améliorent la typographie, les animations ou la vitesse de chargement des pages sans modifier leur fonctionnement. Si un navigateur ne reconnaît pas ces fonctionnalités, il les ignore et affiche le reste de la page normalement.

Par exemple, la déclaration CSS text-wrap: balance (Baseline Newly available) égalise la longueur des lignes dans les titres.

.balanced {
  text-wrap: balance;
}

L'API Speculation Rules (disponibilité limitée) précharge ou préaffiche les pages à venir. Les navigateurs non compatibles ignorent les blocs <script type="speculationrules"> et les déclarations CSS non reconnues.

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Grâce à ce comportement, votre agent peut ajouter ces fonctionnalités directement, sans code de remplacement supplémentaire.

Détection des fonctionnalités CSS avec la règle @supports

D'autres fonctionnalités CSS modifient la position ou le style d'un élément à l'écran. Si vous appliquez une partie du style sans condition, les navigateurs non compatibles risquent d'afficher l'élément au mauvais endroit.

Par exemple, les requêtes de conteneur ancrées (container-type: anchored, disponibilité limitée) sur une info-bulle positionnée vous permettent de retourner la flèche de l'info-bulle lorsqu'elle se retourne près du bord de la fenêtre d'affichage. Dans les navigateurs qui ne sont pas compatibles avec les requêtes de conteneur ancrées, la flèche ne peut pas détecter le retournement et peut pointer dans la mauvaise direction. Modern Web Guidance indique à votre agent d'encapsuler les styles de flèche dans une règle @supports (container-type: anchored) afin que la flèche par défaut n'apparaisse que dans les navigateurs qui acceptent également la règle de retournement @container anchored().

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

JavaScript personnalisé léger

Lorsqu'une fonctionnalité HTML interactive n'est pas compatible avec tous les principaux navigateurs, il n'est pas nécessaire d'extraire une bibliothèque tierce. Pour les interactions autonomes, Modern Web Guidance fournit un court remplacement JavaScript sans dépendance derrière une vérification de fonctionnalité.

Par exemple, l'attribut closedby="any" d'un élément <dialog> (disponibilité limitée) permet aux utilisateurs de fermer une boîte de dialogue modale en cliquant sur l'arrière-plan. Pour les navigateurs qui ne sont pas compatibles avec l'attribut closedby, le guide inclut un petit écouteur de clics qui vérifie d'abord l'objet HTMLDialogElement.prototype :

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

Polyfills chargés de manière conditionnelle

Pour les fonctionnalités de plate-forme plus importantes, telles que le positionnement d'ancrage CSS (disponibilité limitée) ou l'API Temporal (disponibilité limitée), il n'est pas pratique d'écrire manuellement une solution de remplacement personnalisée. En même temps, l'intégration d'un polyfill pour chaque utilisateur ajoute un coût de téléchargement supplémentaire pour les navigateurs qui prennent déjà en charge la fonctionnalité.

Dans ce cas, Modern Web Guidance indique à votre agent de vérifier d'abord la compatibilité et de charger un polyfill validé de manière dynamique avec l'expression import() à partir de votre bundler ou d'un CDN. Les navigateurs compatibles ne téléchargent aucun code supplémentaire, tandis que les anciens navigateurs récupèrent le polyfill à la demande.

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

Personnaliser la cible de compatibilité du navigateur de votre projet

Par défaut, Modern Web Guidance considère que les fonctionnalités Baseline largement disponibles peuvent être utilisées en toute sécurité sans solution de remplacement. Il nécessite des solutions de remplacement pour les fonctionnalités Baseline Newly available et disponibilité limitée.

Votre projet peut avoir des exigences différentes concernant les navigateurs. Par exemple, vous pouvez cibler une année Baseline spécifique, compiler pour une application Electron ou exclure les polyfills pour que les bundles restent petits.

Vous pouvez définir une règle personnalisée de compatibilité avec les navigateurs dans le fichier AGENTS.md ou CLAUDE.md de votre projet :

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

Chaque guide inclut l'état Baseline, la date de sortie et les versions minimales du navigateur pour chaque fonctionnalité. Votre agent compare votre règle à ces données de compatibilité avant d'écrire du code. Lorsqu'une fonctionnalité répond déjà à votre cible, l'agent écrit le code moderne et ignore le code de remplacement.

Tester le chemin d'accès moderne et le chemin d'accès de remplacement

Écrire du code compatible avec plusieurs navigateurs ne représente que la moitié du travail. Vous devez également tester le chemin de code moderne et le chemin de remplacement dans de vrais navigateurs.

Lorsque vous effectuez des tests dans un seul navigateur, vous ne vérifiez qu'une seule branche de votre code. Par exemple, Chrome et Firefox exécutent l'attribut closedby="any" natif sur un élément <dialog>, tandis que Safari exécute le remplacement JavaScript de clic en dehors de l'élément. Si vous inspectez la boîte de dialogue dans Chrome uniquement, cet écouteur de remplacement ne s'exécute jamais pendant votre test.

Pour vérifier les deux chemins de code, connectez votre agent de codage à plusieurs moteurs de navigateur en même temps :

• Outils de développement Chrome pour les agents : connectez votre agent à Chrome pour inspecter la mise en page, les journaux de la console et le comportement d'exécution.
• MCP des outils de développement Firefox : connectez votre agent à une instance Firefox active via WebDriver BiDi.
• Serveur MCP Safari : connectez votre agent à Safari à l'aide de la commande safaridriver --mcp intégrée.

Une fois les trois outils connectés, votre agent peut ouvrir votre page dans Chrome, Firefox et Safari en un seul workflow. Elle peut ensuite confirmer que la fonctionnalité native et l'expérience de remplacement fonctionnent toutes deux comme prévu.

Premiers pas avec Modern Web Guidance

Pour ajouter Modern Web Guidance à votre projet, exécutez le programme d'installation interactif à partir du répertoire de votre projet :

npx modern-web-guidance@latest install

Si vous avez installé une version antérieure, exécutez la commande de mise à jour pour passer à la version 1.0 :

npx modern-web-guidance@latest update

Vous pouvez également installer Modern Web Guidance via les places de marché de plug-ins pour Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code et Grok.

Pour en savoir plus, consultez les ressources suivantes :

• Documentation Modern Web Guidance
• Dépôt GitHub
• Tableau de bord d'évaluation
• Documentation sur Baseline sur web.dev