Google arbeitet mit anderen Browseranbietern und Branchenpartnern zusammen, um die fünf größten Probleme bei der Browserkompatibilität für Webentwickler zu beheben: CSS-Flexbox, CSS Grid, position: sticky, aspect-ratio und CSS-Transformationen.
Google arbeitet mit anderen Browseranbietern und Branchenpartnern zusammen,
die fünf häufigsten Probleme mit der Browserkompatibilität für Webentwickler. Schwerpunkte
sind CSS-Flexbox, CSS Grid, position: sticky, aspect-ratio und CSS
Transformationen. Weitere Informationen finden Sie unter So können Sie beitragen und mitmachen für
wie Sie sich einbringen können.
Hintergrund
Kompatibilität mit dem Web war für Entwickler schon immer eine große Herausforderung. Im Google und anderen Partnern wie Mozilla und Microsoft möchte mehr über die größten Herausforderungen Entwickelnden zu arbeiten, um unsere Arbeit und Priorisierung voranzutreiben, um die Situation zu verbessern. Dieses Projekt ist mit dem Entwicklerteam von Google DevSAT (Satisfaction, DevSAT) begann im großen Stil mit der Erstellung des MDN DNA-Umfragen (Developer Needs Assessment) 2019 und 2020 durchgeführt. Außerdem wurden im MDN Browser Compatibility Report 2020 In verschiedenen Kanälen wurden zusätzliche Studien durchgeführt, z. B. im Bericht State of CSS und State of JS Umfragen.
Das Ziel für 2021 ist es, Probleme mit der Browserkompatibilität zu beseitigen. Dabei stehen fünf Schwerpunkte zur Verfügung: damit Entwickler darauf vertrauensvoll aufbauen können. Dieses nennt sich #Compat 2021.
Entscheiden, worauf Sie sich konzentrieren möchten
Es gibt eigentlich immer Probleme mit der Browserkompatibilität Plattform haben, liegt der Schwerpunkt dieses Projekts auf einer kleinen Anzahl der problematischsten Bereiche, die deutlich verbessert werden können, sodass diese als Hauptprobleme wegfallen für Entwickler.
Im Kompatibilitätsprojekt werden mehrere Kriterien verwendet, zu priorisieren. Einige sind:
- Nutzung der Funktion. Die Flexbox wird z. B. in 75% aller Seitenaufrufe und die Akzeptanz steigt stark in HTTP Archivieren:
- Anzahl der Fehler (in Chromium, Gecko WebKit) und bei Chromium wie viele Sterne diese Fehler auftreten.
Umfrageergebnisse:
- MDN-DNA-Umfragen
- MDN-Browserkompatibilitätsbericht
- Status des Preisvergleichsportals bekannteste und verwendete Funktionen
Testergebnisse von web-platform-tests. Zum Beispiel: Flexbox auf wpt.fyi.
Die fünf wichtigsten Schwerpunkte 2021
Seit 2020 befasst sich Chromium mit den wichtigsten Bereichen, die in Verbesserung der Browserkompatibilität von Chromium im Jahr 2020 2021 gehen wir noch einen Schritt weiter. Google und Microsoft und Igalia arbeiten gemeinsam an der Lösung der häufigsten Probleme in Chromium. Igalia, die regelmäßig Beiträge Chromium und WebKit sowie die Verwalter des offiziellen WebKit-Ports für eingebettete Geräte, die diese Bemühungen zur Kompatibilität sehr unterstützt und engagiert haben. bei der Lösung und Nachverfolgung der identifizierten Probleme.
In diesen Bereichen haben wir uns vorgenommen, diese Probleme 2021 zu beheben.
CSS-Flexbox
CSS-Flexbox
ist
weit verbreitet
und es stehen noch immer große Herausforderungen für Entwickler vor. Beispiel:
sowohl Chromium als auch
WebKit
hatten Probleme mit auto-height Flex-Containern, die zu Bildern mit falscher Größe führten.
<ph type="x-smartling-placeholder">
Foto von Alireza Mahmoudi.
Flexbox-Katzen von Igalia In diesem Blogpost werden diese Themen anhand von vielen weiteren Beispielen ausführlicher erläutert.
Warum sie priorisiert wird
- Umfragen: Top-Problem in MDN-Browser-Kompatibilitätsbericht Am bekanntesten und am häufigsten verwendeten US-Bundesstaat Preisvergleichsportal
- Tests: 85% bestanden in allen Browsern
- Verwendung: 75% der Seitenaufrufe, die bei HTTP Archivieren
CSS-Raster
CSS-Raster ist ein zentraler Baustein für moderne Web-Layouts, der viele ältere Techniken ersetzt und Behelfslösungen. Da die Akzeptanz zunimmt, muss sie absolut zuverlässig sein, Unterschiede zwischen Browsern sind nie ein Grund, dies zu vermeiden. Ein Bereich, der ist die Möglichkeit, Rasterlayouts zu animieren. Dies wird in Gecko unterstützt, Chromium oder WebKit: Sofern unterstützt, werden folgende Effekte ermöglicht:
<ph type="x-smartling-placeholder">Warum sie priorisiert wird
- Umfragen: 2. Platz in MDN-Browser-Kompatibilitätsbericht bekannt, aber seltener verwendet in State of Preisvergleichsportal
- Tests: 75% bestanden in allen Browsern
- Verwendung: 8 %, Tendenz steigend, leichter Anstieg bei HTTP Archivieren
CSS-Position: fixiert
Fixierte Positionierung ermöglicht, dass Inhalte am Rand des Darstellungsbereichs fixiert sind, und wird häufig verwendet für Header, die immer oben im Darstellungsbereich sichtbar sind. Wird zwar unterstützt in allen Browsern funktioniert es häufig nicht wie vorgesehen. Beispiel: fixierte Tabellenüberschriften werden in Chromium nicht unterstützt. unter einer Flagge, sind die Ergebnisse browserübergreifend unterschiedlich:
<ph type="x-smartling-placeholder">
.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Sehen Sie sich die fixierten Tabellenüberschriften Demo von Rob Flack.
Warum sie priorisiert wird
- Umfragen: Sehr bekannt/verwendet in Bundesstaat/-land CSS an und wurde auf die Frage hingewiesen, mehrmals in MDN-Browserkompatibilitätsbericht
- Tests: 66% bestanden in allen Browsern
- Verwendung: 8%
CSS-Eigenschaft des Seitenverhältnisses
Das neue
aspect-ratio
Die CSS-Eigenschaft macht es einfach, ein einheitliches Breite-zu-Höhe-Verhältnis für
Elemente, die bekannte Elemente
padding-top-Hack:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Da dies ein so weit verbreiteter Anwendungsfall ist, wird er sich durchsetzen. möchten wir dafür sorgen, dass sie in allen gängigen Szenarien und browserübergreifend auch funktioniert.
Warum sie priorisiert wird
- Umfragen: Bereits bekannt, aber noch nicht weit verbreitet in Preisvergleichsportal
- Tests: 27% bestanden in allen Browsern
- Verwendung: 3% und wird voraussichtlich wachsen
CSS-Transformationen
CSS-Transformationen werden seit Jahren von allen Browsern unterstützt und sind weit verbreitet in den Web. Es gibt jedoch immer noch viele Bereiche, in denen sie nicht gleich funktionieren. und zwar mit Animationen und 3D-Transformationen. Beispiel: Eine Karte Der Flip-Effekt kann in verschiedenen Browsern sehr unterschiedlich sein:
<ph type="x-smartling-placeholder">Warum sie priorisiert wird
- Umfragen: Sehr bekannt und in US-Staaten verwendet Preisvergleichsportal
- Tests: insgesamt 55% bestanden Browser
- Verwendung: 80%
So kannst du beitragen und mitmachen
Folgen und teilen Sie alle Updates, die wir auf @ChromiumDev oder die öffentliche Mailingliste, Compat 2021. Stellen Sie sicher, dass Fehler vorhanden sind. melden Sie sie für Probleme, die Sie festgestellt haben, Falls etwas fehlt, wenden Sie sich bitte Kanäle.
Auf web.dev werden regelmäßig Updates zum Fortschritt veröffentlicht. Verfolgen Sie auch den Fortschritt für jeden Schwerpunktbereich im Compat 2021 Dashboard:
<ph type="x-smartling-placeholder">
Wir hoffen, dass diese Bemühungen zwischen den Browser-Anbietern zur Verbesserung der Zuverlässigkeit und Interoperabilität wird Ihnen helfen, erstaunliche Inhalte im Web zu entwickeln!