Baseline : Une nouvelle façon de penser la compatibilité des navigateurs

Pendant des années, les développeurs frontend se sont débattus avec une question obsolète : « Quelles versions de navigateurs prenons-nous en charge ? » Cette formulation avait du sens lorsqu’Internet Explorer dominait et que les navigateurs se mettaient à jour annuellement. Aujourd’hui, Chrome et Firefox publient de nouvelles versions toutes les quelques semaines. Safari se met à jour régulièrement. L’ancien modèle mental ne convient plus.

Web Platform Baseline offre une meilleure approche. Au lieu de suivre les versions de navigateurs, vous suivez la disponibilité des fonctionnalités. Cet article explique comment fonctionne Baseline, pourquoi cela compte pour la compatibilité moderne des navigateurs, et comment l’appliquer dans vos projets.

Qu’est-ce que Web Platform Baseline ?

Baseline est une initiative multi-fournisseurs soutenue par Google, Microsoft, Apple et Mozilla via le W3C WebDX Community Group. Vous trouverez des indicateurs Baseline sur MDN, web.dev et Can I Use.

Baseline répond à une question simple : Puis-je utiliser cette fonctionnalité en toute sécurité sur tous les navigateurs ?

Elle définit un ensemble de navigateurs principaux :

• Chrome (ordinateur et Android)
• Edge
• Firefox (ordinateur et Android)
• Safari (macOS et iOS)

Lorsqu’une fonctionnalité fonctionne sur tous ces navigateurs, elle obtient le statut Baseline.

Les trois états de disponibilité

Les fonctionnalités Baseline se répartissent en trois catégories :

Disponibilité limitée : La fonctionnalité existe dans certains navigateurs mais pas tous. À utiliser avec précaution ou avec des polyfills.

Nouvellement disponible : La fonctionnalité fonctionne dans toutes les versions stables de chaque navigateur principal. Elle est interopérable mais récente.

Largement disponible : La fonctionnalité est présente dans tous les navigateurs principaux depuis au moins 30 mois. La plupart des utilisateurs y ont accès.

Le seuil de 30 mois pour « Largement disponible » n’est pas arbitraire. Il tient compte des utilisateurs qui ne mettent pas à jour immédiatement, des appareils plus anciens et des navigateurs dérivés qui héritent des moteurs principaux. Après 30 mois, une fonctionnalité a généralement atteint presque tout le monde.

Pourquoi ce changement de modèle mental est important

Les politiques traditionnelles basées sur les versions créent des problèmes. Que signifie « les deux dernières versions de Firefox » lorsque Firefox publie six versions majeures au cours d’un seul projet ? La cible ne cesse de bouger.

La réflexion basée sur la disponibilité des fonctionnalités résout ce problème. Au lieu de demander « Quelles versions de navigateurs prenons-nous en charge ? », vous demandez « Cette fonctionnalité est-elle Baseline ? »

Ce changement offre trois avantages pratiques :

Des décisions plus claires. Vérifiez l’indicateur Baseline sur MDN. S’il affiche « Largement disponible », utilisez la fonctionnalité en toute confiance. Pas de calcul mental sur les numéros de version.

Une meilleure communication avec les parties prenantes. « Nous utilisons des fonctionnalités disponibles dans tous les navigateurs depuis plus de 30 mois » est plus facile à expliquer que « les deux dernières versions de Chrome, Firefox et Safari, plus Firefox ESR, plus tout ce qui dépasse 0,5 % d’utilisation mondiale ».

Une cohérence améliorée. Les équipes prennent moins de décisions subjectives. La politique s’applique uniformément à tous les projets.

Comment appliquer Baseline en pratique

L’adoption de Baseline suit un schéma simple :

Pour les fonctionnalités de base, appuyez-vous sur les fonctionnalités Largement disponibles. Elles forment votre fondation. Les utilisateurs sans navigateurs modernes obtiennent toujours une expérience fonctionnelle.

Pour les améliorations progressives, utilisez les fonctionnalités Nouvellement disponibles avec la détection de fonctionnalités. Encapsulez-les dans des blocs @supports ou des vérifications JavaScript. Les utilisateurs avec des navigateurs plus anciens obtiennent l’expérience de base, tandis que les autres obtiennent la version améliorée.

/* Solution de repli largement disponible */
.container {
  max-width: 100%;
}

/* Amélioration nouvellement disponible */
@supports (container-type: inline-size) {
  .container {
    container-type: inline-size;
  }
}

Le CSS ci-dessus est un exemple clair d’amélioration progressive. Tous les navigateurs comprennent max-width: 100%. Les navigateurs qui prennent également en charge les requêtes de conteneur obtiennent la mise en page plus performante. Rien ne se casse pour personne.

Intégrer Baseline avec vos outils

Baseline est de plus en plus pris en charge dans les outils de développement. Browserslist prend désormais en charge les requêtes Baseline directement (par exemple, cibler les fonctionnalités « largement disponibles » ou une année Baseline spécifique), aidant à maintenir vos outils de build alignés avec votre politique de prise en charge. Le package browserslist-config-baseline fournit une configuration prête à l’emploi si vous préférez ne pas écrire de requêtes vous-même.

La prise en charge CSS d’ESLint (@eslint/css) inclut une règle use-baseline qui peut signaler les propriétés sortant de votre seuil Baseline choisi. Bien qu’imparfaite — elle peut être trop stricte concernant les modèles d’amélioration progressive — elle indique la direction que prend l’écosystème.

Attendez-vous à une intégration plus étroite avec les outils de build, les linters et les frameworks à mesure que l’adoption de Baseline se développe.

Baseline est une valeur par défaut, pas une garantie

Baseline fournit un point de départ solide, mais ne remplace pas le jugement. Des cas particuliers existent. Une fonctionnalité peut être Baseline mais comporter un bug significatif dans un navigateur. Les préoccupations d’accessibilité peuvent nécessiter des tests au-delà des données de compatibilité. Les environnements d’entreprise avec des navigateurs verrouillés nécessitent une considération séparée.

Utilisez Baseline comme hypothèse par défaut, puis vérifiez lorsque les enjeux sont élevés.

Conclusion

Web Platform Baseline représente un changement fondamental : des matrices de prise en charge basées sur les versions vers une réflexion basée sur la disponibilité des fonctionnalités. Cela réduit la charge cognitive, améliore la communication d’équipe et s’aligne sur le fonctionnement réel des navigateurs modernes.

Commencez par vérifier le statut Baseline sur MDN avant d’utiliser de nouvelles fonctionnalités. Adoptez « Largement disponible » comme fondation. Superposez les fonctionnalités « Nouvellement disponibles » via l’amélioration progressive. Laissez les outils rattraper leur retard pour soutenir votre flux de travail.

La question n’est pas quels navigateurs vous prenez en charge. C’est quelles fonctionnalités vous avez besoin.

FAQ

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.