Ende des Jahres-Updates zur Compat 2021 – eine Bestrebung, Probleme mit der Browserkompatibilität in fünf Schwerpunkten zu beseitigen: CSS Flexbox, CSS Grid, Position: sticky, scope-ratio und CSS-Transformationen.
Das Ende des Jahres naht und es ist an der Zeit für ein letztes Update zu Compat 2021 – einem Bestreben, Browserkompatibilitätsprobleme in fünf Schwerpunkten zu beseitigen.
>90%
Punktzahl in allen Browsern
Seit unserem letzten Update wurden alle Browser kontinuierlich verbessert. Alle Browser hatten zu Jahresbeginn deutlich niedrigere Prüfungsergebnisse, jetzt aber haben alle Browser über 90 % erreicht. Das bedeutet, dass die Interoperabilität der fünf Fokusbereiche durch die Webplattform deutlich verbessert wurde.
Beiträge zu Browser-Engines werden nicht nur von Browseranbietern, sondern auch von anderen Nutzern in der Web-Community geleistet. Bei diesem Projekt möchten wir uns insbesondere Igalia für ihre Beteiligung und für ihre kontinuierliche Arbeit zur Verbesserung der Punktzahlen danken. Igalia hat zur Verbesserung aller fünf Fokusbereiche von Compat 2021 beigetragen.
Auf dem Dashboard für Testergebnisse in wpt.fyi gibt es jetzt eine Ansicht mit gefilterten Testergebnissen, in der alle Tests aus Compat 2021 aufgeführt sind. Außerdem gibt es Ansichten für Chrome, Firefox und Safari, in der die Ergebnisse mit unserem letzten Update im Juli verglichen werden.
Sehen wir uns nun die Verbesserungen in den einzelnen Bereichen an.
CSS-Flexbox
flex-basis: content ist jetzt für alle Browser verfügbar. Implementierungen erfolgen über Chromium und WebKit. (Der Wert content wurde bereits von Gecko unterstützt.)
In Chromium wurde ein Problem mit der Flexbox-Größe behoben, das der Spezifikation und dem Verhalten von Gecko entspricht. In Gecko wurden mehrere Probleme mit Compat 2021 behoben, darunter ein Problem mit der prozentualen Höhe bei Flex-Elementen. In WebKit wird jetzt auch Unterstützung für weitere Attributwerte für die Ausrichtung (left, right, self-start, self-end, start, end) hinzugefügt. Außerdem wurden viele Verbesserungen für die absolute Positionierung vorgenommen, wodurch auch die Flexbox-Testergebnisse in Compat 2021 verbessert wurden.
CSS-Raster
Die Nutzung des CSS Grids im Web nimmt weiter zu, wie sowohl in Web Almanac 2021 als auch in den Nutzungsmesswerten von Chrome zu sehen ist.
Mit der Einführung von GridNG in Chrome und Edge 93 wurden viele langjährige Probleme mit Grid behoben, sodass beeindruckende 38 Probleme im Fehler-Tracker von Chromium geschlossen wurden. Zusammen mit vielen weiteren kleineren Verbesserungen verbesserte sich der Compat-Wert für „Grid in Chromium“ im Jahr 2021 um 3% auf 97%. Diese Arbeit wurde vom Edge-Team bei Microsoft geleitet.
Ein Fehler bei der absoluten Positionierung, der Grid betrifft, wurde in Gecko behoben. Viele Fehlerbehebungen sind in WebKit eingetroffen, was zu einer Verbesserung von 1% für Firefox und 3% für Safari on the Grid-Tests führte.
Preisvergleichsportal position: sticky
Beim letzten Update haben wir festgestellt, dass position: sticky der erste Bereich war, in dem ein Browser (in diesem Fall Chrome und Edge) die Tests zu 100% bestanden hat. Nach einer Reihe von Fehlerbehebungen in der WebKit-Implementierung erhält Safari ebenfalls 100% bei diesen Tests. Die meisten Verbesserungen
wurden in Safari 15 eingeführt.
CSS-Property „aspect-ratio“
Die browserübergreifende Unterstützung zur Definition des Seitenverhältnisses (Breite-Höhen-Verhältnis) von Elementen wurde weiter verbessert. Die Compat 2021-Werte erreichten 99%, 97% bzw. 95% für Chrome/Edge, Firefox und Safari. Die meisten Verbesserungen beziehen sich nicht auf die aspect-ratio-Eigenschaft selbst, sondern darauf, wie width- und height-Attribute einem aspect-ratio-Standardwert für Elemente zugeordnet werden. Dies wurde für mehrere Elemente in WebKit und <canvas> für Chromium implementiert.
CSS-Transformationen
transform: perspective(none) wird jetzt in Chromium, Gecko und WebKit unterstützt. Dies erleichtert die Animation zwischen
einer Perspektive und ohne Perspektive.
In Chromium werden transform-style: preserve-3d (untergeordnete Elemente können in derselben 3D-Szene verwendet werden) und die Eigenschaft perspective (mit einer perspektivischen Transformation auf untergeordnete Elemente angewendet) jetzt an die Spezifikation ausgerichtet, sodass sie nur für untergeordnete Elemente gelten.
Der starke Anstieg der scores für CSS-Transformationen für alle Browser ist hauptsächlich auf Verbesserungen an der Testsuite zurückzuführen, in denen fehlerhafte Tests korrigiert oder entfernt wurden. So lassen sich die verbleibenden Interoperabilitätsprobleme leichter verstehen und künftige Regressionen vermeiden.
Fazit
Wir sind dankbar für die Arbeit, die alle zum Jahresende mit vielen Verbesserungen bei der Bewertung sowie einer besseren Testinfrastruktur geleistet haben. Die Funktion „aspect-ratio“ wurde von Webentwicklern schon lange gewünscht und wird jetzt in allen Browsern unterstützt. Die Nutzung von Flexbox, Grid und position: sticky nimmt stetig zu und diese Funktionen werden jetzt dank vieler Verbesserungen im Jahr 2021 in allen Browsern besser unterstützt.
Nächste Schritte Wir freuen uns darauf, bei der nächsten Iteration mit anderen Browseranbietern und der breiteren Community zusammenzuarbeiten. Wir haben begonnen, die Schwerpunkte für 2022 zu erforschen und zu diskutieren. Demnächst wird es dazu eine Mitteilung geben.
Wenn Sie Feedback oder Fragen haben, können Sie sich über Twitter unter @ChromiumDev an uns wenden.