Compat 2021: Beseitigung der fünf wichtigsten Kompatibilitätsprobleme im Web

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 bei der Browserkompatibilität für Webentwickler zu beheben. Im Mittelpunkt stehen CSS Flexbox, CSS Grid, position: sticky, aspect-ratio und CSS-Transformationen. Hier erfährst du, wie du dich beteiligen und die Entwicklung verfolgen kannst.

Hintergrund

Die Kompatibilität im Web war schon immer eine große Herausforderung für Entwickler. In den letzten Jahren haben Google und andere Partner, darunter Mozilla und Microsoft, versucht, mehr über die größten Herausforderungen von Webentwicklern zu erfahren, um unsere Arbeit und Priorisierung zu verbessern. Dieses Projekt ist mit der Arbeit von Google zur Zufriedenheit von Entwicklern (DevSAT) verbunden. Es begann in größerem Umfang mit der Erstellung der MDN DNA-Umfragen (Developer Needs Assessment) in den Jahren 2019 und 2020 und einer umfassenden Forschungsstudie, die im MDN-Browserkompatibilitätsbericht 2020 vorgestellt wurde. Zusätzliche Recherchen wurden in verschiedenen Kanälen durchgeführt, z. B. in den Umfragen State of CSS und State of JS.

Ziel für 2021 ist es, Probleme mit der Browserkompatibilität in fünf wichtigen Schwerpunktbereichen zu beheben, damit Entwickler darauf aufbauen können. Diese Initiative heißt #Compat 2021.

Fokus auswählen

Zwar gibt es bei praktisch allen Webplattformen Probleme mit der Browserkompatibilität, aber der Schwerpunkt dieses Projekts liegt auf einer kleinen Anzahl der problematischsten Bereiche, die deutlich verbessert werden können, sodass sie nicht mehr zu den wichtigsten Problemen für Entwickler gehören.

Beim Kompatibilitätsprojekt werden mehrere Kriterien verwendet, die beeinflussen, welche Bereiche priorisiert werden. Dazu gehören:

Die fünf wichtigsten Schwerpunkte für 2021

2020 hat Chromium damit begonnen, die wichtigsten Bereiche anzugehen, die im Artikel Verbesserung der Browserkompatibilität von Chromium im Jahr 2020 beschrieben wurden. 2021 möchten wir noch einen Schritt weiter gehen. Google und Microsoft arbeiten gemeinsam mit Igalia an der Behebung der wichtigsten Probleme in Chromium. Igalia, ein regelmäßiger Mitwirkender an Chromium und WebKit sowie Betreuer des offiziellen WebKit-Ports für eingebettete Geräte, hat uns bei diesen Bemühungen um Kompatibilität sehr unterstützt und wird uns dabei helfen, die identifizierten Probleme zu beheben und zu verfolgen.

Im Folgenden finden Sie die Bereiche, die 2021 behoben werden sollen.

CSS-Flexbox

CSS Flexbox wird im Web weit verbreitet verwendet. Für Entwickler gibt es jedoch noch einige große Herausforderungen. So gab es beispielsweise bei Chromium und WebKit Probleme mit auto-height-Flex-Containern, die zu Bildern mit falscher Größe führten.

Ein gestrecktes Foto eines Schachbretts.
Aufgrund von Fehlern falsch dimensioniertes Bild.
Schachbrett.
Bild mit der richtigen Größe.
Foto von Alireza Mahmoudi.

Im Blogpost Flexbox Cats von Igalia werden diese Probleme mit vielen weiteren Beispielen genauer erläutert.

Warum die Priorität festgelegt wurde

CSS-Raster

CSS-Raster ist ein wichtiger Baustein für moderne Weblayouts und ersetzt viele ältere Techniken und Umgehungen. Da die Akzeptanz steigt, muss es absolut zuverlässig sein, damit Unterschiede zwischen Browsern nie ein Grund sind, es zu vermeiden. Es fehlt beispielsweise die Möglichkeit, Rasterlayouts zu animieren, was in Gecko, aber nicht in Chromium oder WebKit unterstützt wird. Sofern unterstützt, sind folgende Effekte möglich:

Animierte Schachdemo von Chen Hui Jing.

Warum die Priorität festgelegt wurde

CSS-Position: sticky

Bei der fixen Positionierung bleiben Inhalte am Rand des Darstellungsbereichs haften. Sie wird häufig für Überschriften verwendet, die immer oben im Darstellungsbereich sichtbar sind. Die Funktion wird zwar in allen Browsern unterstützt, es gibt jedoch gängige Anwendungsfälle, in denen sie nicht wie vorgesehen funktioniert. Beispielsweise werden fixierte Tabellenüberschriften in Chromium nicht unterstützt. Sie werden zwar jetzt über ein Flag unterstützt, die Ergebnisse sind jedoch in verschiedenen Browsern nicht einheitlich:

Chromium mit „TablesNG“
Gecko
WebKit

Sehen Sie sich die Demo zu fixierten Tabellenüberschriften von Rob Flack an.

Warum die Priorität festgelegt wurde

CSS-Eigenschaft „aspect-ratio“

Mit der neuen CSS-Property aspect-ratio lässt sich das Seitenverhältnis von Elementen ganz einfach beibehalten. Der bekannte padding-top-Hack ist nicht mehr erforderlich:

padding-top verwenden
.container {
 
width: 100%;
 
padding-top: 56.25%;
}
„aspect-ratio“ verwenden
.container {
 
width: 100%;
 
aspect-ratio: 16 / 9;
}

Da es sich um einen so häufigen Anwendungsfall handelt, wird es voraussichtlich weithin verwendet. Wir möchten daher dafür sorgen, dass es in allen gängigen Szenarien und in allen Browsern zuverlässig funktioniert.

Warum die Priorität festgelegt wurde

  • Umfragen: Bereits bekannt, aber noch nicht weit verbreitet im State of CSS
  • Tests: 27% bestehen 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. So kann beispielsweise der Karten-Flip-Effekt in verschiedenen Browsern sehr unterschiedlich aussehen:

Karten-Flip-Effekt in Chromium (links), Gecko (Mitte) und WebKit (rechts). Demo von David Baron aus Fehlerkommentar.

Warum die Priorität festgelegt wurde

So kannst du mitmachen und verfolgen, was passiert

Folgen Sie uns auf @ChromiumDev oder abonnieren Sie die öffentliche Mailingliste Compat 2021, um aktuelle Informationen zu erhalten. Prüfen Sie, ob Fehler vorhanden sind, oder melden Sie sie, wenn Probleme auftreten. Wenn etwas fehlt, wenden Sie sich über die oben genannten Kanäle an uns.

Es wird regelmäßig Updates zu den Fortschritten auf web.dev geben. Außerdem können Sie den Fortschritt für jeden Schwerpunktbereich im Dashboard zur Kompatibilität 2021 verfolgen.

Compat 2021 Dashboard
Das Compat 2021-Dashboard (Screenshot vom 16. November 2021).

Wir hoffen, dass diese gemeinsame Anstrengung der Browseranbieter zur Verbesserung der Zuverlässigkeit und Interoperabilität Ihnen dabei hilft, im Web tolle Dinge zu entwickeln.