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, 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 kannst du beitragen und mitmachen 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:

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 Verfolgung 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">
</ph> Gestrecktes Foto eines Schachbretts. <ph type="x-smartling-placeholder">
</ph> Bild in falscher Größe aufgrund von Fehlern.
<ph type="x-smartling-placeholder">
</ph> Schachbrett. <ph type="x-smartling-placeholder">
</ph> Das Bild hat die richtige Größe.
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

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">
</ph> <ph type="x-smartling-placeholder">
</ph> Animiertes Schach-Demo von Chen Hui Jing

Warum sie priorisiert wird

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> <ph type="x-smartling-placeholder">
</ph> Chromium mit "TablesNG"
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Gecko
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> WebKit

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

Warum sie priorisiert wird

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:

„Padding-top“ verwenden
.container {
  width: 100%;
  padding-top: 56.25%;
}
Seitenverhältnis verwenden
.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

CSS-Transformationen

CSS-Transformationen werden seit Jahren von allen Browsern unterstützt und sind auf den Web. Es gibt jedoch immer noch viele Bereiche, in denen sie nicht gleich funktionieren. und insbesondere mit Animationen und 3D-Transformationen. Beispiel: Eine Karte Der Flip-Effekt kann in verschiedenen Browsern sehr unterschiedlich sein:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Umblättern-Effekt in Chromium (links), Gecko (Mitte) und WebKit (rechts). Demo von David Baron von bug Kommentar.

Warum sie priorisiert wird

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">
</ph> <ph type="x-smartling-placeholder"></ph> Compat 2021-Dashboard
Das Compat 2021-Dashboard (Screenshot vom 16. November 2021).

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!