Encore une fois en 2023, tous les principaux fournisseurs de navigateurs et d’autres parties prenantes travaillent ensemble pour résoudre les principaux problèmes de compatibilité des navigateurs.
En 2023, tous les principaux fournisseurs de navigateurs et autres parties prenantes travaillent à nouveau ensemble pour résoudre les principaux problèmes de compatibilité des navigateurs. L’effort a commencé à cette échelle avec Interop 2022, et vous pouvez découvrir ce que nous avons réalisé ensemble dans le post 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 intéressantes de la part de frameworks, de grandes entreprises, de fournisseurs de navigateurs et de développeurs du monde entier.
Les axes d’Interop 2023 #
Cette fois-ci, nous avons pas moins de 26 domaines d’intervention, détaillés dans notre document de projet. Ce sont, par ordre alphabétique :
Vous pouvez trouver tous les détails de tous les domaines d’intérêt dans Tests de plate-forme Web basés sur MDN Web Docs, mais en voici quelques-uns qui, selon nous, pourraient vous intéresser.
Requêtes de conteneur #
Les requêtes de conteneur sont une demande majeure des développeurs depuis de nombreuses années, et en 2022, Chrome et Safari l’ont expédiée. Firefox prévoit d’expédier les requêtes de conteneur dans Firefox 110, et les tests pour ce domaine d’intérêt aident à garantir que les requêtes de conteneur fonctionnent de manière fiable entre les navigateurs et conformément aux spécifications.
:a(…) #
Les développeurs demandent depuis longtemps un sélecteur parent en CSS. Le :has() La pseudo-classe rend possible de nombreux 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 une figure qui a une légende différemment d’une autre qui n’en a pas. En savoir plus sur les cas d’utilisation de has() dans :has(), le sélecteur de famille.
Propriétés personnalisées #
Les propriétés personnalisées CSS, également appelées variables CSS, permettent de définir une valeur une fois dans une feuille de style et de la réutiliser à de nombreux endroits, réduisant ainsi les répétitions. Par exemple, vous pouvez définir une couleur ou une taille de police commune une fois dans une feuille de style et l’utiliser dans tous les composants. La prise en charge de base des propriétés personnalisées existe depuis longtemps dans les navigateurs. Interop 2023 se concentre sur la @property à la règle. @property représente un enregistrement de propriété personnalisé dans une feuille de style, permettant de vérifier le type de propriété, de définir des valeurs par défaut et de déterminer si la propriété doit hériter des valeurs. Apprenez-en plus dans @property : donner des super pouvoirs aux variables CSS.
Masquage CSS #
Le masquage CSS fournit des méthodes pour appliquer des effets d’image, comme vous pouvez le voir dans une application graphique, à l’aide de CSS. La prise en charge des différentes propriétés de masquage est inégale, ce qui rend le masquage plus difficile à utiliser qu’il ne devrait l’être. Ce domaine d’intérêt aidera les développeurs à utiliser en toute confiance les effets créatifs multi-navigateurs. Apprenez-en plus sur l’application d’effets aux images dans cet article sur le masquage d’image.
OffscreenCanvas #
Le <canvas> L’élément et l’API Canvas fournissent un moyen scriptable de dessiner des graphiques à l’écran. Cependant, cela peut entraîner des problèmes de performances car le travail est terminé sur le même thread que l’interaction de l’utilisateur. OffscreenCanvas offre aux développeurs un canevas découplé du DOM et de l’API Canvas. Les développeurs peuvent également exécuter des tâches de rendu dans un Web Worker, distinct du thread principal. En savoir plus sur les avantages en termes de performances d’OffscreenCanvas.
Événements de pointeur et de souris #
Les événements de pointeur sont déclenchés lors de l’interaction avec une page à l’aide d’une souris, d’un stylo, d’un stylet ou d’un écran tactile. Les événements de souris sont déclenchés lors de l’utilisation d’une souris, mais pour des raisons historiques également pour le toucher. Ce domaine d’intérêt couvre le comportement de l’interaction du pointeur et de la souris avec les pages, y compris la manière dont ils interagissent avec les zones de test d’atteinte et de défilement. Le domaine d’intervention pour 2023 exclut le tactile et le stylet, en raison d’un manque de tests de plateforme Web dans ce domaine.
Codecs Web #
L’API WebCodecs fournit des méthodes permettant aux développeurs d’accéder aux images individuelles de la vidéo et aux morceaux d’audio. Il offre un accès aux codecs déjà disponibles dans le navigateur, et diverses interfaces pour interagir avec eux. L’article Traitement vidéo avec WebCodecs montre comment utiliser l’API pour décoder et restituer des images individuelles sur un canevas.
Composants Web #
Web Components est un terme générique désignant un certain nombre de technologies utilisées pour créer des composants réutilisables, tels que Custom Elements et Shadow DOM. Interop 2023 se concentrera sur l’amélioration de l’interopérabilité de ces technologies fondamentales.
Tableau de bord #
Suivez les progrès tout au long de l’année sur le tableau de bord Interop 2023, où vous pouvez voir les scores actuels et l’état d’avancement de ces domaines prioritaires sur tous les principaux moteurs de navigateur.
Les scores des domaines d’intervention sont calculés en fonction des taux de réussite aux tests. Si vous avez des commentaires ou souhaitez apporter des améliorations au WPT, veuillez signaler un problème pour demander la mise à jour de l’ensemble des tests utilisés pour la notation.