Publié le 13 février 2025
Après le succès retentissant d'Interop 2024, le projet revient aujourd'hui avec un nouvel ensemble de domaines d'intérêt pour 2025. Bien que nous n'ayons pas pu inclure toutes les suggestions formulées cette année, la liste finale couvre l'ensemble de la plate-forme Web, des CSS aux fonctionnalités liées aux performances.
Domaines d'action pour 2025
- Positionnement des ancrages
backdrop-filter
- Core Web Vitals
- Élément
<details>
- Mise en page
- Modules
- API Navigation
- Événements de pointeur et de souris
- Supprimer les événements de mutation
@scope
scrollend
événement- API Storage Access
text-decoration
URLPattern
- API View Transition
- WebAssembly
- Compatibilité Web
- WebRTC
- Modes d'écriture
De plus, comme les années précédentes, un certain nombre de domaines sont à examiner. Il s'agit de domaines pour lesquels nous ne disposons pas d'informations ni de tests suffisants pour les inclure comme axe d'attention, mais le groupe estime qu'un certain travail doit être effectué pour les amener à un stade où nous pourrons les inclure.
- Tests d'accessibilité
- Test de l'API Gamepad
- Test mobile
- Tests de confidentialité
- WebVTT
Nous sommes ravis de toutes ces fonctionnalités et des améliorations que le projet de cette année apportera à la plate-forme. Et, comme l'année dernière, le projet rendra un ensemble d'éléments disponibles en tant que référence. Cet article fournit plus d'informations sur certaines des fonctionnalités de la liste, avec des liens vers des informations complémentaires.
Vous pouvez suivre l'évolution sur le tableau de bord Interop 2025 à l'adresse wpt.fyi/interop-2025. Lorsque des éléments deviennent disponibles en tant que référence, ils apparaissent également dans la liste de référence 2025 sur webstatus.dev.

CSS et UI
Plusieurs des fonctionnalités incluses dans Interop 2025 sont celles que vous avez identifiées comme importantes dans l'enquête sur l'état du CSS 2024. Ils vous aideront à créer des expériences utilisateur plus esthétiques et plus performantes.
Positionnement des ancrages
Cette fonctionnalité vous permet d'ancrer un élément positionné à un ancrage. Elle est particulièrement utile lorsque vous affichez des popovers.
L'intégration de cette fonctionnalité à Baseline facilitera grandement la création d'interfaces utilisateur, sans avoir à dépendre de bibliothèques tierces. Pour en savoir plus, consultez notre documentation sur le positionnement des ancres et la page Positionnement des ancres CSS sur MDN.
Transitions de vue dans le même document
Cette année, les transitions de vue, en particulier les transitions de vue du même document, et la propriété CSS view-transition-class
sont également incluses.
Pour en savoir plus sur les transitions de vue, consultez Transitions de vue dans le même document pour les applications monopages et la documentation MDN sur les transitions de vue.
Propriété backdrop-filter
La propriété backdrop-filter
est disponible en tant que référence nouvellement disponible depuis septembre 2024. Il vous permet de créer des effets derrière votre contenu. Par exemple, pour flouter ou créer des effets que vous ne pensiez disponibles que dans une application graphique.
Bien que ces implémentations soient majoritairement interopérables, vous pouvez voir dans les tests échoués pour backdrop-filter
qu'il existe des bugs et des problèmes. Bien que ces problèmes ne soient pas un problème pour tout le monde, nous savons que beaucoup d'entre vous les rencontrent. Nous aimerions que cette fonctionnalité fonctionne parfaitement.
L'élément <details>
L'élément <details>
est un widget de divulgation qui peut être développé pour afficher du contenu supplémentaire. L'élément <details>
lui-même est largement disponible.
Cependant, un certain nombre de fonctionnalités associées ont été ajoutées plus récemment pour rendre <details>
plus utile.
- Les pseudo-éléments CSS
::marker
et::details-content
. - Utilisation de
content-visibility
pour activer/désactiver le contenu au lieu dedisplay
. - Développement automatique de l'élément
<details>
avec les correspondances de recherche sur la page. - L'attribut
hidden="until-found"
, qui masque un élément jusqu'à ce qu'il soit trouvé à l'aide de la recherche dans la page du navigateur ou qu'il soit directement accédé en suivant un fragment d'URL.
Attribut CSS @scope
La règle at-@scope
vous permet de limiter le champ d'application de vos sélecteurs à un sous-arbre du DOM, ou même de choisir entre une limite supérieure et une limite inférieure dans l'arborescence. Par exemple, le CSS suivant ne sélectionne que les éléments <img>
dans un élément avec une classe .card
.
@scope (.card) {
img {
border-color: green;
}
}
Dans l'exemple suivant, une borne supérieure et une borne inférieure sont utilisées. L'élément <img>
n'est sélectionné que s'il se trouve entre l'élément avec une classe .card
et en dehors de l'élément avec une classe .card__content
.
@scope (.card) to (.card__content) {
img {
border-color: green;
}
}
Pour en savoir plus sur l'utilisation de @scope
, consultez Limiter la portée de vos sélecteurs avec la règle CSS @scope
et la documentation sur @scope
sur MDN.
Événement scrollend
Sans l'événement scrollend
, il n'existe aucun moyen fiable de détecter qu'un défilement est terminé. Le mieux est d'utiliser setTimeout()
pour vérifier si le défilement s'est arrêté pendant un certain temps. Il s'agit donc plutôt d'un événement de défilement mis en pause, et non d'un événement de défilement terminé.
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
Avec l'événement scrollend
, le navigateur effectue toutes ces évaluations difficiles à votre place.
document.onscrollend = event => {
// ...
}
Pour voir d'autres exemples, consultez Scrollend, un nouvel événement JavaScript et la documentation MDN sur scrollend
.
Propriété text-decoration
La propriété text-decoration
est un raccourci pour text-decoration-line
, text-decoration-color
, text-decoration-style
et text-decoration-thickness
. Il est considéré comme largement disponible, mais dans Safari, la seule propriété abrégée sans préfixe qui fonctionne est text-decoration-line
. C'est ce qui sera traité en 2025.
Modes d'écriture
La propriété CSS writing-mode
peut prendre plusieurs valeurs, dont beaucoup sont conçues pour mettre en page des scripts qui s'affichent verticalement. Cependant, il peut arriver que vous souhaitiez mettre en page le texte verticalement dans le cadre d'une conception, plutôt que pour des raisons de prise en charge des langues. Les valeurs sideways-lr
et sideways-rl
sont conçues à cet effet, mais ont souffert d'une mauvaise compatibilité avec les navigateurs. Ce problème devrait être résolu en 2025.
De plus, les propriétés CSS logiques overflow-inline
et overflow-block
sont incluses. Ils permettent de contrôler ce qui se passe lorsque le contenu déborde des cases, quel que soit le mode d'écriture.
Core Web Vitals
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 Core Web Vitals.
Interop 2025 inclut les métriques LCP (Largest Contentful Paint) et Interaction to Next Paint (INP) en implémentant l'API LargestContentfulPaint et l'API Event Timing dans les navigateurs. La métrique Cumulative Layout Shift (CLS) n'est pas incluse dans le champ d'application.
API LCP
API Event Timing (pour INP)
WebAssembly (Wasm)
L'API WebAssembly vous permet de charger du code WebAssembly, un format d'instructions binaires portable. Vous pouvez ainsi exécuter une application de blog complète, y compris toutes les exigences de serveur, dans le navigateur.
Cette année, les travaux porteront sur les fonctionnalités suivantes:
- Fonctions intégrées de chaîne JavaScript: pour que les fonctions de chaîne intégrées WebAssembly reflètent un sous-ensemble de l'API de chaîne JavaScript afin qu'elles puissent être appelées sans code de liaison JavaScript.
- Intégration de tampons redimensionnables: pour intégrer WebAssembly dans le code JavaScript qui utilise des tampons redimensionnables.
Suppressions de fonctionnalités
Cette année, le projet comprend la suppression de la plate-forme. Les événements de mutation sont obsolètes et remplacés par l'API Mutation Observer, beaucoup plus performante et disponible dans la version de référence. Chrome a supprimé ces événements dans Chrome 126. L'objectif de cette zone de concentration est de les supprimer de tous les navigateurs.
Pour comprendre l'historique et pourquoi ces événements sont supprimés, consultez la page Les événements de mutation seront supprimés de Chrome.
En savoir plus
Vous trouverez la description de la liste complète des fonctionnalités dans le fichier README du projet. Lisez également les posts des autres entreprises qui travaillent sur Interop 2025.