Standardmäßig browserübergreifend: So funktionieren Baseline-Fallbacks in Modern Web Guidance

Tara Agyemang

Veröffentlicht: 12. November 2026

Bitten Sie einen KI-Coding-Agenten, einen Tooltip oder ein modales Dialogfeld zu erstellen, und sehen Sie sich den Code, den er schreibt, genau an. Meistens ruft der Agent JavaScript auf, um Funktionen nachzubilden, die im Browser integriert sind. Wenn Sie den KI-Agenten auffordern, stattdessen neuere CSS- oder HTML-Funktionen zu verwenden, werden Funktionserkennung und Fallbacks oft übersprungen. Ohne diese Angabe wird Nutzern mit nicht unterstützten Browsern eine fehlerhafte Seite angezeigt.

Modern Web Guidance berücksichtigt bei jeder Empfehlung die Browserkompatibilität. In jedem Leitfaden werden moderne Webfunktionen mit Baseline-Supportdaten und verifizierten Fallback-Mustern kombiniert. In diesem Beitrag wird erläutert, wie Ihr Agent diese Daten verwendet, um modernen, browserübergreifenden Code zu schreiben.

Warum KI-Agenten für die Programmierung ohne Anleitung die Browserunterstützung falsch einschätzen

Ohne Anleitung prüfen KI-Agenten für die Programmierung selten, welche Browser Ihr Projekt unterstützen muss, bevor sie Code schreiben. Stattdessen neigen sie dazu, in eines von zwei Extremen zu verfallen:

  • Standardmäßige Verwendung von Legacy-Code: Die Trainingsdaten von Modellen sind voller Legacy-Muster und die Bewertungen von Modern Web Guidance zeigen, dass Modelle immer noch viele dieser Muster empfehlen. KI-Agenten schreiben oft komplexes JavaScript oder fügen externe Bibliotheken hinzu, obwohl eine integrierte HTML- oder CSS-Funktion die Aufgabe erledigen könnte.
  • Neue Funktionen ohne Sicherheitsnetz verwenden: Wenn Sie einen KI-Agenten bitten, eine neuere Webfunktion zu verwenden, schreibt er in der Regel Code für unterstützende Browser und hört dann auf. Die Feature-Erkennung wird übersprungen und Fallbacks werden weggelassen, was dazu führt, dass die Seite in Browsern, die das Feature nicht unterstützen, nicht funktioniert.

Daten aus der Modern Web Guidance-Bewertungssuite zeigen, wie häufig diese Lücke ist. Bei Funktionen, die noch nicht in allen gängigen Browsern funktionieren, prüft die Bewertungssuite auf Funktionserkennung, @supports-Regeln, Fallbacks oder bedingte Polyfills. Modelle ohne Anleitung bestehen diese Prüfungen nur in 43 % der Fälle. Wenn Modern Web Guidance aktiviert ist, steigt die Erfolgsquote auf 87 %.

Wie Baseline-Daten jede Empfehlung beeinflussen

Um zu entscheiden, wann eine Webfunktion einen Fallback benötigt, nutzt Modern Web Guidance Baseline. Baseline verfolgt die Unterstützung in den wichtigsten Browsern (Chrome, Edge, Firefox und Safari auf Computern und Mobilgeräten) mit drei Status:

  • Baseline Widely available: Die Funktion funktioniert seit mindestens 30 Monaten in allen wichtigen Browsern.
  • Baseline – Neu verfügbar: Die Funktion ist in allen wichtigen Browsern verfügbar, ab dem Datum, an dem der letzte Browser die Unterstützung hinzugefügt hat.
  • Begrenzte Verfügbarkeit: Die Funktion wird noch nicht in allen gängigen Browsern unterstützt.

Jeder Leitfaden von Modern Web Guidance enthält integrierte Baseline-Status- und Browserversionsdaten aus dem Paket web-features. Wenn Ihr KI-Agent für die Programmierung einen Leitfaden lädt, erhält er neben der Implementierungsanleitung auch den genauen Supportstatus, die Veröffentlichungsdaten und die Browserversionen der Funktion. Beispiel:

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

Standardmäßig folgt Modern Web Guidance zwei Regeln, die auf diesen Daten basieren:

  • Baseline Widely available-Funktionen: Ihr Agent verwendet diese Funktionen direkt, ohne zusätzliche Funktionserkennung oder Fallback-Code. Diese Regel sorgt dafür, dass Ihre Codebasis schlank bleibt, und vermeidet unnötige Problemumgehungen.
  • Neu verfügbare und eingeschränkt verfügbare Baseline-Funktionen: Die Leitfäden für diese Funktionen enthalten eine verifizierte Fallback-Strategie. Ihr Agent verwendet die moderne Funktion, sofern sie unterstützt wird, und bietet einen sauberen Fallback für andere Browser.

Vier Fallback-Muster, die Modern Web Guidance in der Praxis verwendet

Nicht jede Webfunktion benötigt dieselbe Art von Fallback. Modern Web Guidance ordnet jede Funktion einem von vier Fallback-Ansätzen zu, je nachdem, wie sich die Funktion in nicht unterstützten Browsern verhält:

Fallback-Muster Verwendung durch Modern Web Guidance
Progressive Verbesserung ohne Fallback-Code Dekorative oder zusätzliche Funktionen, die von nicht unterstützten Browsern ignoriert werden, ohne dass das Layout oder Verhalten beeinträchtigt wird.
CSS-Feature-Erkennung mit der @supports-Regel Visuelle oder Layoutstile, die von einer neueren CSS-Funktion abhängen und bei teilweiser Anwendung fehlerhaft aussehen können.
Einfaches benutzerdefiniertes JavaScript Interaktive HTML-Attribute oder APIs, die ein kleines Skript ohne Abhängigkeiten benötigen, um das Verhalten in älteren Browsern zu replizieren.
Bedingt geladene Polyfills Größere CSS- oder JavaScript-Funktionen, die ein geprüftes Polyfill erfordern, das nur dann dynamisch geladen wird, wenn die native Unterstützung fehlt.

Progressive Verbesserung ohne Fallback-Code

Einige moderne Funktionen verbessern die Typografie, Animationen oder die Geschwindigkeit des Seitenaufbaus, ohne die Funktionsweise der Seite zu ändern. Wenn ein Browser diese Funktionen nicht erkennt, ignoriert er sie und rendert den Rest der Seite normal.

Mit der CSS-Deklaration text-wrap: balance (Baseline – neu verfügbar) werden beispielsweise die Zeilenlängen in Überschriften ausgeglichen.

.balanced {
  text-wrap: balance;
}

Die Speculation Rules API (begrenzte Verfügbarkeit) ruft anstehende Seiten vorab ab oder rendert sie vorab. Nicht unterstützte Browser ignorieren <script type="speculationrules">-Blöcke und nicht erkannte CSS-Deklarationen.

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Aufgrund dieses Verhaltens kann Ihr Agent diese Funktionen direkt ohne zusätzlichen Fallback-Code hinzufügen.

CSS-Feature-Erkennung mit der @supports-Regel

Andere CSS-Funktionen ändern, wie ein Element auf dem Bildschirm positioniert oder formatiert wird. Wenn Sie einen Teil des Stils bedingungslos anwenden, wird das Element in nicht unterstützten Browsern möglicherweise an der falschen Stelle gerendert.

Mit verankerten Containerabfragen (container-type: anchored, begrenzt verfügbar) für einen positionierten Kurzinfo können Sie beispielsweise den Pfeil des Kurzinfos umdrehen, wenn er sich in der Nähe des Rands des Darstellungsbereichs befindet. In Browsern, die keine verankerten Containerabfragen unterstützen, kann der Pfeil die Umkehrung nicht erkennen und zeigt möglicherweise in die falsche Richtung. Modern Web Guidance weist Ihren Agenten an, die Pfeilstile in eine @supports (container-type: anchored)-Regel einzubinden, damit der Standardpfeil nur in Browsern angezeigt wird, die auch die @container anchored()-Flip-Regel unterstützen.

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

Einfaches benutzerdefiniertes JavaScript

Wenn eine interaktive HTML-Funktion nicht von allen gängigen Browsern unterstützt wird, ist es möglicherweise nicht erforderlich, eine Drittanbieterbibliothek einzubinden. Für eigenständige Interaktionen bietet Modern Web Guidance einen kurzen JavaScript-Fallback ohne Abhängigkeiten hinter einer Funktionsprüfung.

Mit dem Attribut closedby="any" für ein <dialog>-Element (begrenzte Verfügbarkeit) können Nutzer beispielsweise ein modales Dialogfeld schließen, indem sie auf den Hintergrund klicken. Für Browser, die das Attribut closedby nicht unterstützen, enthält der Leitfaden einen kleinen Klick-Listener, der zuerst das Objekt HTMLDialogElement.prototype prüft:

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

Bedingt geladene Polyfills

Bei größeren Plattformfunktionen wie der CSS-Ankerpositionierung (begrenzt verfügbar) oder der Temporal API (begrenzt verfügbar) ist es nicht praktikabel, einen benutzerdefinierten Fallback manuell zu schreiben. Gleichzeitig führt das Bündeln eines Polyfills für jeden Nutzer zu zusätzlichen Downloadkosten für Browser, die die Funktion bereits unterstützen.

In diesen Fällen weist Modern Web Guidance Ihren Agenten an, zuerst die Unterstützung zu prüfen und ein geprüftes Polyfill dynamisch mit dem Ausdruck import() aus Ihrem Bundler oder einem CDN zu laden. Unterstützte Browser laden keinen zusätzlichen Code herunter, während ältere Browser das Polyfill bei Bedarf abrufen.

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

Ziel für die Browserunterstützung Ihres Projekts anpassen

Standardmäßig werden Funktionen, die in der Baseline als „Allgemein verfügbar“ eingestuft sind, von Modern Web Guidance als sicher für die Verwendung ohne Fallbacks behandelt. Es sind Fallbacks für Funktionen erforderlich, die neu in Baseline verfügbar sind oder nur eingeschränkt verfügbar sind.

Für Ihr Projekt gelten möglicherweise andere Browseranforderungen. Sie können beispielsweise ein bestimmtes Baseline-Jahr als Ziel festlegen, für eine Electron-App entwickeln oder Polyfills ausschließen, um Bundles klein zu halten.

Sie können in der Datei AGENTS.md oder CLAUDE.md Ihres Projekts eine benutzerdefinierte Richtlinie für die Browserunterstützung definieren:

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

Jeder Leitfaden enthält den Baseline-Status, das Veröffentlichungsdatum und die Mindestbrowserversionen für die einzelnen Funktionen. Der KI-Agent vergleicht Ihre Richtlinie mit diesen Kompatibilitätsdaten, bevor er Code schreibt. Wenn ein Feature bereits Ihr Ziel erfüllt, schreibt der Agent den modernen Code und überspringt den Fallback-Code.

Sowohl den modernen als auch den Fallback-Pfad testen

Browserübergreifenden Code zu schreiben, ist nur die halbe Miete. Außerdem müssen Sie sowohl den modernen Codepfad als auch den Fallback-Pfad in echten Browsern testen.

Wenn Sie in einem einzelnen Browser testen, überprüfen Sie nur einen Zweig Ihres Codes. In Chrome und Firefox wird beispielsweise das native closedby="any"-Attribut für ein <dialog>-Element ausgeführt, während in Safari der JavaScript-Fallback für das Klicken außerhalb des Elements verwendet wird. Wenn Sie das Dialogfeld nur in Chrome prüfen, wird dieser Fallback-Listener während des Tests nie ausgeführt.

Wenn Sie beide Codepfade prüfen möchten, verbinden Sie Ihren KI-Agenten für die Programmierung gleichzeitig mit mehreren Browser-Engines:

Wenn alle drei Tools verbunden sind, kann der Kundenservicemitarbeiter Ihre Seite in Chrome, Firefox und Safari in einem einzigen Workflow öffnen. Anschließend kann es bestätigen, dass sowohl die native Funktion als auch die Fallback-Funktion wie erwartet funktionieren.

Erste Schritte mit Modern Web Guidance

Wenn Sie Modern Web Guidance zu Ihrem Projekt hinzufügen möchten, führen Sie das interaktive Installationsprogramm im Projektverzeichnis aus:

npx modern-web-guidance@latest install

Wenn Sie eine frühere Version installiert haben, führen Sie den Aktualisierungsbefehl aus, um ein Upgrade auf Version 1.0 durchzuführen:

npx modern-web-guidance@latest update

Sie können Modern Web Guidance auch über Plug-in-Marktplätze für Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code und Grok installieren.

Weitere Informationen finden Sie in den folgenden Ressourcen: