Die Lücke füllen

Einfachere Entwicklung für das Web

Rachel Andrew

Wenn wir mit Entwicklern sprechen, sei es, dass wir einzeln oder über Umfragen wie State of CSS immer wieder dasselbe hören. Für Entwickler fällt es schwer, Websites und Anwendungen so zu gestalten, dass sie mit verschiedenen Browsern funktionieren, und es fällt schwer, zu wissen, wann neue Funktionen sicher verwendet werden können.

Flexbox-Lücke

Ein Beispiel für eine problematische Eigenschaft: Mit der gap-Eigenschaft können Sie Lücken zwischen Rasterelementen oder flexiblen Elementen oder Spalten in einem mehrfachen Container machen. Wir verwenden column-gap schon lange in der Multicol-Spalte, aber die Eigenschaft erschien im Rasterlayout zuerst als grid-gap, zusammen mit grid-column-gap und grid-row-gap.

Kurz nachdem das Rasterlayout in Browsern eingeführt wurde, wurde die Eigenschaft in gap umbenannt, zusammen mit row-gap und column-gap. Dann wurde angegeben, dass sie auch im Flex-Layout arbeitet. Durch die Umbenennung gibt es nicht mehrere Properties, die dasselbe tun.

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

Firefox hat die Eigenschaft für Flex-Layouts im Oktober 2018 ausgeliefert. Sie wurde erst im Juli 2020 in Chrome angezeigt, gefolgt von Safari im April 2021. Das bedeutete, dass wir gap erst nach zwei Jahren und sechs Monaten sicher nutzen konnten. In Wirklichkeit dauerte die Wartezeit bei den meisten Entwicklern deutlich länger, da ältere Browserversionen unterstützt werden mussten. Die Unterstützung von gap im flexiblen Layout ist problematisch, da wir keine Funktionsabfragen verwenden können, um die Unterstützung von Lücken im flexiblen Layout zu erkennen. Da die Eigenschaft gap im Raster unterstützt wird, gibt @supports (gap:1em) den Wert „true“ zurück.

Ein weiteres Problem ist, dass, wenn eine neue Funktion in einem Browser erscheint, die Leute darüber reden und Demos teilen. Dies beginnt häufig lange, bevor die Funktion überhaupt in einem stabilen Browser verfügbar ist. Das kann für Entwickler verwirrend oder zumindest frustrierend sein. Überall wird immer wieder über nagelneue Funktionen gesprochen, und dann stellen Sie fest, dass Sie sie aufgrund mangelnder Unterstützung nicht nutzen können.

Warum gibt es Lücken beim Support?

Dies ist kein Post, der mit dem Finger auf einen Browser zeigt, weil er langsam ist. Wenn Sie sich die verschiedenen Plattformfunktionen ansehen, werden Sie feststellen, dass bei verschiedenen Funktionen unterschiedliche Browser die Führung übernehmen.

Für die meisten Funktionen wird ein Prototyp in einem Browser erstellt. Die Spezifikation für das Rasterlayout wurde beispielsweise zuerst von Microsoft erstellt und in einem ersten Formular in Internet Explorer 10 implementiert. Ein Ingenieur bei Mozilla hat viel Arbeit geleistet, um herauszufinden, wie sich Subgrid verhalten sollte, und so landete diese Funktion zuerst in Firefox. Safari wird nun bei einigen aufregenden neuen Farbfunktionen die Führung übernehmen.

Auch wenn ein Browser beim Prototyping die führende Rolle einnimmt, diskutieren Vertreter aller Browser (und anderer Organisationen) in der Arbeitsgruppe für Preisvergleichsportale über die Funktionen von Preisvergleichsportalen. Es ist sehr wichtig, dass eine Funktion in allen Browsern implementiert werden kann, und dass sie nicht so konzipiert ist, dass die Implementierung in einem Browser unmöglich wird. Das würde zu einer dauerhaften Lücke beim Support und einer mangelnden Akzeptanz der Funktion führen.

Wenn es um die Implementierung einer Funktion geht, muss sie jedoch neben allen anderen Funktionen für diesen Browser priorisiert werden. Hinzu kommt, dass manchmal Dinge hinter anderen Maßnahmen stehen, die erledigt werden müssen, um den Browser zu verbessern. Ein gutes Beispiel dafür ist die Arbeit RenderingNG in Chromium. Dies hat den Weg für die Implementierung des Subgrids geebnet. Die große Lücke zwischen Firefox und Chromium ist jedoch darauf zurückzuführen, dass zuerst das Rasterlayout erneut in der neuen Rendering-Engine implementiert werden muss.

Die Probleme

Hier haben wir zwei Probleme. Das erste ist das Interoperabilitätsproblem, die Tatsache, dass es sehr lange dauern kann, bis eine Funktion in einem Browser verfügbar ist, bis sie überall verfügbar ist.

Das zweite Problem ist die Nachrichtenfunktion. Wie können wir deutlich machen, wo es Lücken im Support gibt? Wie können wir neue Funktionen teilen, ohne dass jeder jedes einzelne Produkt sorgfältig recherchieren muss, um herauszufinden, wie gut sie unterstützt wird?

Interoperabilität

Browser arbeiten bereits gemeinsam an der Lösung des Interoperabilitätsproblems. Letztes Jahr hat Compat 2021 dazu beigetragen, die Lücke bei der Unterstützung einer Reihe von Funktionen zu schließen, darunter das „Gap“-Attribut im Flex-Layout. Dieses Jahr liegt der Schwerpunkt von Interop 2022 auf 15 Funktionen, bei einigen davon gab es bereits Bewegungen.

Sie können den Fortschritt auf dem Interop 2022-Dashboard verfolgen.

Werbebotschaften

Beim zweiten Problem würde ich gerne helfen, wenn wir hier auf web.dev und auf developer.chrome.com über die Funktionen sprechen. Der Status der Funktionen soll klar ersichtlich sein, wenn Sie unsere Inhalte lesen. Außerdem möchten wir Ihnen praktische Möglichkeiten zur Lösung von Supportangelegenheiten bieten.

Wir haben eine Reihe von Grundlagenkursen gestartet. Weitere werden folgen. In diesen Kursen lernen Sie, wie Sie mithilfe der wichtigsten Webplattformtechnologien Inhalte für das moderne Web entwickeln. Abreise:

• CSS lernen
• Formulare lernen
• Design lernen
• Weitere Informationen zu PWA

Wir arbeiten daran, den Fokus unserer Inhalte auf dieser Website auf die Dinge zu legen, die ihr sicher verwenden könnt. Wir sind noch nicht ganz am Ziel, aber in den nächsten Monaten sollte sich in Richtung Praktik etwas ändern.

Durch die Unterstützung des Projekts Open Web Docs leisten wir auch einen Beitrag zu einer offenen Webdokumentation. Dadurch haben wir eine erstklassige MDN-Dokumentation und aktuelle Daten zur Browserkompatibilität. Wir verwenden diese Daten dann hier auf web.dev, um zu zeigen, dass wir Funktionen unterstützen. Hier sehen Sie, wie derzeit gap im flexiblen Layout unterstützt wird.

Wenn Sie mehr über die Vision von Chrome für das Web erfahren möchten und mehr über die Dinge erfahren möchten, mit denen wir im Rahmen der Ursprungs- und Entwicklertests experimentieren, finden Sie diese Inhalte zunehmend auf unserer Schwesterwebsite developer.chrome.com. Die Inhalte dort finden sich möglicherweise noch in der Testphase oder werden momentan nur in Chrome unterstützt. Wir würden uns freuen, wenn Sie sie sich ansehen und uns Feedback dazu geben würden.

Das Web ist echt spannend. Wir hoffen, dass wir Ihnen dabei helfen können, Ihnen die wichtigsten Funktionen schneller zur Verfügung zu stellen, und uns über bestehende Lücken zu informieren, damit die Webentwicklung mehr Spaß macht und weniger frustrierend ist.

Foto von Cristofer Maximilian.