Google arbeitet mit anderen Browseranbietern und Branchenpartnern zusammen, um die fünf größten Probleme mit 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, um die fünf größten Probleme mit der Browserkompatibilität für Webentwickler zu beheben. Die Schwerpunkte sind CSS-Flexbox, CSS-Raster, position: sticky, aspect-ratio und CSS-Transformationen. Unter So können Sie einen Beitrag leisten und mitmachen, erfahren Sie, wie Sie mitmachen können.
Hintergrund
Kompatibilität im Web war für Entwickler schon immer eine große Herausforderung. In den letzten Jahren haben sich Google und andere Partner, einschließlich Mozilla und Microsoft, daran gemacht, mehr über die größten Herausforderungen für Webentwickler zu erfahren, um unsere Arbeit voranzutreiben und Prioritäten zu setzen, um die Situation zu verbessern. Dieses Projekt ist mit der DevSAT-Studie (Developer Satisfaction) von Google verbunden. Es begann in größerem Umfang mit der Erstellung von MDN-DNA-Umfragen (Developer Needs Assessment) in den Jahren 2019 und 2020 sowie einer ausführlichen Forschungsarbeit, die im MDN Browser Compatibility Report 2020 vorgestellt wurde. Weitere Untersuchungen wurden in verschiedenen Kanälen durchgeführt, z. B. in den Umfragen State of CSS und State of JS.
Ziel des Jahres 2021 ist es, Probleme mit der Browserkompatibilität in fünf Schwerpunkten zu vermeiden, damit Entwickler darauf vertrauen können. Dieser Vorgang wird als #Compat 2021 bezeichnet.
Auswählen, worauf Sie sich konzentrieren möchten
Obwohl es praktisch auf der gesamten Webplattform Probleme mit der Browserkompatibilität gibt, liegt der Schwerpunkt dieses Projekts auf einer kleinen Anzahl der problematischsten Bereiche, die erheblich verbessert werden können, sodass sie nicht mehr als die Hauptprobleme für Entwickler gelten.
Im Kompatibilitätsprojekt werden mehrere Kriterien verwendet, die beeinflussen, welche Bereiche priorisiert werden sollen. Einige sind:
- Featurenutzung. Beispielsweise wird Flexbox bei 75% aller Seitenaufrufe verwendet und die Akzeptanz steigt im HTTP-Archiv stark an.
- Anzahl der Programmfehler (in Chromium, Gecko und WebKit) und bei Chromium, wie viele Sterne diese Programmfehler haben.
Umfrageergebnisse:
- MDN DNA-Umfragen
- Bericht zur MDN-Browserkompatibilität
- CSS-Status – die bekanntesten und verwendeten Funktionen
Testergebnisse von web-platform-tests Beispiel: Flexbox auf wpt.fyi.
Kann ich die meistgesuchten Funktionen verwenden?
Die fünf Schwerpunkte des Jahres 2021
Seit 2020 arbeitet Chromium an den wichtigsten Bereichen, die unter Optimierung der Browserkompatibilität von Chromium im Jahr 2020 beschrieben wurden. 2021 möchten wir sogar noch einen Schritt weiter gehen. Gemeinsam mit Igalia arbeiten Google und Microsoft an der Lösung der wichtigsten Probleme in Chromium. Igalia, die regelmäßig zu Chromium und WebKit beiträgt, und Verwalter des offiziellen WebKit-Ports für eingebettete Geräte, hat diese Kompatibilitätsbemühungen sehr unterstützt und sich bei der Lösung der identifizierten Probleme engagiert.
Diese Bereiche sollen 2021 behoben werden.
CSS-Flexbox
Die CSS-Flexbox wird im Web häufig verwendet und birgt noch einige große Herausforderungen für Entwickler. Beispielsweise hatten sowohl Chromium als auch WebKit Probleme mit auto-height-Flex-Containern, was zu falsch skalierten Bildern führt.
Foto von Alireza Mahmoudi
Im Blogpost Flexbox Cats von Igalia werden diese Probleme mit vielen weiteren Beispielen genauer erklärt.
Warum sie priorisiert wird
- Umfragen: Wichtigstes Problem im MDN-Bericht zur Browserkompatibilität, das am bekanntesten im State of CSS verwendet wird
- Tests: 85% bestanden in allen Browsern
- Nutzung: 75% der Seitenaufrufe, mit starkem Anstieg im HTTP-Archiv
CSS-Raster
Das CSS-Raster ist ein zentraler Baustein für moderne Weblayouts, das viele ältere Verfahren und Problemumgehungen ersetzt. Die Akzeptanz wächst stetig, aber sie muss solide sein. Unterschiede zwischen Browsern sind also kein Grund, dies zu vermeiden. Ein Bereich, der fehlt, ist die Möglichkeit, Rasterlayouts zu animieren, die in Gecko, aber nicht in Chromium oder WebKit unterstützt werden. Wenn dies unterstützt wird, sind Effekte wie diesen möglich:
Warum sie priorisiert wird
- Umfragen: Platz 2 im MDN-Bericht zur Browserkompatibilität, bekannt, aber seltener im State of CSS verwendet
- Tests: 75% bestanden in allen Browsern
- Nutzung: 8% Tendenz steigend, leichtes Wachstum beim HTTP-Archiv
CSS-Position: fixiert
Durch die fixierte Positionierung können Inhalte am Rand des Darstellungsbereichs fixiert werden. Sie wird häufig für Header verwendet, die immer oben im Darstellungsbereich sichtbar sind. Diese Funktion wird zwar in allen Browsern unterstützt, es gibt aber Fälle, in denen sie nicht wie vorgesehen funktioniert. Fixierte Tabellenüberschriften werden in Chromium beispielsweise nicht unterstützt. Obwohl jetzt hinter einem Flag unterstützt werden, sind die Ergebnisse in allen Browsern unterschiedlich:
Sehen Sie sich die Demo zu fixierten Tabellenüberschriften von Rob Flack an.
Warum sie priorisiert wird
- Umfragen: Besonders bekannt/verwendet im State of CSS und wurde mehrfach im MDN-Bericht zur Browserkompatibilität erwähnt
- Tests: 66% bestanden in allen Browsern
- Nutzung: 8%
CSS-Eigenschaft des Seitenverhältnisses
Mit dem neuen CSS-Attribut aspect-ratio ist es einfach, ein konsistentes Breite-zu-Höhe-Verhältnis von Elementen aufrechtzuerhalten, sodass der bekannte padding-top-Hack nicht mehr erforderlich ist:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Da dies ein so häufiger Anwendungsfall ist, wird davon ausgegangen, dass sie weit verbreitet ist. Wir möchten sicherstellen, dass sie in allen gängigen Szenarien und in allen Browsern funktioniert.
Warum sie priorisiert wird
- Umfragen: In Preisvergleichsportal bereits bekannt, aber noch nicht weit verbreitet
- Tests: 27% bestanden in allen Browsern
- Nutzung: 3%, Tendenz steigend
CSS-Transformationen
CSS-Transformationen werden seit vielen Jahren in allen Browsern unterstützt und sind im Web weit verbreitet. Es gibt jedoch immer noch viele Bereiche, in denen sie nicht in allen Browsern gleich funktionieren, insbesondere bei Animationen und 3D-Transformationen. Ein Kartenumblättern-Effekt kann in verschiedenen Browsern beispielsweise sehr unterschiedlich sein:
Warum sie priorisiert wird
- Umfragen: Sehr bekannt und in Preisvergleichsportal verwendet
- Tests: 55% bestanden in allen Browsern
- Nutzung: 80%
So können Sie einen Beitrag leisten und dem Projekt folgen
Folgen Sie den Neuigkeiten, die wir unter @ChromiumDev oder auf der öffentlichen Mailingliste, Compat 2021 posten, und teilen Sie diese mit anderen. Prüfen Sie, ob Fehler vorhanden sind, oder melden Sie sie für Probleme, die aufgetreten sind. Falls etwas fehlt, wenden Sie sich über die oben genannten Kanäle an uns.
Sie werden hier regelmäßig über die Fortschritte auf web.dev informiert. Den Fortschritt für jeden Fokusbereich können Sie auch im Compat 2021 Dashboard verfolgen.
Wir hoffen, dass diese gemeinschaftlichen Bemühungen zwischen den Browseranbietern zur Verbesserung der Zuverlässigkeit und Interoperabilität Sie dabei unterstützen, tolle Dinge im Web zu entwickeln.