Die Lücke füllen

So wird die Entwicklung für das Web einfacher.

Rachel Andrew

Wenn wir mit Entwicklern sprechen, sei es einzeln oder über Umfragen wie State of CSS, hören wir immer wieder dasselbe. Entwickler haben Schwierigkeiten, Websites und Anwendungen zu erstellen, die in allen Browsern gut funktionieren, und wissen nicht, wann es sicher ist, neue Funktionen zu verwenden.

Flexbox-Abstand

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

Kurz nachdem das Rasterlayout in Browsern eingeführt wurde, wurde die Eigenschaft in gap umbenannt, ebenso wie row-gap und column-gap. Es wurde dann so angepasst, dass es auch im Flex-Layout funktioniert. Durch die Umbenennung wird verhindert, dass mehrere Properties dasselbe tun.

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

Firefox hat das Attribut für Flex-Layouts im Oktober 2018 eingeführt. In Chrome wurde es erst im Juli 2020 eingeführt, in Safari im April 2021. Das bedeutete, dass wir gap erst nach zwei Jahren und sechs Monaten sicher verwenden konnten. In der Realität war die Wartezeit für die meisten Entwickler jedoch viel länger, da sie Browserversionen unterstützen mussten, die älter als die neueste waren. Die Unterstützung von gap im Flex-Layout wurde dadurch erschwert, dass wir keine Funktionsabfragen verwenden können, um die Unterstützung von „gap“ im Flex-Layout zu erkennen. Da das Attribut gap im Raster unterstützt wird, gibt @supports (gap:1em) „true“ zurück.

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

Warum gibt es Lücken beim Support?

In diesem Beitrag geht es nicht darum, einen bestimmten Browser als langsam zu bezeichnen. Wenn Sie sich die verschiedenen Plattformfunktionen ansehen, werden Sie feststellen, dass verschiedene Browser bei unterschiedlichen Funktionen die Führung übernehmen.

Die meisten Funktionen werden in einem Browser prototypisiert. Die Spezifikation für das Rasterlayout wurde beispielsweise zuerst von Microsoft erstellt und in einer ersten Form in Internet Explorer 10 implementiert. Ein Entwickler bei Mozilla hat viel Arbeit investiert, um herauszufinden, wie sich Subgrid verhalten sollte. Daher wurde diese Funktion zuerst in Firefox eingeführt. Safari ist Vorreiter bei einigen spannenden neuen Farbfunktionen.

Während ein Browser möglicherweise die Führung bei der Prototyperstellung übernimmt, diskutieren Vertreter aller Browser (und anderer Organisationen) in der CSS Working Group 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 einer mangelnden Akzeptanz der Funktion führen.

Bei der Implementierung einer Funktion muss sie jedoch im Vergleich zu allen anderen möglichen Funktionen für diesen Browser priorisiert werden. Manchmal werden Dinge auch durch andere Arbeiten aufgehalten, die erforderlich sind, um den Browser zu verbessern. Ein gutes Beispiel dafür ist die Arbeit an RenderingNG in Chromium. Das hat den Weg für die Implementierung von Subgrid geebnet. Die lange Lücke zwischen der Einführung von Subgrid in Firefox und Chromium ist jedoch darauf zurückzuführen, dass das Grid-Layout zuerst in der neuen Rendering-Engine neu implementiert werden musste.

Die Probleme

Hier haben wir zwei Probleme. Das erste ist das Interoperabilitätsproblem, d. h. es kann lange dauern, bis eine Funktion, die in einem Browser eingeführt wurde, überall verfügbar ist.

Das zweite ist ein Problem mit der Kommunikation. Wie können wir deutlich machen, wo es Lücken im Support gibt? Wie können wir neue Funktionen vorstellen, ohne dass jeder sorgfältig recherchieren muss, wie gut sie unterstützt werden?

Interoperabilität

Die Browser arbeiten bereits zusammen, um das Interoperabilitätsproblem zu lösen. Letztes Jahr hat Compat 2021 dazu beigetragen, die Unterstützung für eine Reihe von Funktionen zu schließen, darunter die „gap“-Eigenschaft im Flex-Layout. Dieses Jahr konzentriert sich Interop 2022 auf 15 Funktionen, von denen einige bereits umgesetzt wurden.

Den Fortschritt können Sie im Interop 2022-Dashboard verfolgen.

Messaging

Das zweite Problem ist etwas, bei dem ich Ihnen gern helfen möchte, wenn wir hier auf web.dev und auf developer.chrome.com über Funktionen sprechen. Ich möchte, dass der Status von Funktionen beim Lesen unserer Inhalte wirklich klar ist und dass wir praktische Möglichkeiten zur Behebung von Supportproblemen bieten.

Wir haben bereits einige grundlegende Kurse veröffentlicht und weitere werden folgen. In diesen Kursen erfahren Sie, wie Sie mit wichtigen Webplattformtechnologien für das moderne Web entwickeln. Abreise:

Wir arbeiten daran, die Inhalte auf dieser Website auf die Dinge zu konzentrieren, die Sie sicher verwenden können. Wir sind noch nicht ganz so weit, aber in den kommenden Monaten werden Sie eine Verschiebung hin zur Praxisorientierung feststellen.

Wir unterstützen auch die Dokumentation des offenen Webs durch unsere Unterstützung des Projekts Open Web Docs. So können wir erstklassige Dokumentation auf MDN und aktuelle Browserkompatibilitätsdaten bereitstellen. Wir verwenden diese Daten dann hier auf web.dev, um die Unterstützung für Funktionen zu zeigen. Hier sehen Sie die aktuelle Unterstützung von gap im flexiblen Layout.

Browser Support

Wenn Sie mehr über die Vision von Chrome für das Web und die Dinge erfahren möchten, mit denen wir in Ursprungs- und Entwicklertests experimentieren, finden Sie immer mehr Inhalte 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 freuen, wenn Sie sie sich ansehen und Feedback geben.

Das Web ist derzeit wirklich ein spannender Ort. Wir hoffen, dass wir Ihnen so schneller wichtige Funktionen zur Verfügung stellen und gleichzeitig deutlich machen können, welche Lücken es gibt. So soll die Webentwicklung einfacher und weniger frustrierend werden.

Foto von Cristofer Maximilian.