W3docs
it
Accedi

Compatibilità tra Browser

Scopri come i browser differiscono nel rendering di HTML, CSS e JavaScript e come scrivere codice cross-browser con feature detection, CSS.supports, polyfill e progressive enhancement.

Garantire la compatibilità tra browser è un aspetto fondamentale dello sviluppo web. Browser diversi possono interpretare e renderizzare HTML, CSS e JavaScript in modo differente, causando incongruenze nel modo in cui le pagine web appaiono e funzionano. Questa guida spiega perché esistono queste differenze, come i browser costruiscono il DOM e le tecniche concrete che puoi usare per scrivere codice che funzioni ovunque: feature detection (in JavaScript e CSS), polyfill, progressive enhancement e graceful degradation.

La regola d'oro che pervade tutto questo: rileva le capacità, non il browser. Verificare cosa un browser sa fare è affidabile; verificare quale browser afferma di essere (tramite la stringa navigator.userAgent) non lo è — le stringhe user-agent sono facilmente falsificabili, cambiano continuamente e smettono di funzionare non appena esce una nuova versione del browser.

Comprendere i Problemi di Compatibilità

Perché si Verificano i Problemi di Compatibilità

I problemi di compatibilità nascono perché browser diversi usano motori di rendering diversi e rilasciano le funzionalità con tempistiche differenti. Ad esempio, Chrome usa il motore Blink, Firefox usa Gecko e Safari usa WebKit. Ogni motore implementa gli stessi standard web, ma una nuova API potrebbe arrivare in un motore mesi prima di un altro, e i browser più vecchi o vincolati (installazioni aziendali di IE, webview in-app, chioschi) potrebbero non riceverla mai. Il risultato è una variazione sia nel rendering che nel comportamento di JavaScript.

Problemi di Compatibilità Comuni

  1. Differenze di Layout CSS: Le variazioni nel modo in cui i browser interpretano il CSS possono causare differenze nel layout e nello stile.
  2. Funzionalità JavaScript: Alcune funzionalità JavaScript potrebbero essere supportate in un browser ma non in altri.
  3. Supporto a HTML5 e CSS3: Le funzionalità più recenti di HTML5 e CSS3 potrebbero non essere supportate in modo uniforme da tutti i browser.
  4. Lacune nelle API DOM: Un metodo su un nodo DOM (ad esempio element.closest() o element.replaceChildren()) potrebbe mancare nei motori più vecchi, generando un TypeError a runtime.

Come i Diversi Browser Gestiscono il DOM

Motori di Rendering dei Browser

Ogni browser usa il proprio motore di rendering per interpretare e visualizzare i contenuti web:

  • Chrome ed Edge: Blink
  • Firefox: Gecko
  • Safari: WebKit

Questi motori analizzano l'HTML, applicano il CSS ed eseguono JavaScript per costruire e renderizzare il DOM. Poiché il DOM è la rappresentazione in-memory su cui il tuo JavaScript opera, qualsiasi differenza nei metodi DOM esposti da un motore influisce direttamente su quale codice viene eseguito. Ecco perché gli script che funzionano in un browser possono generare errori in un altro — il problema raramente è "la sintassi", ma "questo metodo non esiste qui."

Esempio: Gestione del Layout CSS Grid

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .item {
            padding: 20px;
            background-color: lightblue;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
    </div>
</body>
</html>
Provalo tu stesso »

Questo esempio mostra un layout CSS Grid di base. Mentre i browser moderni supportano pienamente CSS Grid, Internet Explorer 11 supporta solo una versione precedente e non standard della specifica, il che può causare problemi di layout se non si usano prefissi o polyfill.

Strumenti e Tecniche per Garantire la Compatibilità Cross-Browser

Strumenti di Test

  1. Strumenti per Sviluppatori del Browser: Gli strumenti integrati nei browser come Chrome DevTools, Firefox Developer Tools e Safari Web Inspector aiutano a fare debug e a testare i problemi di compatibilità.
  2. Servizi di Test Cross-Browser: Strumenti come BrowserStack e Sauce Labs permettono di testare il tuo sito su browser e dispositivi diversi.

Tecniche

  1. Usare Reset CSS: Normalizza o resetta il CSS per garantire uno stile coerente tra i browser.
  2. Polyfill e Shim: Usa librerie JavaScript che aggiungono funzionalità mancanti ai browser più vecchi.
  3. Progressive Enhancement: Costruisci prima la funzionalità di base, poi potenziala per i browser più capaci.
  4. Autoprefixer: Aggiunge automaticamente i prefissi vendor alle regole CSS per garantire la compatibilità tra browser.

Usare la Feature Detection

Introduzione alla Feature Detection

La feature detection verifica se un browser supporta una determinata funzionalità prima di usarla, in modo che il codice possa seguire un percorso alternativo invece di generare un errore. È l'alternativa moderna allo user-agent sniffing.

Il pattern è sempre lo stesso: verifica l'esistenza dell'API, poi scegli un percorso.

// Detect a DOM/Web API: is the property or method actually there?
if ('clipboard' in navigator && navigator.clipboard.writeText) {
  navigator.clipboard.writeText('copied!');
} else {
  // Fallback for browsers without the async Clipboard API
  console.log('Clipboard API not available — use a manual fallback');
}

// Detect a method on an element before calling it
const el = document.querySelector('.item');
if (el && typeof el.closest === 'function') {
  el.closest('.container');
}

Altre cose utili da verificare allo stesso modo: 'fetch' in window, 'IntersectionObserver' in window, 'localStorage' in window (racchiuso in un try/catch, perché la modalità privata può generare eccezioni), e 'serviceWorker' in navigator.

Rilevare il Supporto CSS da JavaScript

Per le funzionalità CSS, i browser espongono il metodo CSS.supports(). Restituisce un boolean in modo da poter prendere decisioni di stile in JavaScript:

if (window.CSS && CSS.supports('display', 'grid')) {
  document.body.classList.add('has-grid');
} else {
  document.body.classList.add('no-grid'); // ship a flexbox/float fallback
}

// You can also pass a full condition string:
CSS.supports('(gap: 1rem) and (display: flex)'); // true / false

Usare Modernizr per la Feature Detection

Modernizr è una popolare libreria JavaScript che rileva le funzionalità HTML5 e CSS3 nel browser dell'utente.

<!DOCTYPE html>
<html>
<head>
    <title>Modernizr Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/3.12.1/modernizr.min.js"></script>
</head>
<body>
    <div id="feature-check"></div>
    <script>
        if (Modernizr.canvas) {
            document.getElementById('feature-check').textContent = 'Canvas is supported!';
        } else {
            document.getElementById('feature-check').textContent = 'Canvas is not supported.';
        }
    </script>
</body>
</html>
Provalo tu stesso »

Questo esempio usa Modernizr per verificare se il browser supporta l'elemento HTML5 <canvas> e visualizza un messaggio di conseguenza.

Per CSS, puoi usare la regola @supports per applicare stili solo quando una funzionalità è supportata:

.container {
  display: flex;
}
@supports (display: grid) {
  .container {
    display: grid;
  }
}

La regola @supports è il gemello CSS di CSS.supports(): la dichiarazione di base (display: flex) è il fallback, e il layout potenziato viene applicato solo dove il browser comprende grid.

Polyfill vs. Progressive Enhancement

Quando manca una funzionalità, hai due strategie che risolvono problemi diversi:

  • Polyfill — carica un piccolo script che aggiunge l'API mancante in modo che il codice normale possa funzionare senza modifiche. Usalo quando la funzionalità è essenziale (ad esempio, un browser vecchio non ha fetch, quindi carichi un polyfill per fetch). Lo svantaggio è il peso aggiuntivo inviato a ogni visitatore a meno che non lo carichi in modo condizionale.
  • Progressive enhancement / graceful degradation — costruisci una base funzionante che non richiede funzionalità avanzate, poi aggiungi i miglioramenti dove sono supportati. La pagina funziona comunque senza di essi.

Un loader condizionale di polyfill mantiene il costo fuori dai browser moderni:

// Only fetch the polyfill if the browser actually needs it
if (!('IntersectionObserver' in window)) {
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer.js';
  document.head.appendChild(script);
}
// ... otherwise modern browsers pay nothing extra

Poiché la feature detection e la fetch API spesso vanno di pari passo, proteggi allo stesso modo il codice di rete prima di usarla.

Best Practice

  1. Testa Presto e Spesso: Testa regolarmente le tue pagine web su browser e dispositivi diversi durante il processo di sviluppo.
  2. Usa la Feature Detection: Implementa la feature detection per garantire che il tuo sito funzioni correttamente su tutti i browser.
  3. Adotta il Responsive Design: Usa tecniche di responsive design per assicurarti che il tuo sito sia visualizzato correttamente su tutte le dimensioni e orientamenti dello schermo.
  4. Rimani Aggiornato sui Cambiamenti dei Browser: Tieniti al corrente degli ultimi sviluppi e cambiamenti nelle tecnologie dei browser e negli standard web.
  5. Controlla Prima una Tabella di Supporto: Prima di adottare una API, cercala su caniuse.com o su MDN per vedere quali browser la supportano e se esiste un polyfill.
Attenzione

Evita lo user-agent sniffing (navigator.userAgent) per decidere quale percorso di codice seguire. Le stringhe UA sono falsificabili e cambiano continuamente, quindi il rilevamento smette di funzionare silenziosamente al rilascio del browser successivo. Rileva la funzionalità stessa con in, typeof, CSS.supports() o @supports.

Informazione

Usa la feature detection (e librerie come Modernizr dove fa risparmiare tempo) in modo che il tuo sito gestisca con eleganza le funzionalità non supportate, offrendo fallback e un'esperienza coerente tra i browser.

Conclusione

Garantire la compatibilità cross-browser è essenziale per offrire un'esperienza utente coerente. Comprendendo perché i browser differiscono, testando presto su motori diversi e rilevando le capacità invece di identificare il browser — supportando poi il rilevamento con polyfill o progressive enhancement — puoi costruire applicazioni web robuste che funzionino per tutti.

Per approfondire il DOM che stai rendendo compatibile, consulta Lavorare con il DOM, Ricerca: getElement, querySelector e Introduzione agli Eventi del Browser.

Esercitazione

Pratica
Quali delle seguenti affermazioni sulla compatibilità DOM tra browser sono vere?
Quali delle seguenti affermazioni sulla compatibilità DOM tra browser sono vere?
Was this page helpful?