Mitte des Jahres Update zur Compat 2021 – ein Bemühen, Browserkompatibilitätsprobleme in fünf Schwerpunkten zu beseitigen: CSS-Flexbox, CSS-Raster, Position: Sticky, Seitenverhältnis und CSS-Transformationen.
Es ist Zeit für das Halbjahres-Update zu Compat 2021 – ein Bestreben, Probleme mit der Browserkompatibilität in fünf Schwerpunkten zu beseitigen. Weitere Informationen zur Arbeit mit #compat2021 und dazu, wie wir die Schwerpunkte festgelegt haben, finden Sie in der Mitteilung im März.
Die in diesem Beitrag beschriebenen Verbesserungen an Chromium gelten für Chrome, Edge und alle Chromium-basierten Browser.
So messen wir den Fortschritt
Im Compat 2021-Dashboard finden Sie Webplattform-Tests, um die Anzahl der bestandenen Tests und die Trendgrafiken für verschiedene Browser zu sehen.
Eine einfache Zahl bestandener Tests sagt nichts über die Browserkompatibilität insgesamt aus, ist aber eines der Signale, die wir verwenden, um den Fortschritt unserer Bemühungen zu sehen. Weniger Unterschiede zwischen Browsern in den Testergebnissen bedeuten eine größere Interoperabilität einer Webfunktion über mehrere Browser hinweg.
CSS-Flexbox
Alle drei Browser-Engines verzeichneten Verbesserungen bei der Flexbox.
Safari 14.1 hat die Property gap für die Flexbox gesendet. Die Eigenschaft gap ist eine bequeme Möglichkeit, den Abstand zwischen Elementen festzulegen. Diese Eigenschaft wird häufig beim Rasterlayout verwendet. Die Unterstützung im Flexbox-Layout war eine der am häufigsten angefragten Funktionen im Bericht zur MDN-Browserkompatibilität. Mit diesem Update ist die gap-Eigenschaft in flexiblen Layouts in allen gängigen Browsern verfügbar. Dadurch wurde ein Großteil der Kompatibilitätsprobleme gelöst. Safari 14.1 enthielt außerdem viele Fehlerkorrekturen für Bilder in der Flexbox, sodass keine alten Behelfslösungen notwendig waren.
Firefox hat das Rendern von Tabellen als flexible Elemente behoben, wodurch Firefox die Tests zu 100% bestanden hat (derzeit 98,5%).
Chromium hat auch Tabellen als flexible Elemente behoben.
In Chromium 88 wurden außerdem Bilder als flexible Elemente umgeschrieben, wodurch eine Reihe seit Langem bestehende Fehler behoben wurden. Außerdem hat Chromium vor Kurzem Unterstützung für neue Ausrichtungs-Keywords hinzugefügt: start, end, self-start, self-end, left und right. Diese Schlüsselwörter können in Chrome Canary und Edge Canary getestet werden.
CSS-Raster
Die Nutzung des CSS Grids wächst stetig und liegt derzeit bei 9% der Seitenaufrufe. Alle drei großen Browser-Engines implementieren das CSS Grid und haben bereits mehr als 89% der ähnlichen Webplattformtests bestanden. Es ist wichtig, die Kompatibilitätslücke zu schließen, um das stetige Wachstum dieser Funktion zu unterstützen.
Im Jahr 2021 hat Safari die Tests von 89% auf 93% bestanden. Chromium arbeitet an einer neuen Architektur, um mehr CSS Grid-Probleme zu beheben: GridNG. Dies wurde vom Microsoft-Team durchgeführt und führte zu einem kürzlich erfolgten Anstieg von 94% auf 97% in den angegriffenen Grid-Tests. Weitere Informationen zu GitNG finden Sie im Edge-Blog.
Preisvergleichsportal position: sticky
In Chromium wurde position: sticky für Tabellenüberschriften mit der Einführung von TablesNG behoben, einer mehrjährigen Bemühung, das Rendering von Tabellen umzugestalten.
Durch diese Änderung und einige letzte
Fehlerbehebungen konnten Chrome und Edge 93 alle angezielten Tests bestanden haben.
Nach position: sticky hat TablesNG 72 Chromium-Fehler behoben.
CSS-Property „aspect-ratio“
Die Eigenschaft aspect-ratio, die das Festlegen des Breite-zu-Höhe-Verhältnisses vereinfacht, ist beim responsiven Webdesign sehr wichtig. Dies ist auch eine Lösung, um kumulative Layoutverschiebungen zu vermeiden.
Das Attribut aspect-ratio wird jetzt in stabilen Versionen von Chrome, Edge und Firefox sowie in Safari 15 Beta unterstützt. Mit zunehmender Browserunterstützung nimmt die Nutzung zu.
Obwohl kein Browser die Tests zu 100% bestanden hat, ist die Kompatibilitätslücke für aspect-ratio der kleinste von allen fünf Schwerpunktbereichen für Compat 2021. Mehr als 90% der Tests wurden für alle gängigen Browser erfolgreich bestanden. In Zukunft werden wir den Fortschritt mit dieser Testsuite weiter beobachten, um sie zu einer soliden Funktion zu machen.
Weitere Informationen zur Nutzung und den Vorteilen der aspect-ratio-Property auf web.dev
CSS-Transformationen
Die Ergebnisse der gezielten Tests für CSS-Transformationen werden langsam und kontinuierlich verbessert, was sowohl auf Fehlerkorrekturen als auch auf Verbesserungen der Tests selbst zurückzuführen ist.
Das Chromium-Team arbeitet auch daran, die Interoperabilität von transform-style:
preserve-3d und transform :perspective() zu verbessern. Wir hoffen, dass wir beim nächsten Update
weitere Fortschritte veröffentlichen können.
Verbesserungen des Gesamtwerts
Seit der Bekanntgabe im März haben alle drei Browser-Engines ihre Compat 2021-Werte verbessert:
- Chrome und Edge Dev sind von 86 auf 92 % gestiegen.
- Firefox stieg von 83 auf 86.
- Safari stieg von 64 auf 82.
Safari hat es vor allem durch die Arbeit von WebKit-Mitwirkenden geschafft, die Kompatibilitätslücke um 18 Punkte zu schließen. Besonders das Igalia-Team hat an der aspect-ratio-Eigenschaft und an vielen Verbesserungen an Flexbox und Raster mitgewirkt, wie etwa gap für die Flexbox und verschiedene Fehlerkorrekturen.
Den Fortschritt von Compat 2021 verfolgen
Wenn Sie den Fortschritt von Compat 2021 verfolgen möchten, können Sie das Dashboard im Blick behalten, unsere Mailingliste abonnieren oder sich an @chromiumdev wenden. Sollten Probleme auftreten, melden Sie den Fehler für den betroffenen Browser.