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

Google collabore avec d'autres fournisseurs de navigateurs et des partenaires du secteur afin de 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 des partenaires du secteur pour corriger le les cinq principales difficultés de compatibilité des navigateurs pour les développeurs Web. Domaines d'action sont "flexbox", "CSS Grid", "position: sticky", "aspect-ratio" et "CSS". de transformation. Consultez Comment contribuer et suivre la formation pour apprendre à s’impliquer.

Contexte

La compatibilité sur le Web a toujours été un grand défi pour les développeurs. Dans Google et d'autres partenaires, dont Mozilla et Microsoft, ont entrepris d'en apprendre davantage sur les principales difficultés développeurs, afin de piloter notre travail et de définir des priorités afin d'améliorer la situation. Ce projet est associé à l'application Google Developers la satisfaction (DevSAT), a commencé à grande échelle avec la création Enquêtes sur l'évaluation des besoins des développeurs (MDN DNA) en 2019 et 2020, ainsi qu'un travail de recherche approfondi présenté dans le Rapport 2020 sur la compatibilité des navigateurs MDN D'autres recherches ont été menées par le biais de divers canaux, tels que le Rapport sur l'état CSS et État de JS enquêtes.

En 2021, l'objectif est d'éliminer les problèmes de compatibilité des navigateurs domaines afin que les développeurs puissent s'en inspirer en toute confiance pour en faire des bases fiables. Ce s'appelle #Compat 2021.

Choisir les éléments sur lesquels vous concentrer

Bien qu'il existe des problèmes de compatibilité avec les navigateurs dans pratiquement tout le Web, plate-forme, l'objectif de ce projet est de porter sur un petit nombre qui peuvent être considérablement améliorées, et donc de les supprimer en tant que principaux problèmes. pour les développeurs.

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

Les cinq principaux axes d'action pour 2021

En 2020, Chromium a commencé à travailler sur les principaux domaines décrits dans Amélioration de la compatibilité du navigateur Chromium en 2020 En 2021, nous allons nous efforcer d'aller encore plus loin. Google et Microsoft travaille main dans la main pour résoudre les principaux problèmes liés à Chromium, en collaboration avec Igalia. Igalia, qui sont des contributeurs réguliers vers Chromium et WebKit, ainsi que les responsables du port WebKit officiel pour les appareils embarqués, ont été très d'accord et ont participé à ces efforts de compatibilité. aider à résoudre et à suivre les problèmes identifiés.

Voici les domaines sur lesquels les problèmes seront résolus en 2021.

Flexbox CSS

CSS Flexbox correspond à largement utilisé sur le Web, et il reste des défis majeurs pour les développeurs. Par exemple : à la fois pour Chromium et WebKit ont rencontré des problèmes avec auto-height conteneurs flexibles, entraînant des tailles d'images incorrectes.

<ph type="x-smartling-placeholder">
</ph> Photo étirée d&#39;un échiquier. <ph type="x-smartling-placeholder">
</ph> Image mal dimensionnée en raison de bugs.
<ph type="x-smartling-placeholder">
</ph> Échiquier. <ph type="x-smartling-placeholder">
</ph> Image de taille correcte.
Photo d'Alireza Mahmoudi.

Le Flexbox d'Igalia Cats nous approfondit ces questions avec de nombreux autres exemples.

Pourquoi est-elle prioritaire ?

Grille CSS

La valeur Grille CSS est composant de base des mises en page Web modernes, remplaçant de nombreuses techniques plus anciennes et des solutions de contournement. À mesure que l'adoption se développe, elle doit être solide, afin que différences entre les navigateurs n'est jamais une raison de les éviter. Un domaine qui est n'offre pas la possibilité d'animer les mises en page en grille. Cette fonctionnalité est disponible dans Gecko, mais pas Chromium ou WebKit Lorsque cette fonctionnalité est disponible, des effets de ce type sont possibles:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Démonstration animée des échecs par Chen Hui Jing.

Pourquoi est-elle prioritaire ?

Position CSS: persistante

Position fixe permet au contenu de rester attaché au bord de la fenêtre d'affichage et est couramment utilisé pour les en-têtes toujours visibles en haut de la fenêtre d'affichage. Bien que compatible dans tous les navigateurs, il existe des cas d'utilisation courants où elle ne fonctionne pas comme prévu. Par exemple : en-têtes de tableau persistants ne sont pas prises en charge dans Chromium, et bien que avec un drapeau, les résultats sont incohérents d'un navigateur à l'autre:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Chromium avec "TablesNG"
. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Gecko (gecko)
. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> WebKit
.

Consultez les en-têtes de tableau persistants de Rob Flack.

Pourquoi est-elle prioritaire ?

Propriété de format CSS

Les nouvelles aspect-ratio La propriété CSS permet de maintenir facilement un rapport largeur/hauteur cohérent pour ce qui évite d'avoir à utiliser Astuce padding-top:

Utiliser la marge intérieure supérieure
.container {
  width: 100%;
  padding-top: 56.25%;
}
Utiliser les proportions
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Étant donné qu'il s'agit d'un cas d'utilisation courant, il devrait être largement utilisé. nous voulons nous assurer qu'il est solide dans tous les scénarios courants et sur tous les navigateurs.

Pourquoi est-elle prioritaire ?

  • Enquêtes : déjà bien connue, mais pas encore largement utilisée dans le pays suivant : État de CSS
  • Tests: 27% de réussite dans tous les navigateurs
  • Utilisation: 3% et devrait croître

Transformations CSS

Transformations CSS sont compatibles avec tous les navigateurs depuis de nombreuses années et sont largement utilisés Web. Toutefois, il reste encore de nombreux domaines dans lesquels ils ne fonctionnent pas de la même manière. sur tous les navigateurs, notamment avec des animations et des transformations 3D. Par exemple, une fiche l'effet inversé peut varier considérablement d'un navigateur à l'autre:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Effet de retournement de carte dans Chromium (à gauche), Gecko (au milieu) et WebKit (à droite). Démonstration de David Baron dans l'article bug d'un commentaire.

Pourquoi est-elle prioritaire ?

Comment contribuer et suivre la progression

Suivez et partagez toutes les actualités que nous publions. @ChromiumDev ou la liste de diffusion publique, Compat 2021. s'assurer qu'il existe des bogues ou envoyez-les pour les problèmes que vous rencontrez et s'il manque quelque chose, contactez-nous via canaux de distribution.

Les progrès seront régulièrement mis à jour sur web.dev, et vous pourrez et suivre l'avancement de chaque domaine clé dans le Compat 2021 tableau de bord.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Tableau de bord Compat 2021
The Compat 2021 Dashboard (capture d'écran réalisée le 16 novembre 2021)

Nous espérons que ces efforts concertés des fournisseurs de navigateurs amélioreront la fiabilité et l'interopérabilité vous aidera à développer des choses étonnantes sur le Web !