Google collabore avec d'autres fournisseurs de navigateurs et des partenaires du secteur pour résoudre les cinq principaux problèmes de compatibilité des développeurs Web: CSS Flexbox, CSS Grid, position: sticky, aspect-ratio et les transformations CSS.
Google collabore avec d'autres fournisseurs de navigateurs et des partenaires du secteur pour résoudre les cinq principaux problèmes de compatibilité rencontrés par les développeurs Web. Il s'agit des formats CSS Flexbox, CSS Grid, position: sticky, aspect-ratio et CSS. Consultez Comment contribuer et suivre pour savoir comment participer.
Contexte
La compatibilité sur le Web a toujours été un défi de taille pour les développeurs. Au cours des deux dernières années, Google et d'autres partenaires, y compris Mozilla et Microsoft, ont décidé d'en savoir plus sur les principales difficultés rencontrées par les développeurs Web afin de piloter notre travail et la hiérarchisation 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 (évaluation des besoins des développeurs) en 2019 et 2020, ainsi qu'une étude approfondie présentée dans le rapport MDN Browser Compatibility Report 2020. Des recherches supplémentaires ont été menées sur différents canaux, tels que les enquêtes sur l'état du CSS et l'état de JS.
En 2021, l'objectif est d'éliminer les problèmes de compatibilité des navigateurs dans cinq domaines d'action clés afin que les développeurs puissent s'en inspirer pour constituer des bases fiables. Cet effort s'appelle #Compat 2021.
Choisir sur quoi vous concentrer
Bien qu'il existe des problèmes de compatibilité des navigateurs dans pratiquement toute la plate-forme Web, ce projet se concentre sur un petit nombre des domaines les plus problématiques, qui peuvent être nettement améliorés, ce qui les élimine comme des problèmes majeurs pour les développeurs.
Le projet de compatibilité s'appuie sur plusieurs critères qui déterminent les domaines à prioriser, parmi lesquels:
- Utilisation des fonctionnalités. Par exemple, Flexbox est utilisé dans 75% des pages vues, et son adoption augmente fortement dans HTTP Archive.
- Nombre de bugs (dans Chromium, Gecko et WebKit) et nombre d'étoiles de ces bugs pour Chromium
Résultats de l'enquête:
- Enquêtes DNA MN
- Rapport de compatibilité des navigateurs MN
- État du CSS : fonctionnalités les plus connues et utilisées
Résultats des tests de web-platform-tests Par exemple, flexbox sur wpt.fyi.
Puis-je utiliser les fonctionnalités les plus recherchées ?
Les cinq principaux domaines d'action pour 2021
En 2020, Chromium a commencé à chercher des solutions aux principaux aspects décrits dans l'article Améliorer la compatibilité du navigateur Chromium en 2020. En 2021, nous allons encore plus loin. Google et Microsoft collaborent pour résoudre les principaux problèmes dans Chromium, avec Igalia. Igalia, qui est des contributeurs réguliers de Chromium et de WebKit, et gère le port WebKit officiel des appareils embarqués, nous a beaucoup soutenu et engagé dans ces efforts de compatibilité, et nous aidera à résoudre les problèmes identifiés et à en effectuer le suivi.
Voici les problèmes qui devraient être corrigés en 2021.
Flexbox CSS
CSS Flexbox est largement utilisé sur le Web, et les développeurs font encore face à des défis majeurs. Par exemple, Chromium et WebKit ont tous deux rencontré des problèmes avec les conteneurs Flex auto-height, ce qui entraîne des images de taille incorrecte.
Photo : Alireza Mahmoudi.
L'article de blog Flexbox Cats d'Igalia approfondit ces problèmes à l'aide de nombreux autres exemples.
Pourquoi cette priorité ?
- Enquêtes: principal problème mentionné dans le rapport de compatibilité des navigateurs MN, le plus connu et utilisé dans l'article État du CSS
- Tests: 85% de réussite dans tous les navigateurs
- Utilisation : 75% des pages vues, une forte augmentation dans HTTP Archive
Grille CSS
La grille CSS est un élément de base des mises en page Web modernes. Elle remplace de nombreuses techniques et solutions de contournement plus anciennes. À mesure que l'adoption se développe, il doit être extrêmement fiable, afin que les différences entre les navigateurs n'aient jamais une raison de l'éviter. Il manque toutefois la possibilité d'animer les mises en page en grille, disponible dans Gecko, mais pas dans Chromium ni WebKit. Lorsqu'ils sont pris en charge, ce type d'effets est possible:
Pourquoi cette priorité ?
- Enquêtes: deuxième application du rapport de compatibilité des navigateurs MN, bien connue, mais moins souvent utilisée dans le rapport Rapport sur l'état du CSS
- Tests: 75% de réussite dans tous les navigateurs
- Utilisation : 8% et augmentation constante, légère croissance de HTTP Archive
Position CSS: persistante
Le positionnement persistant permet de maintenir le contenu au bord de la fenêtre d'affichage. Cette option est couramment utilisée pour les en-têtes qui sont toujours visibles en haut de la fenêtre d'affichage. Bien que cette fonctionnalité soit compatible avec tous les navigateurs, elle ne fonctionne pas comme prévu dans certains cas d'utilisation courants. Par exemple, les en-têtes de tableau persistants ne sont pas compatibles avec Chromium et bien qu'ils soient désormais compatibles avec un indicateur, les résultats sont incohérents selon les navigateurs:
Regardez la démonstration sur les en-têtes de tableau persistants de Rob Flack.
Pourquoi cette priorité ?
- Enquêtes: données très connues/utilisées dans l'étude State of CSS (État du CSS), citées plusieurs fois dans le rapport de compatibilité des navigateurs du MN
- Tests : 66% de réussite dans tous les navigateurs
- Utilisation : 8%
Propriété de format CSS
La nouvelle propriété CSS aspect-ratio permet de maintenir facilement un rapport largeur/hauteur cohérent pour les éléments, ce qui évite d'avoir à utiliser le célèbre piratage padding-top:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Il s'agit d'un cas d'utilisation très courant, qui devrait être largement utilisé. Nous voulons nous assurer qu'elle est fiable dans tous les scénarios courants et sur tous les navigateurs.
Pourquoi cette priorité ?
- Enquêtes: elles sont déjà bien connues, mais pas encore largement utilisées dans la section État du CSS
- Tests: 27% de réussite dans tous les navigateurs
- Utilisation : 3% et augmentation prévue
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 tous les navigateurs, en particulier avec les animations et les transformations 3D. Par exemple, l'effet de retournement de carte peut être très incohérent entre les navigateurs:
Pourquoi cette priorité ?
- Enquêtes: très bien connues et utilisées dans le rapport State of CSS
- Tests: 55% de réussites avec tous les navigateurs
- Utilisation : 80%
Comment contribuer et suivre
Suivez et partagez toutes les mises à jour que nous publions sur @ChromiumDev ou la liste de diffusion publique Compat 2021. Assurez-vous que les bugs existent ou signalez-les pour les problèmes que vous avez rencontrés. S'il manque quelque chose, contactez-les via les canaux ci-dessus.
Vous serez régulièrement informé de l'avancement sur le site web.dev. Vous pourrez également suivre l'avancement de chaque domaine d'action dans le tableau de bord Comp 2021.
Nous espérons que cet effort concerté entre les éditeurs de navigateurs pour améliorer la fiabilité et l'interopérabilité vous aidera à créer des produits étonnants sur le Web.