Veröffentlicht: 7. Mai 2025, zuletzt aktualisiert: 17. September 2025
Browserslist ist eines der beliebtesten Tools zum Konfigurieren der mindestens unterstützten Browserversionen in Frontend-Codebases. Entwickler fügen ihrer package.json-Datei (oder einem anderen Konfigurationspunkt für Browserslist, z. B. einer .browserslistrc-Datei) eine browserslist-Abfrage hinzu. Browserslist gibt dann eine Liste der mindestens unterstützten Browser aus. Browserslist kann mit einer Vielzahl beliebter Linting-, Polyfilling- und Packaging-Tools verwendet werden, darunter:
- Autoprefixer
- Babel mit
@babel/preset-env - PostCSS mit
postcss-preset-env - ESLint mit
eslint-plugin-compat - Stylelint mit
stylelint-no-unsupported-browser-features - webpack
Referenzziele
Wenn Sie sich für Baseline entscheiden, sollten Sie Ihre Nutzerbasis berücksichtigen und festlegen, welche Baseline-Funktionen Sie verwenden möchten:
- Baseline Widely available umfasst alle Webfunktionen, die vor mindestens 30 Monaten vollständig von der Baseline-Kernbrowsergruppe unterstützt wurden.
- Die Funktionsgruppen für das Basisjahr, z. B. Baseline 2020, enthalten alle Funktionen, die am Ende des angegebenen Jahres neu verfügbar waren.
Je nach Nutzerbasis können Sie auf die Baseline „Weit verbreitet“ ausrichten oder müssen ein älteres Baseline-Jahr verwenden. Sehen Sie in Ihren Analyse- oder RUM-Tools nach, welche Browserversionen Ihre Nutzer verwenden.
Baseline-Zielvorhaben ausrichten
Die Unterstützung für Baseline ist durch einige verschiedene Abfragen in Browserslist integriert. Wenn Sie auf Browser abzielen möchten, die neu in der Baseline verfügbar sind, geben Sie baseline newly available in Ihrer Browserslist-Konfiguration an:
{
...
"browserslist": [
"baseline newly available"
]
...
}
Sie können baseline widely available auch als Abfrage angeben:
{
...
"browserslist": [
"baseline widely available"
]
...
}
Baseline-Jahre als Ziel festlegen
Wenn Sie auf eine Baseline-Jahresgruppe von Funktionen ausrichten möchten, geben Sie das Jahr in einer Abfrage an, z. B. baseline 2024, wenn Sie auf die Funktionsgruppe für 2024 ausrichten möchten:
"browserslist": "baseline 2024"
Sie können Jahre von baseline 2015 bis zum aktuellen Jahr angeben.
Downstream-Browser angeben
Die Baseline-Kernbrowser umfassen Chrome, Edge, Firefox und Safari. Andere Browser basieren auf demselben Open-Source-Code wie Chrome und Edge – Chromium – und sollten dieselben Funktionen wie die jeweilige Chromium-Version unterstützen, die sie implementieren. Wenn Sie diese Browser in Ihre Baseline-Konfiguration aufnehmen möchten, fügen Sie with downstream nach Ihrer Baseline-Abfrage hinzu. Wenn Sie beispielsweise Downstream-Browser als Teil von „Baseline – Weit verbreitet“ ausrichten möchten, geben Sie baseline widely available with downstream an:
"browserslist": "baseline widely available with downstream"
baseline newly available with downstream ist eine weitere gültige Abfrage. Das Hinzufügen von with downstream zu Jahreszielen ist ebenfalls möglich:
"browserslist": "baseline 2024 with downstream"
Beispiele für Baseline-Abfragen in der Praxis
In Paketerstellungstools
Die Verwendung der von Browserslist angebotenen Baseline-Abfragen in Ihrem Projekt kann sofortige Auswirkungen haben. Babel ist ein beliebtes Build-Tool zum Verpacken von JavaScript. Wenn Sie die Standardeinstellungen des @babel/preset-env-Pakets verwenden, werden viele moderne JavaScript-APIs und -Methoden durch die ausführlichere Syntax ersetzt, die für ältere Browser erforderlich ist:
Wenn Sie jedoch eine Abfrage von baseline 2020 verwenden, um auf das Feature-Set von 2020 im selben Beispielprojekt auszurichten, wird die Ausgabegröße dieses JavaScript erheblich verringert, da weniger Syntaxumwandlungen erforderlich sind:
Beispielcode im Repository baseline-demos von Google Chrome Labs.
In Lintern
Einige Linter funktionieren bereits mit Browserslist oder können mithilfe eines Kompatibilitätsmoduls für die Verwendung mit Browserslist eingerichtet werden. stylelint kann beispielsweise eine browserslist-Konfiguration mit dem Modul stylelint-browser-compat verwenden. Legen Sie in Ihrer stylelint.config.js-Datei fest, dass die Baseline-Abfrage Ihrer Wahl verwendet werden soll:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
Stylelint kennzeichnet jetzt CSS, das derzeit nicht Teil von Baseline Widely Available ist:
Stylelint bietet auch ein Plug-in, mit dem Sie Baseline-Regeln direkt festlegen können. Wenn Sie jedoch bereits Browserslist für die Konfiguration verwenden, ist die Verwendung der integrierten Baseline-Abfragen von Browserslist eine praktikable Lösung.