Qu'est-ce que Baseline ?
Tout sur Baseline !
Pendant des années, chaque développeur Web s'est posé la même question avant d'utiliser une nouvelle fonctionnalité :
« Est-ce que ça fonctionne dans tous les navigateurs ? » La réponse n'était jamais simple...
Il fallait ouvrir Can I Use, comparer les versions de Chrome, Firefox, Safari, Edge, se demander quelles versions étaient encore utilisées par les utilisateurs, s'il fallait un polyfill, un fallback ou carrément renoncer.
Depuis 2023, un nouveau concept est apparu : Baseline.
Il ne remplace pas totalement Can I Use, mais il change profondément la façon de raisonner sur la compatibilité des navigateurs.
Le problème que résoud Baseline : une compatibilité difficile à évaluer.
Prenons un exemple. Vous découvrez une nouvelle propriété CSS ou un nouvel élément HTML. Que faire ? Autrefois, la démarche ressemblait à ça :
- ouvrir Can I Use ;
- rechercher la fonctionnalité ;
- examiner quatre tableaux différents ;
- vérifier les versions de Chrome, Firefox, Safari et Edge ;
- décider si le risque est acceptable.
Pour une seule fonctionnalité, ça restait encore raisonnable. Pour un projet moderne qui utilise des dizaines de nouveautés CSS, HTML ou JavaScript, cela devenait rapidement fastidieux.
Les développeurs ne cherchent pas des statistiques détaillées, ils veulent seulement connaître la réponse à une question beaucoup plus simple : est-ce que je peux utiliser cette fonctionnalité aujourd'hui ?
C'est précisément cette question que Baseline cherche à résoudre.
Alors c'est quoi Baseline ?
Baseline est une initiative portée par la communauté WebDX (Web Developer Experience), qui réunit notamment Google, Mozilla, Microsoft, Apple et d'autres acteurs du Web. Son objectif est de fournir une définition commune de ce qui est réellement utilisable sur le Web moderne.
Contrairement à ce que son nom pourrait laisser croire, Baseline n'est ni une norme HTML, ni une nouvelle version de CSS, ni un navigateur.
C'est simplement un indicateur de compatibilité.
Lorsqu'une fonctionnalité reçoit le label Baseline, ça signifie qu'elle est désormais suffisamment bien prise en charge par les principaux navigateurs pour être utilisée sereinement dans la majorité des projets.
En d'autres termes, Baseline répond à la question : « Est-ce que je peux utiliser cette fonctionnalité aujourd'hui ? »
Les trois états d'une fonctionnalité
Baseline distingue trois niveaux de disponibilité.
- Limited availability
La fonctionnalité n'est pas encore disponible partout. Au moins un navigateur majeur ne la prend pas correctement en charge.
Il faudra probablement prévoir un fallback.
- Baseline — Newly available
Tous les navigateurs principaux supportent désormais cette fonctionnalité.
Elle est interopérable.
Elle fonctionne sur les versions récentes de Chrome, Firefox, Safari et Edge.
On peut commencer à l'utiliser, tout en gardant à l'esprit que certains appareils plus anciens peuvent encore poser problème.
- Baseline — Widely available
La fonctionnalité est supportée par tous les navigateurs principaux depuis 30 mois.
À ce stade, elle peut être utilisée sans se préoccuper des anciennes versions dans la grande majorité des projets.
Un exemple, l'élément <dialog> : cet élément HTML existait déjà depuis plusieurs années, mais :
- Chrome le supportait ;
- Firefox partiellement ;
- Safari pas complètement.
Résultat : peu de développeurs osaient l'utiliser.
Aujourd'hui, <dialog> fait partie de Baseline. On peut désormais écrire simplement...
<dialog>...</dialog>
...sans avoir besoin d'installer une bibliothèque JavaScript dédiée pour gérer les fenêtres modales.
Le navigateur s'occupe notamment :
- du focus clavier ;
- de la touche Échap ;
- du fond (backdrop) ;
- de l'accessibilité.
Un autre exemple : inert
C'est une autre fonctionnalité longtemps méconnue :
<div inert></div>
Tout le contenu devient automatiquement :
- non cliquable ;
- non sélectionnable ;
- inaccessible au clavier ;
- ignoré par les lecteurs d'écran.
Autrefois, cela demandait beaucoup de JavaScript. Aujourd'hui, c'est une fonctionnalité Baseline.
Entendons-nous bien : Baseline ne remplace pas Can I Use. Il est tentant de penser que Baseline rend Can I Use inutile, mais ce n'est pas le cas.
Les deux outils répondent à des questions différentes :
Can I Use Baseline
Quels navigateurs supportent cette fonctionnalité ? Puis-je utiliser cette fonctionnalité aujourd'hui ?
Dans la pratique, Baseline permet souvent de prendre une décision en quelques secondes.
Can I Use reste indispensable lorsqu'il faut comprendre précisément les différences entre navigateurs ou gérer des cas particuliers.
Depuis fin 2023, les deux mondes se rapprochent d'ailleurs : Can I Use affiche désormais directement les badges Baseline sur les fonctionnalités concernées.
Il s'agit toutefois d'une idée plus ambitieuse qu'il y paraît : Baseline ne se limite pas à afficher un petit badge dans la documentation. Autour de ce concept s'est construit tout un écosystème.
Aujourd'hui, on retrouve Baseline :
- sur MDN
- sur Can I Use
- dans Chrome DevTools
- dans Lighthouse
- dans Browserslist
- dans Visual Studio Code
- dans de nombreux outils d'analyse de compatibilité
On peut même configurer un projet avec une cible du type : "Baseline 2024"
Les outils de construction (Webpack, Vite, Babel, etc.) adaptent alors automatiquement leur comportement en fonction de cette cible, sans qu'il soit nécessaire de raisonner en termes de versions précises de navigateurs.
Pourquoi Baseline est important
À première vue, Baseline ressemble simplement à un nouvel indicateur de compatibilité. En réalité, il représente un changement de philosophie.
Pendant longtemps, on développait pour des navigateurs. Aujourd'hui, on développe pour une plateforme Web.
Au lieu de se demander : « Safari 16.2 supporte-t-il cette fonctionnalité ? » on se demande simplement : « Est-elle Baseline ? » et si la réponse est oui, on peut généralement avancer sans hésiter.
Ressources
Documentation générale
Comprendre l'origine du projet
Le projet WebDX
Utiliser Baseline dans vos projets
Compatibilité détaillée
Conclusion
Baseline ne remplace ni les standards du W3C, ni la documentation de MDN, ni les tableaux détaillés de Can I Use. En revanche, il apporte quelque chose qui manquait depuis les débuts du Web : un langage commun pour parler de la compatibilité.
La question n'est plus : « Quelles versions de Safari dois-je supporter ? », mais plus simplement : « Est-ce Baseline ? »