Mise à jour de fin d'année de 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).
La fin de l'année approche et le moment est venu de faire la dernière mise à jour de Compat 2021, une initiative visant à éliminer les problèmes de compatibilité des navigateurs dans cinq domaines d'action clés.
>90%
dans tous les navigateurs
Depuis notre dernière mise à jour, nous avons continué à constater des améliorations dans tous les navigateurs. Tous les navigateurs ont commencé avec des résultats bien plus faibles au début de l'année, mais tous les navigateurs ont désormais dépassé les 90 %. Cela signifie que la plate-forme Web a considérablement amélioré l'interopérabilité des cinq domaines d'action.
Les contributions aux moteurs de navigateur proviennent non seulement des fournisseurs de navigateurs, mais aussi d'autres membres de la communauté Web. Pour ce projet, nous tenons particulièrement à remercier Igalia pour son implication et son travail continu pour améliorer les scores. Igalia a contribué à améliorer les cinq domaines clés de Compat 2021.
Sur wpt.fyi, le tableau de bord des résultats des tests, il existe désormais une vue des résultats filtrés qui affiche tous les tests inclus dans Compat 2021, ainsi que des vues pour Chrome, Firefox et Safari qui comparent les résultats à notre dernière mise à jour de juillet.
Découvrons les améliorations apportées dans chaque domaine.
Flexbox CSS
flex-basis: content est désormais disponible pour tous les navigateurs, avec des implémentations disponibles dans Chromium et WebKit. (La valeur content était déjà compatible avec Gecko.)
Dans Chromium, un problème de dimensionnement Flexbox est résolu, conformément aux spécifications et au comportement de Gecko. Dans Gecko, plusieurs problèmes affectant Compat 2021 ont été résolus, y compris un problème de hauteur en pourcentage sur les éléments Flex. Enfin, dans WebKit, il est désormais possible d'utiliser davantage de valeurs de propriétés d'alignement (left, right, self-start, self-end, start, end) et de nombreuses améliorations ont été apportées au positionnement absolu, améliorant également les résultats des tests Flexbox dans Compat 2021.
Grille CSS
L'utilisation de la grille CSS sur le Web ne cesse de croître, comme le montre 2021 Web Almanac et les métriques d'utilisation de Chrome.
Le lancement de GridNG dans Chrome et Edge 93 a résolu de nombreux problèmes de longue date liés à Grid, ce qui a permis de clôturer un nombre impressionnant de 38 problèmes dans l'outil de suivi des bugs de Chromium. En plus de nombreuses améliorations mineures qui ont suivi, le score Compat 2021 pour la grille dans Chromium est passé de 3% à 97%. Ce travail était dirigé par l’équipe Edge de Microsoft.
Un bug de positionnement absolu affectant la grille a été corrigé dans Gecko. De nombreuses corrections ont été apportées à WebKit, ce qui a permis d'améliorer de 1% les tests de la grille pour Firefox et de 3% pour Safari.
CSS position: sticky
Dans notre dernière mise à jour, nous avons remarqué que position: sticky était la première zone où un navigateur (dans ce cas, Chrome et Edge) a réussi les tests avec succès à 100 %. Désormais, après un certain nombre de corrections dans l'implémentation de WebKit, Safari obtient également un score de 100% pour ces tests. La plupart de ces améliorations
étaient incluses dans Safari 15.
Propriété CSS aspect-ratio
La prise en charge de la définition du format (rapport largeur/hauteur) des éléments entre navigateurs n'a cessé de s'améliorer, avec des scores Compat 2021 atteignant respectivement 99%, 97% et 95% pour Chrome/Edge, Firefox et Safari. La plupart des améliorations ne concernent pas la propriété aspect-ratio elle-même, mais plutôt la façon dont les attributs width et height sont mappés sur une valeur aspect-ratio par défaut pour les éléments. Cette configuration a été appliquée pour plusieurs éléments de WebKit et <canvas> pour Chromium.
Transformations CSS
transform: perspective(none) est désormais compatible avec Chromium, Gecko et WebKit. Cela facilitera l'animation
entre une perspective et aucune perspective.
Dans Chromium, transform-style: preserve-3d (qui permet aux éléments enfants de participer à la même scène 3D) et la propriété perspective (qui applique une transformation de perspective aux éléments enfants) sont désormais alignés avec la spécification en les rendant applicables uniquement aux éléments enfants.
La forte augmentation des scores pour les transformations CSS pour tous les navigateurs est principalement due aux améliorations apportées à la suite de tests, dans laquelle les tests incorrects ont été corrigés ou supprimés. Cela permet de comprendre plus facilement les problèmes d'interopérabilité restants et d'éviter les régressions à l'avenir.
Conclusion
Nous vous sommes reconnaissants pour le travail accompli en fin d'année, avec de nombreuses améliorations apportées au score et à l'infrastructure de test. aspect-ratio était une fonctionnalité demandée depuis longtemps par les développeurs Web. Elle est désormais compatible avec tous les navigateurs. L'utilisation de Flexbox, de la grille et de position: sticky est de plus en plus importante, et ces fonctionnalités sont désormais mieux prises en charge dans tous les navigateurs grâce aux nombreuses améliorations apportées en 2021.
Étape suivante Nous sommes ravis de poursuivre notre collaboration avec d'autres fournisseurs de navigateurs et la communauté au sens large dans le cadre de cette initiative. Nous avons commencé à étudier les axes d'action pour 2022. Nous vous communiquerons prochainement une annonce à ce sujet.
Si vous avez des commentaires ou des questions, n'hésitez pas à nous contacter sur Twitter (@ChromiumDev).