Compat 2021: éliminer cinq principaux problèmes de compatibilité sur le Web

Google collabore avec d'autres fournisseurs de navigateurs et partenaires du secteur pour résoudre les cinq principaux problèmes de compatibilité des navigateurs pour les développeurs Web: CSS flexbox, CSS Grid, position: sticky, aspect-ratio et les transformations CSS.

Google collabore avec d'autres fournisseurs de navigateurs et partenaires du secteur pour résoudre les cinq principaux problèmes de compatibilité des navigateurs pour les développeurs Web. Les domaines d'intérêt sont les suivants : CSS flexbox, CSS Grid, position: sticky, aspect-ratio et les transformations CSS. Découvrez comment contribuer et suivre la conférence pour participer.

Contexte

La compatibilité sur le Web a toujours été un grand défi pour les développeurs. Ces dernières années, Google et d'autres partenaires, dont Mozilla et Microsoft, se sont efforcés d'en savoir plus sur les principaux problèmes des développeurs Web afin de nous guider dans notre travail et de hiérarchiser nos priorités pour améliorer la situation. Ce projet est lié au travail de satisfaction des développeurs (DevSAT) de Google. Il a commencé à plus grande échelle avec la création des enquêtes MDN DNA (Developer Needs Assessment) en 2019 et 2020, ainsi qu'un travail de recherche approfondi présenté dans le rapport sur la compatibilité des navigateurs MDN 2020. Des recherches supplémentaires ont été menées sur différents canaux, tels que les enquêtes State of CSS et State of JS.

L'objectif en 2021 est d'éliminer les problèmes de compatibilité des navigateurs dans cinq domaines clés afin que les développeurs puissent s'appuyer dessus en toute confiance comme base fiable. Cette initiative s'appelle #Compat 2021.

Choisir sur quoi se concentrer

Bien que des problèmes de compatibilité avec les navigateurs existent dans pratiquement toutes les plates-formes Web, ce projet se concentre sur un petit nombre des domaines les plus problématiques qui peuvent être améliorés de manière significative, ce qui les élimine des principaux problèmes des développeurs.

Le projet de compatibilité utilise plusieurs critères qui influencent les domaines à prioriser, dont certains sont les suivants:

Cinq priorités pour 2021

En 2020, Chromium a commencé à travailler sur les principaux domaines décrits dans Améliorer la compatibilité du navigateur Chromium en 2020. En 2021, nous allons redoubler d'efforts pour aller encore plus loin. Google et Microsoft collaborent pour résoudre les principaux problèmes de Chromium, avec Igalia. Igalia, qui contribue régulièrement à Chromium et WebKit, et qui gère le port officiel de WebKit pour les appareils intégrés, a été très impliqué dans ces efforts de compatibilité et nous aidera à résoudre et à suivre les problèmes identifiés.

Voici les problèmes que nous nous engageons à résoudre en 2021.

Flexbox CSS

La flexbox CSS est largement utilisée sur le Web, mais les développeurs doivent encore relever certains défis majeurs. Par exemple, Chromium et WebKit ont rencontré des problèmes avec les conteneurs flex auto-height, ce qui a entraîné des images de taille incorrecte.

Photo étirée d'un échiquier.
Taille de l'image incorrecte en raison de bugs.
Échiquier.
Image de taille correcte.
Photo de Alireza Mahmoudi.

L'article de blog Flexbox Cats d'Igalia approfondit ces problèmes avec de nombreux autres exemples.

Pourquoi cette priorité est-elle attribuée ?

Grille CSS

La grille CSS est un élément de base des mises en page Web modernes, qui remplace de nombreuses techniques et solutions de contournement plus anciennes. À mesure que l'adoption augmente, elle doit être solide, de sorte que les différences entre les navigateurs ne soient jamais une raison de l'éviter. L'animation des mises en page en grille, compatible avec Gecko, mais pas avec Chromium ni WebKit, est un domaine qui manque. Si cette fonctionnalité est prise en charge, les effets suivants sont possibles:

Démo d'échecs animés par Chen Hui Jing.

Pourquoi cette priorité a-t-elle été attribuée ?

CSS position: sticky

Le positionnement fixe permet de coller le contenu au bord de la fenêtre d'affichage. Il est couramment utilisé pour les en-têtes qui sont toujours visibles en haut de la fenêtre d'affichage. Bien qu'il soit compatible avec tous les navigateurs, il existe des cas d'utilisation courants où il ne fonctionne pas comme prévu. Par exemple, les en-têtes de tableau persistants ne sont pas compatibles avec Chromium. Bien qu'ils soient désormais compatibles avec un indicateur, les résultats ne sont pas cohérents entre les navigateurs:

Chromium avec "TablesNG"
Gecko
WebKit

Découvrez la démo des en-têtes de tableau persistants de Rob Flack.

Pourquoi cette priorité a-t-elle été attribuée ?

Propriété CSS aspect-ratio

La nouvelle propriété CSS aspect-ratio permet de maintenir facilement un format cohérent pour les éléments, ce qui élimine le besoin du hack padding-top bien connu:

Utiliser padding-top
.container {
 
width: 100%;
 
padding-top: 56.25%;
}
Utiliser aspect-ratio
.container {
 
width: 100%;
 
aspect-ratio: 16 / 9;
}

Comme il s'agit d'un cas d'utilisation courant, il devrait être largement utilisé. Nous voulons nous assurer qu'il est fiable dans tous les scénarios courants et dans tous les navigateurs.

Pourquoi cette priorité est-elle attribuée ?

  • Enquêtes: déjà bien connues, mais pas encore largement utilisées dans State of CSS
  • Tests: 27% réussis dans tous les navigateurs
  • Utilisation : 3%, et devrait augmenter

Transformations CSS

Les transformations CSS sont compatibles avec tous les navigateurs depuis de nombreuses années et sont largement utilisées sur le Web. Toutefois, il existe encore de nombreux domaines dans lesquels ils ne fonctionnent pas de la même manière dans les différents navigateurs, en particulier avec les animations et les transformations 3D. Par exemple, un effet de retournement de carte peut être très incohérent d'un navigateur à l'autre:

Effet de retournement de carte dans Chromium (à gauche), Gecko (au milieu) et WebKit (à droite). Démonstration par David Baron à partir du commentaire de bug.

Pourquoi cette priorité est-elle attribuée ?

Comment contribuer et suivre

Suivez et partagez les informations que nous publions sur @ChromiumDev ou sur la liste de diffusion publique, Compat 2021. Assurez-vous que des bugs existent ou signalez-les pour les problèmes que vous rencontrez. Si quelque chose vous manque, contactez-nous via les canaux ci-dessus.

Nous vous tiendrons régulièrement informé de l'avancement de ce projet sur web.dev. Vous pouvez également suivre la progression de chaque domaine d'intérêt dans le tableau de bord de compatibilité 2021.

Tableau de bord de compatibilité 2021
Panneau de compatibilité 2021 (capture d'écran prise le 16 novembre 2021).

Nous espérons que cet effort concerté des fournisseurs de navigateurs pour améliorer la fiabilité et l'interopérabilité vous aidera à créer des choses incroyables sur le Web.