Standaard voor meerdere browsers: Hoe Baseline-back-ups werken in Modern Web Guidance

Tara Agyemang

Gepubliceerd: 12 november 2026

Vraag een AI-programmeeragent om een tooltip of een modaal dialoogvenster te maken en kijk goed naar de code die deze schrijft. Meestal haalt de agent JavaScript op om functies opnieuw te maken die in de browser zijn ingebouwd. Als je de agent vraagt om nieuwere CSS- of HTML-functies te gebruiken, slaat deze vaak functiedetectie en fallbacks over. Hierdoor krijgen gebruikers met niet-ondersteunde browsers een pagina die niet werkt.

Modern Web Guidance bouwt browsercompatibiliteit in elke aanbeveling in. Elke gids combineert moderne webfuncties met Baseline-ondersteuningsgegevens en geverifieerde reservepatronen. In deze post wordt uitgelegd hoe je agent die gegevens gebruikt om moderne, cross-browser code te schrijven.

Waarom programmeeragents zonder begeleiding de verkeerde browserondersteuning krijgen

Zonder begeleiding controleren programmeeragents zelden welke browsers je project moet ondersteunen voordat ze code schrijven. In plaats daarvan vallen ze meestal in een van de volgende 2 uitersten:

• Standaard verouderde code gebruiken: De trainingsgegevens van het model staan vol met verouderde patronen en evaluaties van Modern Web Guidance tonen aan dat modellen nog steeds veel van deze patronen aanbevelen. Agenten schrijven vaak complexe JavaScript of voegen externe bibliotheken toe, terwijl een ingebouwde HTML- of CSS-functie ook volstaat.
• Nieuwe functies gebruiken zonder vangnet: Als je een agent vraagt een nieuwere webfunctie te gebruiken, schrijft deze meestal code voor ondersteunende browsers en stopt daar. De functieherkenning wordt overgeslagen en er worden geen fallbacks gebruikt, waardoor de pagina niet werkt in browsers die de functie niet ondersteunen.

Gegevens uit de evaluatiesuite van Modern Web Guidance tonen aan hoe vaak deze kloof voorkomt. Voor functies die nog niet in alle grote browsers werken, test de evaluatiesuite op functiedetectie, @supports-regels, fallbacks of voorwaardelijke polyfills. Niet-begeleide modellen slagen maar in 43% van de gevallen voor deze controles. Als Modern Web Guidance aanstaat, stijgt het slagingspercentage naar 87%.

Hoe basisgegevens elke aanbeveling sturen

Modern Web Guidance vertrouwt op Baseline om te bepalen wanneer een webfunctie een fallback nodig heeft. Baseline houdt de ondersteuning bij voor de belangrijkste browsers (Chrome, Edge, Firefox en Safari op desktop en mobiel) met 3 statussen:

• Baseline Widely available: De functie werkt al minstens 30 maanden in alle kernbrowsers.
• Baseline: Nieuw beschikbaar: De functie werkt in alle kernbrowsers, vanaf de datum waarop de laatste browser ondersteuning heeft toegevoegd.
• Beperkte beschikbaarheid: De functie wordt nog niet in alle kernbrowsers ondersteund.

Elke Modern Web Guidance-handleiding bevat ingebouwde Baseline-status en browserversiegegevens uit het pakket web-features. Als je programmeeragent een handleiding laadt, krijgt deze de exacte supportstatus, releasedatums en browserversies van de functie, naast de implementatie-instructies. Bijvoorbeeld:

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.

Modern Web Guidance volgt standaard 2 regels op basis van die gegevens:

• Algemeen beschikbare basisfuncties: Je agent gebruikt deze functies rechtstreeks zonder extra functiedetectie of reserve-code. Met deze regel houd je je codebase overzichtelijk en vermijd je onnodige tijdelijke oplossingen.
• Functies van Baseline die nieuw beschikbaar zijn en functies met beperkte beschikbaarheid: De handleidingen voor deze functies bevatten een geverifieerde terugvalstrategie. Je agent gebruikt de moderne functie waar deze wordt ondersteund en biedt een schone fallback voor andere browsers.

4 reservepatronen die Modern Web Guidance in de praktijk gebruikt

Niet elke webfunctie heeft hetzelfde soort fallback nodig. Modern Web Guidance koppelt elke functie aan een van de 4 fallback-benaderingen op basis van hoe de functie zich gedraagt in niet-ondersteunde browsers:

Progressive enhancement zonder fallback-code

Sommige moderne functies verbeteren de typografie, animaties of laadsnelheid van de pagina zonder de werking van de pagina te veranderen. Als een browser deze functies niet herkent, worden ze genegeerd en wordt de rest van de pagina normaal weergegeven.

De CSS-declaratie text-wrap: balance (Baseline Newly available) maakt bijvoorbeeld regellengtes in koppen gelijk.

.balanced {
  text-wrap: balance;
}

De Speculation Rules API (beperkte beschikbaarheid) haalt toekomstige pagina's vooraf op of rendert ze vooraf. Niet-ondersteunde browsers negeren <script type="speculationrules">-blokken en niet-herkende CSS-declaraties op een veilige manier.

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

Vanwege dit gedrag kan je agent deze functies rechtstreeks toevoegen zonder extra fallback-code.

CSS-functiedetectie met de regel @supports

Andere CSS-functies wijzigen de positie of stijl van een element op het scherm. Als je een deel van de stijl onvoorwaardelijk toepast, kunnen niet-ondersteunde browsers het element op de verkeerde plaats weergeven.

Met verankerde containerquery's (container-type: anchored, beperkte beschikbaarheid) in een gepositioneerde tooltip kun je bijvoorbeeld de pijl van de tooltip omdraaien als deze aan de rand van de viewport wordt omgedraaid. In browsers zonder ondersteuning voor verankerde containerquery's kan de pijl de omdraaiing niet detecteren en wijst deze misschien de verkeerde kant op. Modern Web Guidance geeft je agent de opdracht om de pijl-stijlen in een @supports (container-type: anchored)-regel te plaatsen, zodat de standaardpijl alleen verschijnt in browsers die ook de @container anchored()-regel ondersteunen.

@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;
  }
}

Lichtgewicht aangepaste JavaScript

Als een interactieve HTML-functie niet in alle kernbrowsers wordt ondersteund, is het misschien niet nodig om een bibliotheek van derden te gebruiken. Voor op zichzelf staande interacties biedt Modern Web Guidance een korte JavaScript-fallback zonder afhankelijkheden achter een functiecontrole.

Met het kenmerk closedby="any" van een <dialog>-element (beperkte beschikbaarheid) kunnen gebruikers bijvoorbeeld een modaal dialoogvenster sluiten door op de achtergrond te klikken. Voor browsers die het kenmerk closedby niet ondersteunen, bevat de handleiding een kleine click listener die eerst het object HTMLDialogElement.prototype controleert:

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();
    }
  });
}

Voorwaardelijk geladen polyfills

Voor grotere platformfuncties, zoals CSS-ankerpositionering (beperkte beschikbaarheid) of de Temporal API (beperkte beschikbaarheid), is het niet praktisch om handmatig een aangepaste fallback te schrijven. Tegelijkertijd zorgt het bundelen van een polyfill voor elke gebruiker voor extra downloadkosten voor browsers die de functie al ondersteunen.

In deze gevallen stuurt Modern Web Guidance je agent om eerst te controleren op ondersteuning en een gecontroleerde polyfill dynamisch te laden met de expressie import() van je bundler of een CDN. Ondersteunende browsers downloaden geen extra code, terwijl oudere browsers de polyfill op aanvraag ophalen.

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

Het doel voor browserondersteuning van je project aanpassen

Modern Web Guidance behandelt functies die algemeen beschikbaar zijn in Baseline standaard als veilig om te gebruiken zonder fallbacks. Er zijn fallbacks vereist voor functies die nieuw beschikbaar zijn in de Baseline en functies met beperkte beschikbaarheid.

Je project heeft misschien andere browservereisten. Je kunt bijvoorbeeld een specifiek Baseline-jaar targeten, een Electron-app maken of polyfills uitsluiten om bundels klein te houden.

Je kunt een aangepast beleid voor browserondersteuning definiëren in het bestand AGENTS.md of CLAUDE.md van je project:

## 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.

Elke gids bevat de Baseline-status, de releasedatum en de minimale browserversies voor elke functie. Je agent vergelijkt je beleid met deze compatibiliteitsgegevens voordat die code schrijft. Als een functie al aan je doel voldoet, schrijft de agent de moderne code en slaat de fallback-code over.

Test zowel het moderne pad als het reservepad.

Cross-browser code schrijven is maar de helft van het werk. Je moet ook zowel het moderne codepad als het reservepad testen in echte browsers.

Als je in één browser test, verifieer je maar één vertakking van je code. Chrome en Firefox voeren bijvoorbeeld het systeemeigen kenmerk closedby="any" uit op een <dialog>-element, terwijl Safari de JavaScript-terugvaloptie voor klikken buiten het element uitvoert. Als je het dialoogvenster alleen in Chrome inspecteert, wordt die fallback-listener nooit uitgevoerd tijdens de test.

Als je beide codepaden wilt verifiëren, koppel je je programmeer-agent aan meerdere browser-engines tegelijk:

• Chrome DevTools voor agents: Koppel je agent aan Chrome om de vormgeving, consolelogboeken en runtime-gedrag te inspecteren.
• Firefox DevTools MCP: Koppel je agent aan een live Firefox-instantie via WebDriver BiDi.
• Safari MCP-server: Koppel je agent aan Safari via de ingebouwde opdracht safaridriver --mcp.

Als alle 3 de tools zijn gekoppeld, kan je agent je pagina in één workflow openen in Chrome, Firefox en Safari. De app kan dan bevestigen dat de systeemeigen functie en de reservefunctionaliteit beide werken zoals verwacht.

Aan de slag met Modern Web Guidance

Als je Modern Web Guidance aan je project wilt toevoegen, voer je het interactieve installatieprogramma uit vanuit je projectdirectory:

npx modern-web-guidance@latest install

Als je een eerdere versie hebt geïnstalleerd, voer je de updateopdracht uit om te upgraden naar versie 1.0:

npx modern-web-guidance@latest update

Je kunt Modern Web Guidance ook installeren via plug-inmarktplaatsen voor Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code en Grok.

Neem deze bronnen door voor meer informatie:

• Documentatie over Modern Web Guidance
• GitHub-repository
• Evaluatiedashboard
• Baseline-documentatie op web.dev