Die Lücke füllen

Das Erstellen von Webinhalten wird dadurch einfacher.

Wenn wir mit Entwicklern sprechen, sei es einzeln oder über Umfragen wie die State of CSS, hören wir immer wieder dieselben Dinge. Es ist schwierig, Websites und Anwendungen zu entwickeln, die in allen Browsern gut funktionieren. Außerdem ist es schwer zu erkennen, wann neue Funktionen sicher verwendet werden können.

Flexbox-Lücke

Ein Beispiel für eine problematische Property ist das Attribut gap. Damit können Sie Lücken zwischen Grid- oder Flex-Elementen oder Spalten in einem Multicol-Container erstellen. column-gap gibt es schon lange im Multicol-Layout, aber im Rasterlayout wurde die Property zuerst als grid-gap eingeführt, zusammen mit grid-column-gap und grid-row-gap.

Kurz nach der Einführung des Rasterlayouts in Browsern wurde die Property zusammen mit row-gap und column-gap in gap umbenannt. Es wurde dann festgelegt, dass es auch im Flex-Layout funktioniert. Durch die Umbenennung gibt es keine mehreren Properties, die dasselbe tun.

.box {
  display: flex;
  gap: 1em;
}

Firefox hat das Attribut für Flex-Layouts im Oktober 2018 eingeführt. Erst im Juli 2020 wurde es in Chrome und im April 2021 in Safari eingeführt. Das bedeutete, dass wir zwei Jahre und sechs Monate warten mussten, bevor wir gap sicher verwenden konnten. In Wirklichkeit war die Wartezeit für die meisten Entwickler viel länger, da sie Browserversionen unterstützen mussten, die älter als die neueste Version waren. Die Unterstützung von gap im Flex-Layout ist problematisch, da wir keine Feature-Abfragen verwenden können, um die Unterstützung von Lücken im Flex-Layout zu erkennen. Da die gap-Property in Rastern unterstützt wird, gibt @supports (gap:1em) „wahr“ zurück.

Ein weiteres Problem ist, dass Nutzer, wenn eine neue Funktion in einem Browser eingeführt wird, darüber sprechen und Demos teilen. Das beginnt oft lange, bevor die Funktion in einem stabilen Browser verfügbar ist. Das kann für Entwickler verwirrend oder zumindest frustrierend sein. Immer wieder wird überall von neuen Funktionen gesprochen, die Sie dann aber aufgrund fehlender Unterstützung nicht nutzen können.

Warum gibt es Lücken bei der Unterstützung?

In diesem Beitrag geht es nicht darum, einen bestimmten Browser als langsam zu bezeichnen. Wenn Sie sich die verschiedenen Plattformfunktionen ansehen, stellen Sie fest, dass verschiedene Browser bei verschiedenen Funktionen führend sind.

Die meisten Funktionen werden in einem Browser als Prototyp erstellt. Die Spezifikation für das Rasterlayout wurde beispielsweise von Microsoft erstellt und in einer ersten Form in Internet Explorer 10 implementiert. Ein Entwickler bei Mozilla hat viel Arbeit in die Entwicklung des Subgrids gesteckt, weshalb diese Funktion zuerst in Firefox eingeführt wurde. Safari nimmt eine Vorreiterrolle bei einigen spannenden neuen Farbfunktionen ein.

Ein Browser kann die Führung beim Prototyping übernehmen, aber Vertreter aller Browser (und anderer Organisationen) in der CSS-Arbeitsgruppe besprechen CSS-Funktionen. Es ist sehr wichtig, dass eine Funktion in allen Browsern implementiert werden kann und nicht so konzipiert ist, dass sie in einem Browser nicht implementiert werden kann. Das würde zu einer dauerhaften Lücke im Support und zu einer geringen Akzeptanz der Funktion führen.

Bei der Implementierung einer Funktion muss sie jedoch neben allen anderen möglichen Funktionen für diesen Browser priorisiert werden. Manchmal verzögern sich Dinge auch, weil andere Arbeiten anstehen, die erledigt werden müssen, um den Browser zu verbessern. Ein gutes Beispiel dafür ist die Arbeit an RenderingNG in Chromium. Dies hat den Weg für die Implementierung von Subgrid geebnet. Die lange Zeitspanne zwischen der Einführung von Subgrid in Firefox und Chromium ist jedoch darauf zurückzuführen, dass das Rasterlayout zuerst in der neuen Rendering-Engine neu implementiert werden musste.

Die Probleme

Es gibt hier zwei Probleme. Das erste ist das Interoperabilitätsproblem, also die Tatsache, dass es lange dauern kann, bis eine Funktion in einem Browser eingeführt wird und dann überall verfügbar ist.

Das zweite Problem ist ein Problem mit der Kommunikation. Wie können wir klarstellen, wo es Lücken im Support gibt? Wie können wir neue Funktionen vorstellen, ohne dass alle Nutzer jede Funktion sorgfältig recherchieren müssen, um herauszufinden, wie gut sie unterstützt wird?

Interoperabilität

Die Browserhersteller arbeiten bereits zusammen, um das Interoperabilitätsproblem zu lösen. Letztes Jahr hat Compat 2021 dazu beigetragen, die Lücke bei der Unterstützung einer Reihe von Funktionen zu schließen, einschließlich der „gap“-Eigenschaft im Flex-Layout. Dieses Jahr liegt der Schwerpunkt von Interop 2022 auf 15 Funktionen. Bei einigen davon gibt es bereits Fortschritte.

Den Fortschritt kannst du im Dashboard für Interop 2022 verfolgen.

Messaging

Beim zweiten Problem kann ich Ihnen gerne helfen, wenn wir über Funktionen hier auf web.dev und auf developer.chrome.com sprechen. Ich möchte, dass der Status der Funktionen klar ersichtlich ist, wenn Sie unsere Inhalte lesen, und dass wir praktische Möglichkeiten zur Lösung von Supportproblemen anbieten.

Wir haben bereits eine Reihe von grundlegenden Kursen eingeführt und werden demnächst weitere anbieten. In diesen Kursen erfahren Sie, wie Sie mithilfe der wichtigsten Technologien der Webplattform für das moderne Web entwickeln. Abreise:

Wir arbeiten daran, die Inhalte auf dieser Website auf Dinge zu konzentrieren, die Sie sicher verwenden können. Wir sind noch nicht ganz am Ziel, aber in den kommenden Monaten sollte es einen kleinen Schritt in Richtung Praxis geben.

Außerdem unterstützen wir das Projekt Open Web Docs und tragen so zur Open Web-Dokumentation bei. So erhalten wir erstklassige Dokumentationen auf der MDN sowie aktuelle Browserkompatibilitätsdaten. Wir verwenden diese Daten dann hier auf web.dev, um die Unterstützung für Funktionen anzuzeigen. Hier ist die aktuelle Unterstützung von gap im Flex-Layout.

Unterstützte Browser

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

Wenn Sie mehr über die Vision von Chrome für das Web und die Dinge erfahren möchten, die wir in Ursprungs- und Entwicklertests ausprobieren, finden Sie diese Inhalte zunehmend auf unserer Schwesterwebsite developer.chrome.com. Die Inhalte dort sind möglicherweise experimentell oder werden derzeit nur in Chrome unterstützt. Wir würden uns aber freuen, wenn Sie sie ausprobieren und uns Feedback geben.

Es ist eine spannende Zeit für das Web. Wir hoffen, dass wir Ihnen wichtige Funktionen schneller zur Verfügung stellen können und dass wir die bestehenden Lücken offenlegen können, damit die Webentwicklung noch mehr Spaß macht und weniger frustrierend ist.

Foto von Cristofer Maximilian