Cross-browser per impostazione predefinita: come funzionano i fallback di Baseline in Modern Web Guidance

Tara Agyemang

Data di pubblicazione: 12 novembre 2026

Chiedi a un agente di programmazione AI di creare un tooltip o una finestra di dialogo modale e osserva attentamente il codice che scrive. La maggior parte delle volte, l'agente utilizza JavaScript per ricreare le funzionalità integrate nel browser. Se chiedi all'agente di utilizzare funzionalità CSS o HTML più recenti, spesso ignora il rilevamento delle funzionalità e i fallback. Questa omissione lascia gli utenti su browser non supportati con una pagina non funzionante.

Modern Web Guidance integra la compatibilità del browser in ogni suggerimento. Ogni guida abbina le funzionalità web moderne ai dati di supporto di Baseline e ai pattern di fallback verificati. Questo post spiega come l'agente utilizza questi dati per scrivere codice moderno e compatibile con più browser.

Perché gli agenti di programmazione sbagliano il supporto del browser senza indicazioni

Senza indicazioni, gli agenti di programmazione raramente controllano quali browser deve supportare il tuo progetto prima di scrivere il codice. Al contrario, tendono a rientrare in uno dei due estremi:

• Utilizzo predefinito di codice legacy: i dati di addestramento del modello sono pieni di pattern legacy e le valutazioni di Modern Web Guidance mostrano che i modelli continuano a consigliare molti di questi pattern. Gli agenti spesso scrivono codice JavaScript complesso o aggiungono librerie esterne quando una funzionalità HTML o CSS integrata potrebbe svolgere lo stesso compito.
• Utilizzo di nuove funzionalità senza una rete di sicurezza: quando chiedi a un agente di utilizzare una funzionalità web più recente, di solito scrive il codice per i browser supportati e si ferma qui. Salta il rilevamento delle funzionalità e omette i fallback, il che interrompe la pagina nei browser che non supportano la funzionalità.

I dati della suite di valutazione di Modern Web Guidance mostrano quanto sia comune questa lacuna. Per le funzionalità che non funzionano ancora su tutti i principali browser, la suite di valutazione verifica il rilevamento delle funzionalità, le regole @supports, i fallback o i polyfill condizionali. I modelli non guidati superano questi controlli solo nel 43% dei casi. Con Modern Web Guidance attivato, la percentuale di superamento sale all'87%.

In che modo i dati di riferimento guidano ogni suggerimento

Per decidere quando una funzionalità web richiede un comportamento di riserva, Modern Web Guidance si basa su Baseline. Baseline monitora il supporto nel set di browser principali (Chrome, Edge, Firefox e Safari su computer e dispositivi mobili) con tre stati:

• Baseline Widely available: la funzionalità ha funzionato su tutti i browser principali per almeno 30 mesi.
• Baseline Newly available: la funzionalità è supportata da tutti i browser principali, a partire dalla data in cui l'ultimo browser ha aggiunto il supporto.
• Disponibilità limitata: la funzionalità non è ancora supportata in tutti i browser principali.

Ogni guida di Modern Web Guidance include lo stato di Baseline integrato e i dati sulla versione del browser del pacchetto web-features. Quando l'agente di programmazione carica una guida, riceve lo stato esatto del supporto della funzionalità, le date di rilascio e le versioni del browser insieme alle istruzioni di implementazione. Ad esempio:

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.

Per impostazione predefinita, Modern Web Guidance segue due regole basate su questi dati:

• Funzionalità Baseline ampiamente disponibili: l'agente utilizza queste funzionalità direttamente senza rilevamento di funzionalità aggiuntive o codice di riserva. Questa regola mantiene il codebase snello ed evita soluzioni alternative non necessarie.
• Funzionalità Baseline appena disponibili e con disponibilità limitata: le guide per queste funzionalità includono una strategia di fallback verificata. L'agente utilizza la funzionalità moderna, se supportata, e fornisce un fallback pulito per gli altri browser.

Quattro pattern di fallback utilizzati da Modern Web Guidance nella pratica

Non tutte le funzionalità web richiedono lo stesso tipo di fallback. Modern Web Guidance associa ogni funzionalità a uno dei quattro approcci di riserva in base al comportamento della funzionalità nei browser non supportati:

Potenziamento progressivo senza codice di riserva

Alcune funzionalità moderne migliorano la tipografia, le animazioni o la velocità di caricamento della pagina senza modificare il funzionamento della pagina. Se un browser non riconosce queste funzionalità, le ignora e visualizza il resto della pagina normalmente.

Ad esempio, la dichiarazione CSS text-wrap: balance (Baseline - Nuova disponibilità) uniforma le lunghezze delle righe nelle intestazioni.

.balanced {
  text-wrap: balance;
}

L'API Speculation Rules (disponibilità limitata) precarica o esegue il prerendering delle pagine successive. I browser non supportati ignorano tranquillamente i blocchi <script type="speculationrules"> e le dichiarazioni CSS non riconosciute.

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

Grazie a questo comportamento, l'agente può aggiungere queste funzionalità direttamente senza codice di riserva aggiuntivo.

Rilevamento delle funzionalità CSS con la regola @supports

Altre funzionalità CSS modificano il modo in cui un elemento viene posizionato o formattato sullo schermo. Se applichi parte dello stile in modo incondizionato, i browser non supportati potrebbero visualizzare l'elemento nella posizione sbagliata.

Ad esempio, le query container ancorate (container-type: anchored, disponibilità limitata) su un tooltip posizionato ti consentono di capovolgere la freccia del tooltip quando si capovolge vicino al bordo dell'area visibile. Nei browser che non supportano le query dei container ancorati, la freccia non può rilevare l'inversione e potrebbe puntare nella direzione sbagliata. Modern Web Guidance indica all'agente di inserire gli stili delle frecce in una regola @supports (container-type: anchored) in modo che la freccia predefinita venga visualizzata solo nei browser che supportano anche la regola di inversione @container anchored().

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

JavaScript personalizzato leggero

Quando una funzionalità HTML interattiva non è supportata da tutti i browser principali, l'utilizzo di una libreria di terze parti può essere superfluo. Per le interazioni autonome, Modern Web Guidance fornisce un breve fallback JavaScript senza dipendenze dietro un controllo delle funzionalità.

Ad esempio, l'attributo closedby="any" di un elemento <dialog> (disponibilità limitata) consente agli utenti di chiudere una finestra di dialogo modale facendo clic sullo sfondo. Per i browser che non supportano l'attributo closedby, la guida include un piccolo click listener che controlla prima l'oggetto HTMLDialogElement.prototype:

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

Polyfill caricati in modo condizionale

Per le funzionalità della piattaforma più grandi, come il posizionamento degli ancoraggi CSS (disponibilità limitata) o l'API Temporal (disponibilità limitata), la scrittura manuale di un fallback personalizzato non è pratica. Allo stesso tempo, l'aggregazione di un polyfill per ogni utente aggiunge un costo di download aggiuntivo per i browser che supportano già la funzionalità.

In questi casi, Modern Web Guidance indica all'agente di verificare prima il supporto e di caricare dinamicamente un polyfill verificato con l'espressione import() dal bundler o da una CDN. I browser che supportano questa funzionalità non scaricano codice aggiuntivo, mentre i browser meno recenti recuperano il polyfill on demand.

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

Personalizza il target di supporto del browser del tuo progetto

Per impostazione predefinita, Modern Web Guidance considera le funzionalità di Baseline ampiamente disponibili come sicure da utilizzare senza fallback. Richiede i fallback per le funzionalità Baseline Disponibilità recente e Disponibilità limitata.

Il tuo progetto potrebbe avere requisiti diversi per il browser. Ad esempio, potresti scegliere come target un anno specifico di Baseline, creare un'app Electron o escludere i polyfill per mantenere i bundle di piccole dimensioni.

Puoi definire un criterio di supporto del browser personalizzato nel file AGENTS.md o CLAUDE.md del tuo progetto:

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

Ogni guida include lo stato Baseline, la data di rilascio e le versioni minime del browser per ogni funzionalità. L'agente confronta la policy con questi dati di compatibilità prima di scrivere il codice. Quando una funzionalità soddisfa già il tuo target, l'agente scrive il codice moderno e salta il codice di riserva.

Testa sia il percorso moderno che quello di riserva

Scrivere codice compatibile con più browser è solo metà del lavoro. Devi anche testare sia il percorso del codice moderno sia il percorso di riserva nei browser reali.

Quando esegui i test in un singolo browser, verifichi solo un ramo del codice. Ad esempio, Chrome e Firefox eseguono l'attributo closedby="any" nativo su un elemento <dialog>, mentre Safari esegue il fallback del clic esterno di JavaScript. Se esamini la finestra di dialogo solo in Chrome, il listener di riserva non viene mai eseguito durante il test.

Per verificare entrambi i percorsi del codice, connetti l'agente di programmazione a più motori di browser contemporaneamente:

• Chrome DevTools per agenti: collega l'agente a Chrome per ispezionare il layout, i log della console e il comportamento di runtime.
• Firefox DevTools MCP: collega l'agente a un'istanza Firefox attiva tramite WebDriver BiDi.
• Server MCP Safari: connetti l'agente a Safari tramite il comando safaridriver --mcp integrato.

Con tutti e tre gli strumenti collegati, l'agente può aprire la tua pagina su Chrome, Firefox e Safari in un unico workflow. In questo modo, può verificare che sia la funzionalità nativa sia l'esperienza di riserva funzionino come previsto.

Inizia a utilizzare Modern Web Guidance

Per aggiungere Modern Web Guidance al tuo progetto, esegui il programma di installazione interattivo dalla directory del progetto:

npx modern-web-guidance@latest install

Se hai installato una versione precedente, esegui il comando update per eseguire l'upgrade alla versione 1.0:

npx modern-web-guidance@latest update

Puoi anche installare Modern Web Guidance tramite i marketplace di plug-in per Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code e Grok.

Per saperne di più, consulta queste risorse:

• Documentazione di Modern Web Guidance
• Repository GitHub
• Dashboard di valutazione
• Documentazione di Baseline su web.dev