Interopérabilité 2024

Suite au succès d'Interop 2022 et Interop 2023, nous sommes ravis de pouvoir collaborer une nouvelle fois avec tous les principaux fournisseurs de navigateurs et d'autres parties prenantes. Notre objectif commun est d'améliorer l'interopérabilité entre les plateformes Web, ce qui simplifie le travail des développeurs et enrichit l'expérience globale des internautes.

À la base, Interop est une série complète de tests et d'analyses comparatives conçues pour évaluer la conformité des navigateurs individuels, conformément à notre engagement commun envers les normes Web. En fin de compte, l'interopérabilité s'efforce d'éliminer les incohérences entre les navigateurs et de favoriser une vision unifiée au sein du secteur.

Pour Interop 2024, une proposition publique a été élaborée pour la liste initiale des fonctionnalités. À partir de cette liste, toutes les parties ont travaillé ensemble pour créer la liste des domaines d'action pour 2024. La liste suivante comprend les domaines dans lesquels nous espérons voir 100% des tests sélectionnés réussir d'ici la fin de l'année.

Tous les domaines d'action pour 2024

Interop 2024 comprend 12 nouveaux domaines d'action, plus 5 ont été reportées à partir de 2023, avec quelques corrections à apporter. Les domaines concernés sont les suivants:

  • Accessibilité
  • Imbrication CSS
  • Custom Properties
  • Shadow DOM déclaratif
  • font-size-adjust
  • URL HTTPS pour WebSocket
  • IndexedDB
  • Mise en page
  • Événements liés au pointeur et à la souris
  • Pop-over
  • Syntaxe des couleurs relatives
  • requestVideoFrameCallback
  • Style de la barre de défilement
  • @starting-style et transition-behavior
  • Orientation du texte
  • text-wrap: solde
  • URL

Pour obtenir des informations détaillées sur tous les domaines d'action, consultez le tableau de bord d'interopérabilité 2024. où les détails des fonctionnalités et du travail requis sont présentés, ainsi que les scores actuels de chaque navigateur. Dans la suite de cet article, vous découvrirez certains des domaines dans lesquels Chrome doit s'efforcer le plus efficacement d'atteindre les 100%.

Imbrication

L'imbrication CSS définit une syntaxe pour l'imbrication de sélecteurs, permettant d'imbriquer une règle de style dans une autre, avec le sélecteur de la règle enfant par rapport au sélecteur de la règle parente.

L'imbrication CSS est différente des préprocesseurs CSS tels que Sass dans la mesure où elle est analysée par le navigateur au lieu d'être précompilée par un préprocesseur CSS.

L'imbrication CSS améliore la lisibilité, la modularité et la gestion des feuilles de style CSS. Cela permet également potentiellement de réduire la taille des fichiers CSS, et donc la quantité de données téléchargées par les utilisateurs.

Bien que tous les navigateurs soient compatibles avec l'imbrication CSS, il existe des différences d'implémentation en raison des modifications de la spécification. Pendant l'interopérabilité 2024, l'objectif est de s'assurer que tous les navigateurs respectent les spécifications actuelles.

En savoir plus sur l'imbrication des CSS et découvrir une mise à jour clé de la spécification qui permet imbrication de noms de balises d'éléments simples.

text-wrap: solde

Valeur du solde du code text-wrap CSS indique au navigateur que vous souhaitez équilibrer les lignes de texte. Il est généralement utilisé dans les en-têtes ou d'autres sections de texte courtes pour éviter les veuves typographiques.

Titre qui s'affiche sur deux lignes et qui contient deux mots sur la deuxième.
Titre déséquilibré
Titre s'affichant sur deux lignes, chaque ligne étant égale.
Un titre équilibré

Les navigateurs ne sont pas compatibles avec les différentes versions abrégées et longues de cette propriété. Notre objectif est de les rendre interopérables au cours de l'édition 2024.

Trouver l'équilibre entre titres et autres sections de texte court est une fonctionnalité fréquemment demandée par les développeurs, Pour en savoir plus, consultez la vidéo CSS text-wrap: balance l'article sur la fin des fonctionnalités typographiques sur le Web, ou Équilibrage du texte CSS avec retour automatique à la ligne: solde.

URL HTTP(S) pour WebSocket

À l'origine, le constructeur WebSocket exigeait des URL ws: et wss:. empêchant l'utilisation d'URL relatives et le code de solution qui en résulte.

La spécification a été mise à jour pour autoriser les schémas http(s), et donc les URL relatives. Ces valeurs sont normalisées en ws: et wss:. Pendant l'interopérabilité 2024, nous mettrons à jour notre implémentation pour qu'elle accepte les schémas HTTP(S).

Syntaxe des couleurs relatives

La syntaxe des couleurs relatives est définie dans Spécification CSS Color 5 et permet de manipuler les couleurs en CSS. Par exemple, assombrir, éclaircir ou désaturer une couleur.

La syntaxe de couleur relative est à peu près interopérable, mais que les navigateurs n'ont pas implémenté le mot clé currentcolor. ces tests sont inclus dans Interop 2024.

Découvrez tout ce que vous pouvez faire avec cette fonctionnalité dans Syntaxe des couleurs relatives CSS

Tableau de bord Interop 2024

Comme les années précédentes, les scores actuels des versions expérimentales et stables des navigateurs seront publiés sur le tableau de bord. Vous pouvez ainsi suivre l'évolution des scores.

Capture d'écran du tableau de bord avec les scores - Interopérabilité: 65, Investigations: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
Les scores de la version expérimentale du navigateur au 1er février 2024.

Nous avons hâte de voir les améliorations que nous pouvons apporter dans tous les domaines prioritaires cette année.

En savoir plus sur Interop 2024