Compatibilità dei browser e caniuse.com
Verifichi il supporto delle funzionalità nei vari browser su caniuse.com, comprenda i prefissi dei vendor e utilizzi polyfill o fallback quando necessario.
Compatibilità dei browser e caniuse.com è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Perché la compatibilità è importante?
I diversi browser implementano gli standard web con tempistiche diverse. Una proprietà CSS o un'API JavaScript disponibile in Chrome 130 potrebbe non esistere in una versione meno recente di Safari o Firefox. Testare e pianificare la compatibilità evita esperienze non funzionanti per gli utenti.
caniuse.com — il riferimento per la compatibilità
Visiti caniuse.com e digiti una qualsiasi proprietà CSS, API JavaScript o attributo HTML. Visualizzerà una tabella di supporto con codici colore per tutti i principali browser e le relative versioni recenti, oltre a statistiche di utilizzo e note sul supporto parziale.
Come leggere la tabella di caniuse
Verde = supportato. Giallo = supporto parziale. Rosso = non supportato. Grigio = sconosciuto. Controlli la percentuale di utilizzo globale in alto: se almeno il 97% degli utenti dispone della funzionalità, in genere può utilizzarla senza un fallback.
browser-compat-data e MDN
Le pagine MDN Web Docs includono una tabella di compatibilità dei browser in fondo a ogni pagina di riferimento di un'API. Utilizza gli stessi dati di caniuse e viene aggiornata frequentemente dagli stessi produttori di browser.
L'iniziativa Baseline
L'iniziativa Baseline (web.dev/baseline) contrassegna le funzionalità come Newly Available o Widely Available in base al loro supporto in Chrome, Edge, Firefox e Safari. Una funzionalità Widely Available è sicura da usare senza polyfill.
Polyfill
Un polyfill è codice JavaScript che implementa un'API più recente nei browser meno recenti. Fonti diffuse: polyfill.io (fornisce solo i polyfill necessari), core-js (polyfill JavaScript completo) e gli helper di Babel.
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — Query delle funzionalità in CSS
@supports consente di scrivere CSS che viene applicato solo quando una proprietà è supportata. Fornisce fallback CSS, in modo simile a come le media query forniscono override responsive.
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}Prefissi dei vendor (legacy)
Le funzionalità CSS meno recenti richiedevano prefissi dei vendor: -webkit-, -moz-, -ms-. Oggi sono per lo più obsoleti: i browser moderni utilizzano proprietà standard senza prefisso. Autoprefixer (plugin di PostCSS) li aggiunge automaticamente se sono ancora necessari.
Transpilation con Babel
Babel compila JavaScript moderno (ES2022+) in ES5, che può essere eseguito dai browser meno recenti. Vite e webpack integrano Babel tramite plugin. Configuri i browser di destinazione in browserslist in package.json.
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]Test nei browser reali
L'emulazione dei dispositivi in DevTools non sostituisce i test nei browser reali. Utilizzi BrowserStack, Sauce Labs o il browser Safari effettivo (richiede macOS o iOS) per una vera convalida cross-browser.
Il panorama dei browser evergreen
Chrome, Edge, Firefox e Safari si aggiornano automaticamente. Ogni anno diminuisce la coda di browser obsoleti. Per la maggior parte dei prodotti destinati ai consumatori, supportare le ultime 2 versioni principali di ciascun browser copre oltre il 95% degli utenti.
Verifica rapida
Che cosa indica una cella verde nella tabella di supporto di caniuse.com?
Riepilogo: compatibilità dei browser
Verifichi caniuse.com prima di utilizzare nuove API. Consulti le tabelle di compatibilità di MDN. Definisca insiemi di browser appropriati con browserslist. Utilizzi @supports per le query delle funzionalità CSS. Inserisca polyfill solo per ciò che è necessario. Esegua la transpilation del JavaScript moderno con Babel. Testi le funzionalità critiche nei browser reali.
Domande Frequenti
La lezione «Compatibilità dei browser e caniuse.com» è gratuita?
Sì — il testo completo di «Compatibilità dei browser e caniuse.com» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Compatibilità dei browser e caniuse.com»?
Verifichi il supporto delle funzionalità nei vari browser su caniuse.com, comprenda i prefissi dei vendor e utilizzi polyfill o fallback quando necessario. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Compatibilità dei browser e caniuse.com»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Chrome DevTools: Elements, Console, Network
- VSCode: estensioni, Emmet e scorciatoie
- Configurazione di Prettier ed ESLint
- Compatibilità dei browser e caniuse.com