Opublikowano: 7 maja 2025 r., ostatnia aktualizacja: 17 września 2025 r.
Browserslist to jedno z najpopularniejszych narzędzi do konfigurowania minimalnych obsługiwanych wersji przeglądarek w bazach kodu frontendu. Deweloperzy dodają zapytanie browserslist do pliku package.json (lub innego punktu konfiguracji listy przeglądarek, np. pliku .browserslistrc), a lista przeglądarek udostępnia listę minimalnych obsługiwanych przeglądarek. Browserslist może być używany z wieloma popularnymi narzędziami do lintowania, uzupełniania i pakowania, w tym:
- Autoprefixer
- Babel przy użyciu
@babel/preset-env - PostCSS za pomocą
postcss-preset-env - ESLint przy użyciu
eslint-plugin-compat - Stylelint przy użyciu
stylelint-no-unsupported-browser-features - webpack
Cele odniesienia
Jeśli zdecydujesz się na korzystanie z Baseline, musisz wziąć pod uwagę swoją bazę użytkowników i określić, na który zestaw funkcji Baseline chcesz kierować reklamy:
- Baseline Widely available obejmuje wszystkie funkcje internetowe, które były w pełni obsługiwane przez podstawowy zestaw przeglądarek Baseline co najmniej 30 miesięcy temu.
- Zestawy funkcji roku bazowego, np. Baseline 2020, obejmują wszystkie funkcje, które były nowo dostępne na koniec danego roku.
W zależności od bazy użytkowników możesz kierować reklamy na profil podstawowy „Szeroko dostępne” lub na starszy profil podstawowy. Sprawdź narzędzia analityczne lub RUM, aby dowiedzieć się, z jakich wersji przeglądarek korzystają Twoi użytkownicy.
Jak kierować reklamy na urządzenia z Androidem w wersji podstawowej, które są nowo dostępne lub powszechnie dostępne
Obsługa Baseline jest wbudowana w Browserslist za pomocą kilku różnych zapytań. Jeśli chcesz kierować reklamy na przeglądarki Baseline Newly available, w konfiguracji Browserslist spróbuj określić baseline newly available:
{
...
"browserslist": [
"baseline newly available"
]
...
}
Możesz też określić baseline widely available jako zapytanie:
{
...
"browserslist": [
"baseline widely available"
]
...
}
Jak kierować reklamy na lata bazowe
Jeśli chcesz kierować reklamy na zestaw funkcji roku bazowego, w zapytaniu podaj rok, np. baseline 2024, jeśli chcesz kierować reklamy na zestaw funkcji z 2024 roku:
"browserslist": "baseline 2024"
Możesz określić lata od baseline 2015 do bieżącego roku.
Jak określić przeglądarki podrzędne
Podstawowy zestaw przeglądarek obejmuje Chrome, Edge, Firefox i Safari. Inne przeglądarki są oparte na tym samym kodzie open source co Chrome i Edge, czyli Chromium, i powinny obsługiwać ten sam zestaw funkcji co wersja Chromium, z której korzystają. Aby uwzględnić te przeglądarki w konfiguracji podstawowej, dodaj with downstream po zapytaniu dotyczącym konfiguracji podstawowej. Jeśli na przykład chcesz kierować reklamy na przeglądarki odbierające w ramach funkcji Baseline Widely available, wpisz baseline widely available with downstream:
"browserslist": "baseline widely available with downstream"
baseline newly available with downstream to kolejne prawidłowe zapytanie. Możesz też dodać with downstream do celów rocznych:
"browserslist": "baseline 2024 with downstream"
Przykłady zapytań dotyczących grupy bazowej w praktyce
W narzędziach do pakowania
Korzystanie w projekcie z zapytań Baseline oferowanych przez Browserslist może przynieść natychmiastowe efekty. Babel to popularne narzędzie do tworzenia pakietów JavaScript. Jeśli używasz @babel/preset-env domyślnych ustawień pakietu, wiele nowoczesnych interfejsów API i metod JavaScriptu zostanie zastąpionych bardziej rozbudowaną składnią wymaganą przez starsze przeglądarki:
Jednak użycie zapytania baseline 2020 do kierowania na zestaw funkcji z 2020 r. w tym samym przykładowym projekcie znacznie zmniejsza rozmiar wyjściowy tego kodu JavaScript, ponieważ wymaga mniejszej liczby przekształceń składni:
Wypróbuj to na własną rękę, korzystając z przykładowego kodu w repozytorium baseline-demos w Google Chrome Labs.
W linterach
Niektóre programy do sprawdzania kodu już współpracują z Browserslist lub można je do tego przystosować za pomocą modułu zgodności. Na przykład stylelint może używać konfiguracji browserslist za pomocą modułu stylelint-browser-compat. Ustaw plik stylelint.config.js tak, aby używał wybranego zapytania bazowego:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
Stylelint będzie teraz oznaczać CSS, który nie jest obecnie częścią Baseline Widely available:
Stylelint udostępnia też wtyczkę, która umożliwia bezpośrednie ustawianie reguł Baseline, ale jeśli do obsługi konfiguracji używasz już Browserslist, dobrym rozwiązaniem będzie korzystanie z wbudowanych zapytań Baseline oferowanych przez tę bibliotekę.