En 2023, tous les principaux fournisseurs de navigateurs et les autres personnes concernées collaborent pour résoudre les principaux problèmes de compatibilité des navigateurs.
En 2023, tous les principaux fournisseurs de navigateurs et les autres personnes concernées collaborent de nouveau pour résoudre les principaux problèmes de compatibilité des navigateurs. Les efforts ont commencé à cette échelle avec Interop 2022, et vous pouvez découvrir ce que nous avons accompli ensemble dans l'article de fin d'année. Toutes les personnes impliquées pensent que cela contribuera à améliorer l'expérience des développeurs Web du monde entier. Cette année, pour la première fois, nous avons annoncé publiquement le processus de proposition et avons reçu de nombreuses suggestions de la part de frameworks, de grandes entreprises, de fournisseurs de navigateurs et de développeurs du monde entier.
Points clés de l'édition 2023 de l'interopérabilité
Cette fois-ci, nous avons sélectionné pas moins de 26 domaines d'action, décrits en détail dans notre document de projet. Ils sont classés par ordre alphabétique:
- Image de la bordure en CSS
- Espaces de couleur et fonctions en CSS
- Requêtes de conteneur en CSS
- Structuration dans le CSS
- Pseudo-classes CSS
- Propriétés personnalisées dans CSS
- Flexbox
- Détection des caractéristiques de police et palettes
- Forms
- Grille
- :has()
- Inerte
- Masquage en CSS
- Fonctions mathématiques en CSS
- Requêtes média
- Modules dans Web Workers
- Trajectoire d'animation dans les animations CSS
- Dessin hors écran
- Événements du curseur et de la souris
- URL
- Web Compat 2023: un objectif générique pour les bugs mineurs qui causent des problèmes de compatibilité connus entre les sites
- Codecs Web (vidéo)
- Composants Web
Vous trouverez des informations complètes sur tous les domaines d'action sur la page Tests de plate-forme Web basée sur la documentation MDN Web. En voici quelques-unes qui pourraient vous intéresser.
Requêtes de conteneur
Les requêtes de conteneurs sont l'une des principales demandes des développeurs depuis de nombreuses années. En 2022, Chrome et Safari l'ont commercialisée. Firefox prévoit d'envoyer des requêtes de conteneur dans Firefox 110. Les tests effectués dans cette zone d'action permettent de s'assurer que les requêtes de conteneur fonctionnent de manière fiable entre les navigateurs et conformément aux spécifications.
:has(...)
Les développeurs demandent depuis longtemps un sélecteur parent dans CSS. La pseudo-classe :has() rend possible la plupart des cas d'utilisation des sélecteurs parents, ainsi que la sélection d'un élément frère précédent par rapport à un élément de référence. Par exemple, cela permet de styliser un personnage qui a une légende différemment d'une autre. Pour en savoir plus sur les cas d'utilisation de has(), consultez la section :has(), le sélecteur de famille.
Custom Properties
Les propriétés CSS personnalisées, également appelées variables CSS, permettent de définir une valeur une seule fois dans une feuille de style et de la réutiliser à de nombreux endroits, ce qui réduit le nombre de répétitions. Par exemple, vous pouvez définir une couleur ou une taille de police commune une seule fois dans une feuille de style et l'utiliser pour tous les composants. Les propriétés personnalisées sont compatibles depuis longtemps dans les navigateurs. Interop 2023 se concentre sur la règle @property au niveau de la règle. @property représente l'enregistrement d'une propriété personnalisée dans une feuille de style, ce qui permet de vérifier le type de propriété, de définir des valeurs par défaut et d'indiquer si la propriété doit hériter de valeurs. Pour en savoir plus, consultez @property: donner des superpouvoirs aux variables CSS.
Masquage CSS
Le masquage CSS fournit des méthodes pour appliquer des effets d'image à l'aide de CSS, comme dans une application graphique. La prise en charge des différentes propriétés de masquage est instable, ce qui rend le masquage plus difficile à utiliser qu'il ne devrait l'être. Ce champ d'action aidera les développeurs à utiliser des effets créatifs sur plusieurs navigateurs en toute confiance. Pour savoir comment appliquer des effets à des images, consultez cet article sur le masquage des images.
OffscreenCanvas
L'élément <canvas> et l'API Canvas permettent de dessiner des graphiques à l'écran à l'aide de scripts. Toutefois, cela peut entraîner des problèmes de performances, car le travail est effectué sur le même thread que l'interaction de l'utilisateur. OffscreenCanvas offre aux développeurs un canevas qui est découplé du DOM et de l'API Canvas. Les développeurs peuvent également exécuter des tâches de rendu dans un worker Web, distinct du thread principal. En savoir plus sur les avantages d'OffscreenCanvas en termes de performances
Événements de pointeur et de souris
Les événements de pointeur sont déclenchés lorsqu'un utilisateur interagit avec une page à l'aide de la souris, du stylet, du stylet ou de l'écran tactile. Les événements de souris sont déclenchés lors de l'utilisation de la souris, mais également pour des raisons historiques concernant les gestes tactiles. Cette zone d'action porte sur le comportement du pointeur de la souris et l'interaction de la souris avec les pages, y compris la façon dont elles interagissent avec les tests de positionnement et les zones de défilement. Pour 2023, les fonctionnalités tactiles et les stylets ne sont pas concernées par l'absence de tests de plate-forme Web.
WebCodecs
L'API WebCodecs fournit aux développeurs des méthodes pour accéder aux images vidéo individuelles et aux fragments de contenu audio. Il permet d'accéder aux codecs déjà disponibles dans le navigateur, ainsi qu'à diverses interfaces permettant d'interagir avec eux. L'article Traitement vidéo avec WebCodecs explique comment utiliser l'API pour décoder et afficher des images individuelles sur un canevas.
Composants Web
Composants Web est un terme générique qui désigne un certain nombre de technologies permettant de créer des composants réutilisables, tels que les éléments personnalisés et le Shadow DOM. Le programme Interop 2023 se concentrera sur l'amélioration de l'interopérabilité de ces technologies fondamentales.
Tableau de bord
Suivez les progrès réalisés tout au long de l'année dans le tableau de bord Interop 2023, où vous pouvez consulter les scores actuels et l'état des domaines concernés dans les principaux moteurs de navigateur.
Les scores "Domaine d'action" sont calculés sur la base des taux de réussite aux tests. Si vous avez des commentaires ou souhaitez apporter des améliorations à WPT, veuillez signaler un problème pour demander la mise à jour de l'ensemble de tests utilisé pour l'attribution de scores.
