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:
- Utilisation des fonctionnalités. Par exemple, Flexbox est utilisé 75% de toutes les pages vues. De plus, l'adoption du protocole HTTP est en forte hausse. Archiver.
- Nombre de bugs (dans Chromium, Gecko WebKit), et pour Chromium, combien d'étoiles ces les insectes.
Résultats de l'enquête:
- Enquêtes sur l'ADN de MDN
- Rapport sur la compatibilité du navigateur MDN
- État du CSS caractéristiques les plus connues et les plus 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 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 type="x-smartling-placeholder">Photo d'Alireza Mahmoudi.
Le Flexbox d'Igalia Cats nous approfondit ces questions avec de nombreux autres exemples.
Pourquoi est-elle prioritaire ?
- Enquêtes : principal problème dans le pays suivant : Rapport sur la compatibilité du navigateur MDN les plus connus et utilisés dans l'État de CSS
- Tests: 85% de réussite dans tous les navigateurs
- Utilisation: 75% des pages vues, avec une hausse HTTP Archiver
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">Pourquoi est-elle prioritaire ?
- Enquêtes: 2e place dans Rapport sur la compatibilité du navigateur MDN bien connue, mais moins souvent utilisée dans State of CSS
- Tests: 75% de réussite dans tous les navigateurs
- Utilisation: 8 %, avec une croissance constante, une légère augmentation du trafic HTTP Archiver
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 type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Consultez les en-têtes de tableau persistants de Rob Flack.
Pourquoi est-elle prioritaire ?
- Enquêtes: très connues/utilisées pour évaluer l'état des CSS et a été mis en avant plusieurs fois dans Rapport sur la compatibilité du navigateur MDN
- Tests: 66% de réussite dans tous les navigateurs
- Utilisation: 8%
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:
.container { width: 100%; padding-top: 56.25%; }
.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">Pourquoi est-elle prioritaire ?
- Enquêtes: très bien connues et utilisées dans le cadre de l'étude State of CSS
- Tests: 55% de réussite au total navigateurs
- Utilisation: 80%
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">
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 !