Interopérabilité 2024

Suite au succès de Interop 2022 et d'Interop 2023, nous sommes ravis de pouvoir collaborer une nouvelle fois avec tous les principaux fournisseurs de navigateurs et les autres personnes concernées. Notre objectif commun est d'améliorer l'interopérabilité entre les plates-formes Web, afin de simplifier le travail des développeurs et d'enrichir l'expérience globale des internautes.

Interopérabilité est une série complète de tests et d'analyses comparatives conçues pour évaluer la conformité de différents navigateurs, conformément à notre engagement commun envers les normes Web. À terme, Interop s'efforce d'éliminer les incohérences entre les navigateurs et de promouvoir une vision unifiée au sein du secteur.

Pour Interop 2024, un processus de proposition publique a été mis en place pour obtenir la liste initiale de fonctionnalités. À partir de cette liste, toutes les parties ont collaboré pour établir la liste des axes d'action pour 2024. La liste suivante inclut les domaines dans lesquels nous espérons que 100% des tests sélectionnés seront réussis d'ici la fin de l'année.

Tous les domaines d'action pour 2024

Interopérabilité 2024 comprend 12 nouveaux domaines d'action, en plus de cinq reportés depuis 2023, dont quelques corrections doivent encore être apportées. Les domaines sont les suivants:

  • Accessibilité
  • Imbrication CSS
  • Custom Properties
  • Shadow DOM déclarative
  • font-size-adjust
  • URL HTTPS pour WebSocket
  • IndexedDB
  • Mise en page
  • Événements de pointeur et de 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 en savoir plus sur tous les domaines d'action, consultez le tableau de bord Interop 2024, où sont affichés les détails des fonctionnalités et du travail requis, ainsi que les scores actuels pour chaque navigateur. Dans la suite de cet article, vous découvrirez certains des domaines dans lesquels Chrome doit faire le plus d'efforts pour atteindre 100%.

Imbrication

Le module d'imbrication CSS définit une syntaxe pour l'imbrication des sélecteurs. Il permet 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 facilité de gestion des feuilles de style CSS. Elle permet également de réduire la taille des fichiers CSS, ce qui diminue 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. L'objectif d'Interop 2024 est de s'assurer que tous les navigateurs respectent les spécifications actuelles.

Apprenez-en plus sur l'imbrication CSS et découvrez une mise à jour importante de la spécification qui permet l'imbrication de noms de balises d'éléments simples.

text-wrap: solde

La valeur "Balance" de la propriété CSS text-wrap indique au navigateur que vous souhaitez équilibrer les lignes de texte. Il est généralement utilisé dans les titres ou d'autres sections de texte courtes pour éviter les fenêtres typographiques.

Un titre se retournant sur deux lignes et deux mots sur la deuxième ligne.
Un titre équilibré
Un titre se retournant sur deux lignes dont les lignes sont égales.
Un titre équilibré

Les navigateurs ne prennent pas en charge les différentes versions longues et abrégées de cette propriété. Notre objectif est de les rendre interopérables lors de l'édition 2024 de l'interopérabilité.

L'équilibrage des titres et d'autres sections de texte court est une fonctionnalité fréquemment demandée par les développeurs. Pour en savoir plus, consultez l'article CSS text-wrap: balance, l'article sur la fin des fenêtres typographiques sur le Web ou l'équilibrage de texte CSS avec text-wrap: balance.

URL HTTP(S) pour WebSocket

À l'origine, le constructeur WebSocket nécessitait des URL ws: et wss:, ce qui empêchait l'utilisation d'URL relatives et le code de contournement résultant.

La spécification a été mise à jour pour autoriser les schémas http(s), et donc les URL relatives. Elles sont normalisées en ws: et wss:. Lors de Interop 2024, nous mettrons à jour notre implémentation pour qu'elle soit compatible avec les schémas HTTP(S).

Syntaxe des couleurs relatives

La syntaxe de couleur relative est définie dans la spécification CSS Color 5 et permet de manipuler les couleurs dans CSS. Par exemple, assombrir, éclaircir ou désaturer une couleur.

La syntaxe de couleur relative est à peu près interopérable, mais 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 la syntaxe de couleur relative 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 pourrez ainsi voir comment ils évoluent.

Capture d'écran du tableau de bord avec les scores - Interopérabilité: 65, Investigations: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Aperçu de la technologie Safari: 79.
Scores des versions de navigateurs expérimentales au 1er février 2024.

Nous sommes très heureux de voir toutes les améliorations que nous pourrions y apporter cette année.

En savoir plus sur Interop 2024