Diese Seite wurde von der Cloud Translation API übersetzt.

Die Lücke füllen

Das Erstellen von Webinhalten wird dadurch einfacher.

Rachel Andrew

Wenn wir mit Entwicklern sprechen, sei es einzeln oder über Umfragen wie die State of CSS, hören wir immer wieder dieselben Dinge. Entwickler finden es schwierig, Websites und Anwendungen zu erstellen, die browserübergreifend gut funktionieren, und finden es schwierig, zu wissen, wann interessante neue Funktionen sicher sind.

Flexbox-Lücke

Als Beispiel für ein problematisches Attribut können Sie mit dem Attribut gap 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 die Eigenschaft für flexible Layouts im Oktober 2018 veröffentlicht. 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 nagelneuen Funktionen gesprochen. Dann stellen Sie fest, dass Sie sie aufgrund mangelnder Unterstützung nicht wirklich nutzen können.

Warum gibt es Supportlücken?

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 sich intensiv mit der Funktionsweise von Subgrid beschäftigt, 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 eine Implementierung in einem einzigen Browser unmöglich wäre. 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 für die Verbesserung des Browsers erforderlich sind. 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: Die Tatsache, dass es sehr lange dauern kann, bis eine Funktion in einem Browser angezeigt wird, bis sie ü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 im Support für eine Reihe von Funktionen zu schließen, einschließlich der Eigenschaft „Lücke“ im flexiblen 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

Das zweite Problem ist etwas, bei dem wir hier auf web.dev und auf developer.chrome.com über Funktionen sprechen. Ich möchte, dass der Status der Funktionen klar erkennbar ist, wenn Sie unsere Inhalte lesen. Außerdem möchten wir Ihnen praktische Tipps für den Umgang mit Supportanfragen geben.

Wir haben bereits eine Reihe von grundlegenden Kursen eingeführt und werden demnächst weitere anbieten. In diesen Kursen lernen Sie, wie Sie mit wichtigen Webplattformtechnologien Inhalte für das moderne Web entwickeln. Abreise:

Wir arbeiten daran, die Inhalte auf dieser Website so zu gestalten, dass sie Nutzer 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.

Über die Unterstützung des Projekts Open Web Docs leisten wir einen Beitrag zur offenen Webdokumentation. So haben 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 sehen Sie die aktuelle Unterstützung von gap im flexiblen Layout.

Unterstützte Browser

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 sich die Inhalte ansehen und uns Feedback geben.

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

Foto von Cristofer Maximilian.