Mise à jour de milieu d'année sur Compat 2021 visant à éliminer les problèmes de compatibilité des navigateurs dans cinq domaines d'action clés: CSS Flexbox, CSS Grid, position: sticky, format-ratio et CSS transforms (Transformations CSS).
L'heure est venue de faire la mise à jour de milieu d'année de Compat 2021, une initiative visant à éliminer les problèmes de compatibilité des navigateurs dans cinq domaines d'action clés. Pour en savoir plus sur le travail de #compat2021 et sur les domaines d'action que nous avons choisis, consultez l'annonce de mars.
Les améliorations de Chromium décrites dans cet article seront disponibles dans Chrome, Edge et tous les navigateurs basés sur Chromium.
Comment nous mesurons les progrès
Vous pouvez consulter la section web-platform-tests du tableau de bord Comppat 2021 pour afficher le nombre de tests réussis et les graphiques de tendances pour différents navigateurs.
Un simple nombre de "tests réussis" ne reflète pas entièrement la compatibilité des navigateurs. Toutefois, il s'agit de l'un des indicateurs que nous utilisons pour suivre la progression de nos efforts. Moins il y a de différences entre les navigateurs dans les résultats des tests, cela signifie une meilleure interopérabilité d'une fonctionnalité Web entre plusieurs navigateurs.
Flexbox CSS
Des améliorations ont été apportées à Flexbox sur les trois moteurs de navigateur.
Safari 14.1 a expédié la propriété gap pour flexbox. La propriété gap est un moyen pratique de définir un espacement entre les éléments. Cette propriété est souvent utilisée dans la mise en page sous forme de grille, et la prise en charge de la mise en page Flexbox était l'une des fonctionnalités les plus demandées dans le rapport de compatibilité des navigateurs MN. Avec cette mise à jour, la propriété gap dans les mises en page Flex est disponible dans tous les principaux navigateurs, et un problème de compatibilité est résolu. Safari 14.1 incluait également de nombreux correctifs pour les images dans Flexbox, supprimant la nécessité d'anciennes solutions de contournement.
Firefox a résolu le rendu des tables en tant qu'éléments Flex et a ainsi pu passer de près de 100% les tests avec Firefox (actuellement à 98, 5%).
Chromium a également corrigé les tables en tant qu'éléments Flex.
Dans Chromium 88, les images ont également été réécrites en éléments Flex afin de résoudre un certain nombre de bugs anciens. Enfin, Chromium a récemment accepté les nouveaux mots clés d'alignement: start, end, self-start, self-end, left et right. Vous pouvez essayer ces mots clés dans Chrome Canary et Edge Canary.
Grille CSS
L'utilisation de la grille CSS augmente régulièrement, actuellement à hauteur de 9% des pages vues. Les trois principaux moteurs de navigateur implémentent la grille CSS et réussissent déjà plus de 89% des tests de plate-forme Web associés. Il est important de combler l'écart de compatibilité pour assurer une croissance constante de cette fonctionnalité.
Jusqu'à présent en 2021, Safari est passé de 89% à 93% de réussite aux tests, et Chromium travaille sur une nouvelle architecture pour résoudre davantage de problèmes de grille CSS, appelée GridNG. Cette initiative menée par l'équipe Microsoft a conduit à une augmentation récente de 94% à 97% des tests de grille ciblée. Vous devriez bientôt recevoir des informations sur GridNG sur le blog Edge.
CSS position: sticky
Dans Chromium, position: sticky pour les en-têtes de table a été corrigé avec le lancement de TablesNG, une initiative de plusieurs années visant à repenser l'architecture du rendu des tables.
Avec cette modification et quelques corrections
finales, la version développeur de Chrome et Edge 93 a réussi 100% des tests ciblés.
Au-delà de position: sticky,
TablesNG a résolu 72 bugs dans Chromium !
Propriété CSS aspect-ratio
La propriété aspect-ratio, qui permet de définir facilement le rapport largeur/hauteur, est essentielle au Responsive Web Design. Cette méthode permet également d'éviter les décalages de mise en page cumulatifs.
La propriété aspect-ratio est désormais compatible avec les versions stables de Chrome, Edge et Firefox, ainsi qu'avec la version bêta de Safari 15. À mesure que la compatibilité multinavigateur s'améliore, l'utilisation augmente.
Bien qu'aucun navigateur ne réussisse à 100% les tests, l'écart de compatibilité pour aspect-ratio est le plus petit des cinq domaines prioritaires de Compat 2021. Plus de 90% des tests sont concluants pour tous les principaux navigateurs. À l'avenir, nous continuerons de surveiller les progrès à l'aide de cette suite de tests afin d'en faire une fonctionnalité très fiable.
Découvrez l'utilisation et les avantages de la propriété aspect-ratio sur web.dev.
Transformations CSS
Les résultats des tests ciblés pour les transformations CSS s'améliorent lentement et de manière régulière, grâce à la correction de bugs et aux améliorations apportées aux tests eux-mêmes.
L'équipe Chromium travaille également à améliorer l'interopérabilité de transform-style:
preserve-3d et transform :perspective(). Nous espérons vous donner plus de détails à ce sujet dans la prochaine mise à jour.
Amélioration du score global
Depuis l'annonce faite en mars, les trois moteurs de navigateur ont amélioré leurs scores Compat 2021:
- Chrome et Edge Dev sont passés de 86 à 92.
- Firefox est passé de 83 à 86.
- Safari est passé de 64 à 82.
Safari a permis de réduire l'écart de compatibilité de 18 points grâce au travail important des contributeurs WebKit. En particulier, l'équipe d'Igalia a contribué à la propriété aspect-ratio et à de nombreuses améliorations apportées à Flexbox et Grid, telles que gap pour Flexbox et plusieurs corrections de bugs.
Suivez les progrès de Compat 2021
Pour suivre l'évolution de Compat 2021, consultez le tableau de bord, abonnez-vous à notre liste de diffusion ou contactez usat @chromiumdev. En cas de problème, veillez à signaler un bug pour le navigateur concerné.