Data di pubblicazione: 7 maggio 2025. Ultimo aggiornamento: 17 settembre 2025
Browserslist è uno degli strumenti più popolari per configurare le versioni minime dei browser supportate nei codebase frontend. Gli sviluppatori aggiungono una query browserslist al file package.json (o a un altro punto di configurazione per Browserslist, ad esempio un file .browserslistrc) e Browserslist espone un elenco dei browser minimi supportati. Browserslist può essere utilizzato con un'ampia gamma di strumenti di linting, polyfill e packaging popolari, tra cui:
- Autoprefixer
- Babel utilizzando
@babel/preset-env - PostCSS utilizzando
postcss-preset-env - ESLint utilizzando
eslint-plugin-compat - Stylelint utilizzando
stylelint-no-unsupported-browser-features - webpack
Target di base
Quando decidi di utilizzare Baseline, devi considerare la tua base utenti e decidere quale insieme di funzionalità di Baseline vuoi scegliere come target:
- Baseline ampiamente disponibile include tutte le funzionalità web completamente supportate dal set di browser di base Baseline 30 o più mesi prima.
- I set di funzionalità dell'anno di base, ad esempio Baseline 2020, includono tutte le funzionalità Nuove alla fine dell'anno specificato.
A seconda della tua base utenti, potresti essere in grado di scegliere come target Baseline Widely available oppure potresti dover scegliere come target un anno di Baseline precedente. Consulta gli strumenti di analisi o RUM per capire quali versioni dei browser utilizzano i tuoi utenti.
Come scegliere come target Baseline Newly o Widely available
Il supporto di Baseline è integrato in Browserslist tramite diverse query. Se vuoi scegliere come target i browser di base appena disponibili, prova a specificare baseline newly available nella configurazione di Browserslist:
{
...
"browserslist": [
"baseline newly available"
]
...
}
Puoi specificare anche baseline widely available come query:
{
...
"browserslist": [
"baseline widely available"
]
...
}
Come scegliere come target gli anni di riferimento
Se vuoi scegliere come target un set di funzionalità dell'anno di riferimento, specifica l'anno in una query, ad esempio baseline 2024 se vuoi scegliere come target il set di funzionalità del 2024:
"browserslist": "baseline 2024"
Puoi specificare anni dal baseline 2015 all'anno corrente.
Come specificare i browser downstream
Il set di browser di base include Chrome, Edge, Firefox e Safari. Gli altri browser si basano sullo stesso codice open source di Chrome ed Edge, Chromium, e dovrebbero supportare lo stesso insieme di funzionalità della versione di Chromium che implementano. Per includere questi browser nella configurazione di base, aggiungi with downstream dopo la query di base. Ad esempio, per scegliere come target i browser downstream nell'ambito di Baseline ampiamente disponibile, specifica baseline widely available with downstream:
"browserslist": "baseline widely available with downstream"
baseline newly available with downstream è un'altra query valida, così come l'aggiunta di with downstream ai target annuali:
"browserslist": "baseline 2024 with downstream"
Esempi di query di base in azione
Negli strumenti di pacchettizzazione
L'utilizzo delle query di base offerte da Browserslist nel tuo progetto può avere un effetto immediato. Babel è un popolare strumento di compilazione per la pacchettizzazione di JavaScript. Se utilizzi le impostazioni predefinite del pacchetto @babel/preset-env, molti metodi e API JavaScript moderni verranno sostituiti con la sintassi più dettagliata richiesta dai browser meno recenti:
Tuttavia, l'utilizzo di una query baseline 2020 per scegliere come target il set di funzionalità 2020 nello stesso progetto di esempio riduce drasticamente le dimensioni dell'output di questo JavaScript, perché sono necessarie meno trasformazioni della sintassi:
Prova tu stesso utilizzando il codice di esempio nel repository baseline-demos di Google Chrome Labs.
In linters
Alcuni linter funzionano già con Browserslist o possono essere resi compatibili con Browserslist utilizzando un modulo di compatibilità. Ad esempio, stylelint può utilizzare una configurazione browserslist utilizzando il modulo stylelint-browser-compat. Imposta il file stylelint.config.js in modo che utilizzi la query di base che preferisci:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
Stylelint ora segnalerà il CSS che attualmente non fa parte di Baseline Widely available:
Stylelint fornisce anche un plug-in che consente di impostare direttamente le regole di base, ma se utilizzi già Browserslist per gestire la configurazione, l'utilizzo delle query di base integrate offerte da Browserslist è una soluzione valida.