Baseline: Eine neue Denkweise für Browser-Unterstützung

Seit Jahren ringen Frontend-Entwickler mit einer veralteten Frage: „Welche Browser-Versionen unterstützen wir?” Diese Fragestellung machte Sinn, als Internet Explorer dominierte und Browser jährlich aktualisiert wurden. Heute veröffentlichen Chrome und Firefox alle paar Wochen neue Versionen. Safari wird regelmäßig aktualisiert. Das alte Denkmodell passt nicht mehr.

Web Platform Baseline bietet einen besseren Ansatz. Anstatt Browser-Versionen zu verfolgen, verfolgen Sie die Verfügbarkeit von Features. Dieser Artikel erklärt, wie Baseline funktioniert, warum es für moderne Browser-Kompatibilität wichtig ist und wie Sie es in Ihren Projekten anwenden können.

Was ist Web Platform Baseline?

Baseline ist eine browserübergreifende Initiative, die von Google, Microsoft, Apple und Mozilla über die W3C WebDX Community Group unterstützt wird. Baseline-Indikatoren finden Sie auf MDN, web.dev und Can I Use.

Baseline beantwortet eine einfache Frage: Kann ich dieses Feature sicher browserübergreifend verwenden?

Es definiert eine Gruppe von Kern-Browsern:

• Chrome (Desktop und Android)
• Edge
• Firefox (Desktop und Android)
• Safari (macOS und iOS)

Wenn ein Feature in allen diesen Browsern funktioniert, erhält es den Baseline-Status.

Die drei Verfügbarkeitszustände

Baseline-Features fallen in drei Kategorien:

Eingeschränkte Verfügbarkeit (Limited availability): Das Feature existiert in einigen Browsern, aber nicht in allen. Mit Vorsicht oder mit Polyfills verwenden.

Neu verfügbar (Newly available): Das Feature funktioniert in allen stabilen Versionen aller Kern-Browser. Es ist interoperabel, aber neu.

Weitgehend verfügbar (Widely available): Das Feature ist seit mindestens 30 Monaten in allen Kern-Browsern verfügbar. Die meisten Nutzer haben Zugriff darauf.

Der 30-Monats-Schwellenwert für „Weitgehend verfügbar” ist nicht willkürlich. Er berücksichtigt Nutzer, die nicht sofort aktualisieren, ältere Geräte und nachgelagerte Browser, die von großen Engines erben. Nach 30 Monaten hat ein Feature typischerweise nahezu jeden erreicht.

Warum dieser Paradigmenwechsel wichtig ist

Traditionelle versionsbasierte Richtlinien schaffen Probleme. Was bedeutet „die letzten zwei Versionen von Firefox”, wenn Firefox sechs Major-Versionen während eines einzelnen Projekts ausliefert? Das Ziel bewegt sich ständig.

Das Denken in Feature-Verfügbarkeit löst dies. Anstatt zu fragen „Welche Browser-Versionen unterstützen wir?” fragen Sie „Ist dieses Feature Baseline?”

Dieser Wechsel bietet drei praktische Vorteile:

Klarere Entscheidungen. Prüfen Sie den Baseline-Indikator auf MDN. Wenn er „Weitgehend verfügbar” anzeigt, verwenden Sie das Feature mit Zuversicht. Keine Kopfrechnung über Versionsnummern.

Bessere Stakeholder-Kommunikation. „Wir verwenden Features, die seit über 30 Monaten in allen Browsern verfügbar sind” ist einfacher zu erklären als „die letzten zwei Versionen von Chrome, Firefox und Safari, plus Firefox ESR, plus alles über 0,5 % globaler Nutzung.”

Verbesserte Konsistenz. Teams treffen weniger Einzelfallentscheidungen. Die Richtlinie gilt einheitlich über Projekte hinweg.

Wie Sie Baseline in der Praxis anwenden

Die Einführung von Baseline folgt einem einfachen Muster:

Für Kernfunktionalität verlassen Sie sich auf weitgehend verfügbare Features. Diese bilden Ihr Fundament. Nutzer ohne moderne Browser erhalten weiterhin eine funktionierende Erfahrung.

Für progressive Verbesserungen verwenden Sie neu verfügbare Features mit Feature Detection. Betten Sie sie in @supports-Blöcke oder JavaScript-Prüfungen ein. Nutzer mit älteren Browsern erhalten die Basis-Erfahrung, während andere die verbesserte Version bekommen.

/* Widely available fallback */
.container {
  max-width: 100%;
}

/* Newly available enhancement */
@supports (container-type: inline-size) {
  .container {
    container-type: inline-size;
  }
}

Das obige CSS ist ein klares Beispiel für Progressive Enhancement. Jeder Browser versteht max-width: 100%. Browser, die auch Container Queries unterstützen, erhalten das leistungsfähigere Layout. Für niemanden bricht etwas.

Integration von Baseline in Ihre Tools

Baseline wird zunehmend in Entwickler-Tools unterstützt. Browserslist unterstützt jetzt Baseline-Abfragen direkt (z. B. Targeting von „widely available”-Features oder einem bestimmten Baseline-Jahr), was hilft, Ihre Build-Tools mit Ihrer Support-Richtlinie abzustimmen. Das browserslist-config-baseline-Paket bietet eine fertige Konfiguration, wenn Sie keine eigenen Abfragen schreiben möchten.

Die CSS-Unterstützung von ESLint (@eslint/css) enthält eine use-baseline-Regel, die Properties kennzeichnen kann, die außerhalb Ihres gewählten Baseline-Schwellenwerts liegen. Obwohl nicht perfekt – sie kann bei Progressive-Enhancement-Mustern übermäßig streng sein – signalisiert sie, wohin sich das Ökosystem entwickelt.

Erwarten Sie eine engere Integration mit Build-Tools, Lintern und Frameworks, während die Baseline-Adoption wächst.

Baseline ist ein Standard, keine Garantie

Baseline bietet einen soliden Ausgangspunkt, ersetzt aber nicht das eigene Urteilsvermögen. Es gibt Sonderfälle. Ein Feature könnte Baseline sein, aber einen signifikanten Bug in einem Browser aufweisen. Barrierefreiheits-Aspekte können Tests über Kompatibilitätsdaten hinaus erfordern. Unternehmensumgebungen mit gesperrten Browsern benötigen separate Überlegungen.

Verwenden Sie Baseline als Ihre Standard-Annahme und verifizieren Sie dann, wenn die Einsätze hoch sind.

Fazit

Web Platform Baseline stellt einen fundamentalen Wandel dar: von versionsbasierten Support-Matrizen hin zum Denken in Feature-Verfügbarkeit. Es reduziert kognitiven Aufwand, verbessert die Team-Kommunikation und passt sich an, wie moderne Browser tatsächlich funktionieren.

Beginnen Sie damit, den Baseline-Status auf MDN zu prüfen, bevor Sie nach neuen Features greifen. Übernehmen Sie „Weitgehend verfügbar” als Ihr Fundament. Schichten Sie „Neu verfügbar”-Features durch Progressive Enhancement ein. Lassen Sie das Tooling aufholen, um Ihren Workflow zu unterstützen.

Die Frage ist nicht, welche Browser Sie unterstützen. Es geht darum, welche Features Sie benötigen.

FAQs

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.