Nouveautés sur le Web

Rachel Andrew

Publié le 20 mai 2025

Lors de la keynote "Nouveautés du Web" de Google I/O 2025, toutes les annonces concernant Baseline ont été partagées, ainsi qu'un aperçu de certaines des fonctionnalités qui ont été ajoutées à Baseline cette année. Cette année a été incroyable pour le Web et pour Baseline. Cet article récapitule tout ce qui a été mentionné, avec tous les liens pour en savoir plus.

Tableau de bord de la plate-forme Web et fonctionnalités Web

En 2024, nous avons annoncé le lancement initial du tableau de bord de la plate-forme Web, qui utilise l'ensemble de données sur les fonctionnalités Web et vous permet d'explorer toutes les fonctionnalités qui font partie de Baseline.

Les données sur les fonctionnalités Web sont désormais complètes, avec toutes les fonctionnalités de la plate-forme mappées. De nouvelles fonctionnalités sont ajoutées à Baseline chaque mois. Les données sont alors mises à jour et toutes ces informations sont disponibles sur le tableau de bord.

Outils pour vous aider à découvrir votre propre cible de référence

Vous pouvez baser votre stratégie de compatibilité des navigateurs sur la cible mouvante de la fonctionnalité Baseline largement disponible, comme l'agence britannique Clearleft. Vous pouvez également adopter une cible fixe basée sur une année de référence. Vous pouvez désormais utiliser vos propres données utilisateur, ainsi que les données sur les fonctionnalités Web, pour déterminer la meilleure cible pour vous.

L'année dernière, lors de l'I/O, nous avons annoncé que RUMvision allait implémenter Baseline dans son produit. Cette intégration est désormais disponible.

Comme il utilise vos données RUM, il vous aide à identifier l'année de référence à adopter en fonction de ces données plutôt que d'une moyenne globale. Il peut également vous aider à déterminer si la configuration de base largement disponible vous convient.

Vous pouvez également utiliser vos données Google Analytics pour voir clairement le pourcentage de vos utilisateurs qui prennent en charge chaque cible de référence grâce au nouvel outil de vérification des références Google Analytics.

Ce ne sont que deux des nombreux outils qui vous aident à mapper vos données utilisateur réelles à Baseline.

Le groupe de la communauté Web DX a récemment lancé une extension pour Netlify qui prend en charge différentes années de référence et la disponibilité générale sur vos sites pour vous aider à décider ce que vous devez cibler dans vos outils de compilation. Des intégrations avec le produit Observatory RUM de Cloudflare et Contentsquare seront bientôt disponibles.

Intégrer les données à vos propres outils

Les données sur les fonctionnalités Web sont ouvertes et disponibles pour vos propres intégrations. Nous essayons de vous faciliter la tâche.

Utilisez l'API Web Platform Dashboard ou consommez les données sur les fonctionnalités Web directement à partir du package npm.

Vous pouvez désormais mapper des versions de navigateur à une cible de référence à l'aide du module baseline-browser-mapping du groupe communautaire W3C WebDX. Ce module peut être utilisé dans un environnement JavaScript côté serveur ou en téléchargeant des fichiers JSON ou CSV qui sont actualisés quotidiennement à partir du dépôt.

Ces données incluent des mappages non seulement pour l'ensemble de navigateurs Baseline de base, mais aussi pour les navigateurs en aval tels que Samsung Internet, Opera, UC Browser et Android Webview.

Vérifier si les fonctionnalités sont compatibles avec votre cible de référence

Les informations de référence sont désormais disponibles sur la majorité des pages MDN et Can I Use. Vous pouvez également les trouver sur le tableau de bord Web Platform, ainsi que dans les articles sur web.dev et CSS Tricks. Toutefois, vous devez rechercher de l'aide pour tout cela. Il serait beaucoup plus utile d'afficher les informations de référence dans votre IDE pendant que vous codez, et dans tous les autres outils que vous utilisez.

Nous sommes heureux de vous annoncer que de nombreux outils clés sont désormais compatibles avec Baseline ou peuvent être facilement intégrés.

browserslist-config-baseline

De nombreux outils tels que Babel et PostCSS utilisent browserslist pour déterminer les navigateurs à prendre en charge.

L'équipe Chrome a contribué, avec le WebDX CG et les membres de la communauté, à la sortie d'un nouvel outil appelé browserslist-config-baseline. Cela vous permet de configurer vos cibles browserslist en termes de référence, comme "largement disponible" ou les années de référence.

Grâce à cela, tout outil qui accepte une cible browserslist peut désormais être exprimé en termes de référence.

Pour en savoir plus, consultez Utiliser Baseline avec browserslist.

Référence dans les linters : ESLint et Stylelint

L'utilisation de Baseline avec des linters est désormais possible grâce à de nouveaux outils dans l'espace linter, à commencer par ESLint pour CSS.

ESLint de référence comporte une règle use-baseline. Vous pouvez définir cette valeur sur votre référence cible préférée. Vous recevrez un avertissement lorsque vous utiliserez des fonctionnalités plus récentes que votre cible. Vous pouvez choisir de résoudre ces avertissements en remplaçant cette fonctionnalité par des primitives ou en supprimant l'avertissement du linter. Il s'agit d'une solution tout à fait valable lorsque vous savez que vous utilisez une fonctionnalité de pointe de manière sécurisée, par exemple s'il s'agit d'une amélioration progressive.

Par défaut, ESLint n'émet pas d'avertissement si des fonctionnalités plus récentes sont utilisées dans les blocs @supports, car les navigateurs non compatibles ne les évalueront pas de toute façon.

Pour vos besoins en linting HTML, il existe également un plug-in de la communauté appelé html-eslint.

Stylelint est officiellement compatible avec un plug-in appelé stylelint-plugin-use-baseline. Cette règle se comporte exactement comme la règle ESLint pour CSS, mais elle s'exécute sur Stylelint à la place.

De nombreux linters disposent également de plug-ins IDE. Vous pouvez ainsi obtenir un retour immédiat sur l'état de référence pendant la programmation grâce à des soulignements ondulés.

Référence dans VS Code et JetBrains WebStorm

De nombreux IDE permettent depuis longtemps de pointer sur une fonctionnalité dans votre éditeur pour afficher la liste des versions de navigateur compatibles.

Toutefois, il peut être difficile de savoir si cette fonctionnalité est réellement sûre à utiliser. Vous devez déterminer mentalement si des navigateurs majeurs manquent à cette liste et à quel point cette version de navigateur est récente.

Pour résoudre ce problème, nous nous sommes associés à l'IDE le plus populaire utilisé par des millions de développeurs Web, VS Code, afin d'intégrer les données de référence directement dans ces cartes au survol.

Vous pouvez désormais pointer sur une fonctionnalité pour savoir si elle est considérée comme faisant partie de la référence et depuis combien de temps, ou s'il existe des navigateurs majeurs qui ne l'implémentent pas encore entièrement.

Les fonctionnalités acceptées incluent les propriétés CSS, les éléments HTML et les attributs HTML. Pour en savoir plus, consultez Visual Studio Code est désormais compatible avec Baseline.

Grâce à cette intégration, tous les IDE basés sur VS Code bénéficieront également de ces cartes.

Nous avons également le plaisir d'annoncer que JetBrains implémente des cartes au survol dans son IDE WebStorm JavaScript et TypeScript.

Le Web évolue plus vite que jamais

Nous espérons que Baseline vous aidera à profiter du fait que le Web interopérable s'améliore plus rapidement que jamais.

Vous pouvez utiliser le tableau de bord de la plate-forme Web pour afficher toutes les fonctionnalités qui sont devenues de base et nouvellement disponibles au cours des 12 derniers mois, depuis Google I/O 2024.

Vous pouvez également être sûr que plusieurs fonctionnalités seront bientôt disponibles dans Baseline Newly, car elles sont incluses dans le projet Interop 2025. Pour en savoir plus sur toutes les fonctionnalités incluses, consultez Interop2025 : une autre année d'améliorations de la plate-forme Web.

Modes d'écriture sur le côté

Nous avons déjà vu une fonctionnalité devenir Baseline Newly available : les valeurs sideways-rl et sideways-lr pour la propriété CSS writing-mode. Si vous utilisez un mode d'écriture vertical uniquement à des fins de mise en page, les valeurs latérales sont probablement celles à utiliser.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Positionnement de l'ancre

Le positionnement de l'ancrage a été déployé dans Chrome 125. Il vous permet de lier la position d'un élément à un point d'ancrage, par exemple lorsque vous ouvrez une info-bulle avec un bouton.

Il est désormais inclus dans Interop 2025. Nous devrions donc le voir rejoindre Baseline cette année.

Core Web Vitals : LCP et INP

API LCP

API Event Timing (pour l'INP)

Les signaux Web peuvent vous aider à quantifier l'expérience de votre site et à identifier des opportunités d'amélioration. L'initiative Web Vitals vise à simplifier le paysage et à aider les sites à se concentrer sur les métriques les plus importantes, à savoir les métriques Core Web Vitals.

Interop 2025 inclut les métriques Largest Contentful Paint (LCP) et Interaction to Next Paint (INP) en implémentant l'API LargestContentfulPaint et l'API Event Timing dans les navigateurs.

Améliorations apportées à l'élément <details>

L'élément <details> lui-même est déjà largement disponible dans la référence. Il a été inclus dans Interop 2025, car il existe un certain nombre de fonctionnalités qui rendent les widgets de divulgation avec <details> plus utiles.

L'élément <details> contient un élément <summary>, qui est la partie visible sur la page lorsque l'élément <details> est réduit. En dehors de <summary> se trouve le contenu de l'élément <details>, qui est masqué jusqu'à ce que l'utilisateur clique sur le résumé.

L'une des choses qui sont rendues interopérables lors d'Interop 2025 est de masquer le contenu à l'aide de content-visibility plutôt que de display, ce qui signifie que si le contenu n'est pas développé, il ne sera pas rendu du tout.

Le pseudo-élément ::marker fait également partie du projet Interop 2025. Le pseudo-élément ::marker vous permet de styliser le triangle de déploiement de l'élément <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Ensuite, un autre pseudo-élément : ::details-content.

::details-content représente le contenu, c'est-à-dire la partie de l'élément "details" qui se développe et se réduit, et que vous pouvez styliser.

[open]::details-content {
  border: 5px dashed hotpink;
}

Nous avons également apporté quelques améliorations intéressantes, comme le développement automatique de l'élément <details> avec les correspondances de la fonctionnalité Rechercher sur la page et l'ajout de la valeur until-found de l'attribut HTML hidden à la référence "Nouveautés de référence". Cela permet de masquer un élément jusqu'à ce qu'il soit trouvé à l'aide de la recherche sur la page du navigateur ou qu'il soit directement accédé en suivant un fragment d'URL.

CSS @scope

La règle CSS @scope vous permet de limiter la couverture de vos sélecteurs. En définissant une racine de portée avec @scope, toutes les règles de style imbriquées dans la règle at ne s'appliquent qu'à cette arborescence DOM.

Par exemple, si vous ne souhaitez cibler que les éléments <img> à l'intérieur d'un élément avec une classe .card, .card deviendra la racine de portée.

@scope (.card) {
    img {
        border-color: green;
    }
}

Pour en savoir plus, consultez Limiter la portée de vos sélecteurs avec la règle @scope CSS.

scrollend

scrollend est une autre fonctionnalité qui réduit la complexité et améliore les interfaces de défilement. Sans l'événement scrollend, il n'existe aucun moyen fiable de détecter qu'un défilement est terminé.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Avec l'événement scrollend, le navigateur effectue toute cette évaluation difficile pour vous.

document.onscrollend = event => {…}

Pour en savoir plus, consultez Scrollend, un nouvel événement JavaScript.

Transitions de vue dans le même document

Enfin, et non des moindres, les transitions de vue font partie d'Interop 2025. Le travail implique des transitions de vue dans le même document, donc celles pour les applications monopages et aussi les classes de transitions de vue.

Suivez l'avancement du projet sur le tableau de bord Interop 2025 tout au long de l'année.

Les fonctionnalités incluses dans Interop 2025 ne seront pas les seules à faire partie de Baseline cette année, mais leur inclusion dans les projets nous donne une bonne indication qu'elles sont prioritaires et qu'elles arriveront bientôt.

Le test vient de commencer

L'année a été riche en nouveautés pour Baseline, et nous avons fait beaucoup de progrès depuis nos annonces de l'année dernière. Nous avons terminé le remplissage des données sur les fonctionnalités Web. Cela a ouvert la voie à la création d'outils pour les développeurs. Nous ne faisons que commencer. Si vous avez un produit ou un outil Open Source qui pourrait bénéficier de l'inclusion de ces données, n'hésitez pas à nous en faire part.

Consultez web.dev, car nous continuerons à publier des annonces concernant les nouveaux outils, ainsi que des tutoriels pour vous aider à profiter de tout ce que le Web a à offrir.