Pour la première fois, tous les principaux fournisseurs de navigateurs, ainsi que les autres personnes concernées, se sont réunis pour résoudre les principaux problèmes de compatibilité des navigateurs identifiés par les développeurs Web. Interop 2022 améliorera l'expérience de développement pour le Web dans 15 domaines clés. Dans cet article, découvrez comment nous en sommes arrivés là, sur quoi porte le projet, comment le succès sera mesuré et comment vous pouvez suivre les progrès.
Tout a commencé en 2019
En 2019, Mozilla, Google et d'autres entreprises ont entrepris un effort majeur pour comprendre les difficultés des développeurs, sous la forme d'enquêtes d'évaluation des besoins des développeurs MDN et d'un rapport détaillé sur la compatibilité des navigateurs. Ces rapports nous ont fourni des informations détaillées et exploitables pour résoudre les principaux problèmes rencontrés par les développeurs avec la plate-forme Web. Ils ont également donné lieu à l'initiative Compat 2021.
Compat 2021 a permis, entre autres, d'établir une base solide pour des fonctionnalités puissantes telles que la grille CSS (12% d'utilisation et en croissance constante) et CSS Flexbox (77% d'utilisation), y compris la propriété gap dans Flexbox, qui résout un problème majeur pour les développeurs lorsqu'ils adoptent de nouvelles méthodes de mise en page.
Nous avions atteint un taux de plus de 90% pour l'ensemble des implémentations fin 2021.
Qu'est-ce que Interop 2022 ?
Interop 2022 est un benchmark, approuvé par les représentants de trois grandes implémentations de navigateur. Il a été développé via un processus de désignation publique et d'examen avec la contribution des supporters Apple, Bocoup, Google, Igalia, Microsoft et Mozilla.
Le benchmark se concentre sur 15 domaines, identifiés par les développeurs comme particulièrement gênants lorsqu'ils ne sont pas présents ou présentent des problèmes de compatibilité entre les navigateurs. Tous les fournisseurs de navigateurs ont convenu de se concentrer sur ces domaines et toutes les personnes concernées ont hâte de commencer à améliorer nettement l'expérience de développement pour le Web.
Les 15 domaines d'intérêt
Interop 2022 mettra l'accent sur les fonctionnalités suivantes. Ils comprennent 10 nouveaux domaines, dont cinq reportés depuis Compat 2021. Voici nos nouveaux domaines d'action:
Couches en cascade
Les couches en cascade donnent aux développeurs Web plus de contrôle sur la cascade. Ils permettent de regrouper les sélecteurs en couches, chacune ayant sa propre spécificité. Ainsi, vous n'avez pas besoin de classer soigneusement les sélecteurs ni de créer des sélecteurs très spécifiques pour remplacer les règles CSS de base.
Espaces colorimétriques et fonctions de couleur CSS
Pour utiliser les fonctions de couleur dans un système de conception, vous devez actuellement utiliser Sass, PostCSS ou calc() sur les valeurs HSL. Grâce aux fonctions de couleur intégrées à CSS, les couleurs peuvent être mises à jour de façon dynamique, et les nouveaux espaces colorimétriques suppriment la restriction de la gamme sRVB et les limites de la perception des couleurs.
Deux fonctions définies dans le niveau de couleur CSS 5 permettent une thématisation plus dynamique sur la plate-forme Web:
color-mix(): prend deux couleurs et renvoie le résultat de leur mélange dans un espace colorimétrique spécifié selon une quantité spécifiée.color-contrast(): sélectionne dans une liste la couleur offrant le contraste le plus élevé par rapport à une couleur unie spécifiée.
Ces fonctions sont compatibles avec les espaces colorimétriques étendus (LAB, LCH et P3). En plus des formats HSL et sRVB, elles utilisent par défaut l'espace colorimétrique LCH uniforme.
Nouvelles unités de fenêtre d'affichage
Les difficultés liées à la taille de la fenêtre d'affichage sont évidentes dans le rapport 2020 sur la compatibilité des navigateurs MN et dans la nouvelle enquête État du CSS 2021. L'option Valeurs CSS et unités de niveau 4 ajoute des unités pour les tailles de fenêtre d'affichage les plus grandes, les plus petites et dynamiques, à savoir lv*, sv* et dv*. Ces unités permettent de créer plus facilement des mises en page qui occupent la fenêtre d'affichage visible sur les appareils mobiles tout en tenant compte de la barre d'adresse.
De plus, l'équipe multifournisseur d'Interop 2022 collaborera pour rechercher et améliorer l'état d'interopérabilité des fonctionnalités de mesure des fenêtres d'affichage existantes, y compris l'unité vh existante.
Utilisez le défilement
Le rapport "2021 Scroll Survey" confirme que les fonctionnalités de défilement et la compatibilité du défilement sont difficiles à implémenter, et qu'elles comportent de nombreux aspects à améliorer. Nous allons nous concentrer sur l'ancrage du défilement, le comportement de défilement et le comportement de défilement hors limites pour que le défilement soit plus cohérent et fluide sur toutes les plates-formes.
Nous étudions également de nouvelles propositions de fonctionnalité d'ancrage du défilement.
Sous-réseau
La valeur subgrid de grid-template-columns et grid-template-rows signifie qu'un élément de grille auquel display: grid est appliqué peut hériter de la définition de piste de la partie de la grille parente sur laquelle il est placé.
Par exemple, les trois composants de carte suivants ont un en-tête et un pied de page alignés sur les en-têtes et pieds de page de carte adjacents, même si chaque carte possède une grille indépendante. Ce modèle fonctionne, car chaque fiche est un élément qui s'étend sur trois lignes de la grille parent, puis utilise une sous-grille pour hériter de ces lignes dans la fiche.
Également inclus
- Conteneurisation du CSS (propriété
contain) - L'élément
<dialog> - Commandes des formulaires
- Typographie et encodages: y compris
font-variant-alternates,font-variant-position, l'unitéicet les encodages de texte CJK - Web Compat, qui se concentre sur les différences entre les navigateurs qui ont causé des problèmes de compatibilité des sites affectant les utilisateurs finaux
Les domaines suivants ont considérablement progressé dans le cadre du projet Compat 2021, mais des améliorations sont encore possibles. Ils ont donc été inclus dans Interop 2022 afin que les autres problèmes puissent être résolus.
- Format
- Flexbox
- Grille
- Positionnement persistant
- Transformations
Enquêtes
En plus des 15 domaines d'action, Interop 2022 comprend trois investigations. Il s'agit de domaines problématiques et nécessitant des améliorations, mais pour lesquels l'état actuel des spécifications ou des tests n'est pas encore suffisant pour pouvoir évaluer les progrès réalisés à l'aide des résultats des tests:
- Modification,
contenteditableetexecCommand - Événements de pointeur et de souris
- Mesure de la fenêtre d'affichage
Les fournisseurs de navigateurs et d'autres personnes concernées collaboreront pour améliorer les tests et les spécifications dans ces domaines, afin qu'ils puissent être inclus dans les futures itérations de cette initiative.
Mesurer la réussite et suivre les progrès
Le tableau de bord "web-platform-tests" existant permettra de suivre la progression dans les 15 domaines clés. Pour chaque domaine, un ensemble de tests a été identifié. Les navigateurs sont ensuite notés lors de ces tests, avec une note pour chaque domaine et une note globale pour les 15 domaines.
Pour suivre la progression, consultez le tableau de bord d'Interop 2022. Au cours de l'année, vous pouvez voir comment la plate-forme que vous concevez s'améliore.
Quelles seront les conséquences pour les développeurs ?
L'objectif de ces initiatives d'interopérabilité pluriannuelles, sous la forme de Compat 2021, d'Interop 2022 et plus encore, est d'identifier et de résoudre les difficultés rencontrées par les développeurs depuis de nombreuses années. Il ne s'agit pas d'un processus unique, mais plutôt d'une collaboration étroite entre tous les principaux fournisseurs de navigateurs et leurs amis, dans le but d'améliorer la plate-forme Web à tous les niveaux.
En substance, l'objectif est de rendre la plate-forme Web plus facile à utiliser et plus fiable pour les développeurs, afin qu'ils puissent se consacrer davantage à la création d'expériences Web de qualité au lieu de travailler sur des incohérences au niveau des navigateurs.
Donnez-nous votre avis
N'hésitez pas à nous faire part de vos commentaires sur les améliorations apportées pendant Compat 2021 ou sur les fonctionnalités incluses dans Interop 2022. Laquelle de ces fonctionnalités fera la plus grande différence dans votre travail ? Qu'est-ce qui vous enthousiasme vraiment ? Problèmes liés aux fichiers dans le dépôt GitHub ou contactez-nous sur Twitter.
En savoir plus sur Interop 2022 depuis: