Opublikowano: 12 września 2025 r.
Nowe narzędzia do Baseline pomagają określić, które funkcje internetowe można bezpiecznie stosować w aplikacjach internetowych. Te narzędzia, takie jak lintery i funkcje IDE, korzystają ze źródła danych funkcji platformy internetowej, które zawiera informacje o ich obsłudze w nowoczesnych przeglądarkach.
Panel stanu platformy internetowej to jedno ze źródeł danych dotyczących tych funkcji. Udostępnia on interfejs API HTTP, do którego można wysyłać zapytania. Wysyłanie zapytań do tego źródła danych na żądanie nie jest praktyczne w przypadku wszystkich narzędzi. W wielu przypadkach użycia narzędzi web-featurespakiet npm jest bardziej niezawodną i praktyczną wersją danych o funkcjach internetowych, z której możesz korzystać lokalnie. Z tego przewodnika dowiesz się, jak używać pakietu web-features do tworzenia własnych narzędzi Baseline.
Wprowadzenie do pakietu web-features
Najpierw zainstaluj pakiet jako zależność w projekcie:
npm install web-features
Po zainstalowaniu zaimportuj do projektu co najmniej 1 eksport o nazwie z pakietu web-features:
import { features, groups, browsers, snapshots } from 'web-features';
W zależności od celów nie wszystkie te eksporty mogą być potrzebne. Wyeksportowane dane zawierają te informacje:
features: tablica obiektów, z których każdy reprezentuje funkcję internetową. Jest to eksport, z którego będziesz korzystać najczęściej.browsers: tablica obiektów opisujących przeglądarki.groups: tablica obiektów, która definiuje logiczne grupowanie funkcji. Są one przydatne, jeśli chcesz kierować reklamy na podzbiór funkcji platformy internetowej, np. funkcji CSS, JavaScriptu i bardziej szczegółowych grup.snapshots: zawiera wersje ECMAScript odpowiednich funkcji JavaScriptu, np. ES2023, ES2022 i inne wersje ECMAScript.
Eksportowanie funkcji udostępnia te właściwości do tworzenia narzędzi podstawowych:
id: unikalny identyfikator funkcji. Na przykład identyfikator CSS Grid to"grid". Uwaga: nie jest to właściwość w obiekcie danych. To klucz obiektu.compat_features: tablica poszczególnych kluczy BCD uwzględnionych w funkcji.name: ciąg znaków z nazwą funkcji, np."Container Queries".description: Krótki opis funkcji.group: grupa, do której należy funkcja. Odpowiada to danym grupy znajdującym się w eksportowanym plikugroups.baseline: stan funkcji w wersji podstawowej. Może to być jedna z 3 wartości:false: stan funkcji to Ograniczona dostępność."low: funkcja jest nowo dostępna w Baseline."high„: ta funkcja jest powszechnie dostępna w wersji podstawowej.baseline_high_date: data, od której funkcja jest powszechnie dostępna w ramach punktu odniesienia. Uwaga: ta opcja jest niedostępna, jeśli funkcja nie jest powszechnie dostępna w wersji podstawowej.baseline_low_date: data, od której funkcja jest dostępna w ramach Baseline Newly available. Uwaga: ta opcja nie jest dostępna w przypadku funkcji o ograniczonej dostępności.
Poniżej znajdziesz pełny obiekt danych funkcji podsiatki CSS:
"subgrid": {
"caniuse": "css-subgrid",
"compat_features": [
"css.properties.grid-template-columns.subgrid",
"css.properties.grid-template-rows.subgrid"
],
"description": "The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.",
"description_html": "The <code>subgrid</code> value for the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties allows a grid item to inherit the grid definition of its parent grid container.",
"group": "grid",
"name": "Subgrid",
"spec": "https://drafts.csswg.org/css-grid-2/#subgrids",
"status": {
"baseline": "low",
"baseline_low_date": "2023-09-15",
"support": {
"chrome": "117",
"chrome_android": "117",
"edge": "117",
"firefox": "71",
"firefox_android": "79",
"safari": "16",
"safari_ios": "16"
}
}
}
Eksport groups zawiera dane o grupach funkcji o następującej strukturze:
id: unikalny identyfikator grupy. Na przykład funkcje usługi porównywania cen mają identyfikator „css”. Uwaga: nie jest to właściwość w obiekcie grup. Jest to klucz obiektu.name: czytelna dla użytkownika nazwa grupy.parent: identyfikator grupy nadrzędnej grupy. Ta opcja jest niedostępna, jeśli grupa nie ma grupy nadrzędnej.
Przykłady
Poniższe przykłady pokazują, jak używać web-features package, aby uzyskać dane potrzebne do utworzenia narzędzi Baseline.
Sprawdzanie stanu linii bazowej dla określonej funkcji
import { features } from 'web-features';
function getBaselineStatus (featureId) {
return features[featureId]?.status.baseline;
}
Ten przykład przedstawia najbardziej bezpośredni przypadek użycia pakietu web-features, w którym określasz identyfikator funkcji, aby uzyskać jej dane podstawowe dostępne we właściwości status.baseline. Ta właściwość informuje, czy funkcja jest dostępna w ograniczonym zakresie, nowo dostępna czy powszechnie dostępna. W 2 ostatnich przypadkach masz też dostęp do dat, które opisują, kiedy funkcja osiągnęła określony próg podstawowy.
Sprawdzanie stanu linii bazowej dla określonego klucza BCD
BCD to skrót od browser-compat-data, czyli projektu prowadzonego przez MDN, który kataloguje obsługę funkcji w różnych przeglądarkach. Klucz BCD odpowiada szczegółowej funkcji, np. konkretnej wartości właściwości CSS lub podfunkcji behawioralnej zdefiniowanej przez specyfikację.
web-features projekt grupuje powiązane klucze BCD w compat_features tablicy dla każdej funkcji. Czasami potrzebujesz stanu podstawowego jednego klucza BCD, a nie ogólnego stanu podstawowego całej funkcji. Jeśli na przykład tworzysz narzędzie do sprawdzania składni CSS i musisz wiedzieć, czy para właściwość-wartość jest zgodna z głównymi przeglądarkami, dane na poziomie funkcji są zbyt ogólne. Dzieje się tak, ponieważ pakiet agreguje każdą funkcję we wszystkich kluczach BCD, z których się składa, a niektóre klucze mają lepszą obsługę w przeglądarkach niż inne.
Aby sprawdzić stan podstawowy klucza BCD, sprawdź właściwość status.by_compat_key obiektu funkcji (dostępną w web-features 3.6.0 i nowszych wersjach):
import { features } from 'web-features';
function getBaselineStatus (featureId, bcdKey) {
return features[featureId]?.status.by_compat_key[bcdKey];
}
Na przykład dane wyjściowe funkcji getBaselineStatus('outline', 'css.properties.outline') to:
{
"baseline": "low",
"baseline_low_date": "2023-03-27",
"support": {
"chrome": "94",
"chrome_android": "94",
"edge": "94",
"firefox": "88",
"firefox_android": "88",
"safari": "16.4",
"safari_ios": "16.4"
}
}
Sortowanie funkcji według stanu Baseline
W tym przykładzie iterujemy po każdej funkcji w obiekcie funkcji i sortujemy każdą z nich w tablicy według jej stanu linii bazowej.
import { features } from "web-features";
const webFeatures = Object.values(features);
const widelyAvailable = webFeatures.filter(feature => {
return feature.status.baseline === 'high';
});
const newlyAvailable = webFeatures.filter(feature => {
return feature.status.baseline === 'low';
});
const limitedAvailability = webFeatures.filter(feature => {
return feature.status.baseline === false;
});
Ten przykład pokazuje, jak korzystać z właściwości status.baseline w narzędziach. Możesz na przykład użyć tego podejścia w aplikacji internetowej, aby wyświetlić listę wszystkich funkcji internetowych według ich stanu w Baseline.
Znajdowanie wszystkich funkcji w grupie
Wszystkie dotychczasowe przykłady korzystają z eksportu features, ale eksport groups porządkuje wszystkie funkcje logicznie w grupach. Oznacza to, że możesz na przykład znaleźć wszystkie funkcje, które są częścią przejść widoku:
import { features, groups } from 'web-features';
const groupKeys = Object.keys(groups);
const featuresData = Object.values(features);
const viewTransitionsGroup = groupKeys.find(groupKey => {
return groupKey === 'view-transitions';
});
const viewTransitionsFeatures = featuresData.filter(feature => {
return feature.group === viewTransitionsGroup;
});
Przecięcie eksportów features i group pozwala zawęzić wyszukiwanie funkcji internetowych według grupy, do której należą.
Łączę wszystko w całość
Możesz używać wyszukiwań do tworzenia przydatnych narzędzi, np. narzędzia do sprawdzania składni CSS.
Linters CSS oceniają reguły @, pseudoelementy, właściwości i pary właściwość-wartość. W przypadku narzędzia Baseline Linter sprawdź stan każdego tokena według jego klucza BCD, a nie według funkcji nadrzędnej.
Parser, taki jak CSSTree, tokenizuje CSS, dzieląc arkusz stylów na abstrakcyjne drzewo składniowe (AST). Ten przykład pokazuje regułę CSS, która używa selektora klasy ogólnej i deklaracji stylu:
.foo {
word-break: auto-phrase;
}
AST będzie wyglądać mniej więcej tak:
{
"type": "StyleSheet",
"children": [
{
"type": "Rule",
"prelude": {
"type": "SelectorList",
"children": [
{
"type": "Selector",
"children": [
{
"type": "ClassSelector",
"name": "foo"
}
]
}
]
},
"block": {
"type": "Block",
"children": [
{
"type": "Declaration",
"important": false,
"property": "word-break",
"value": {
"type": "Value",
"children": [
{
"type": "Identifier",
"name": "auto-phrase"
}
]
}
}
]
}
}
]
}
Gdy podczas przechodzenia przez AST znajdziesz deklarację właściwości, zmapuj nazwę tej właściwości na odpowiedni klucz BCD, aby sprawdzić jej stan w Baseline. BCD kategoryzuje właściwości CSS w obiekcie css.properties, więc odpowiedni klucz BCD to css.properties.word-break.
Następnie znajdź funkcję powiązaną z tym kluczem BCD i sprawdź jej stan.
// Assuming we only know the BCD key and not the feature ID.
const bcdKey = 'css.properties.word-break';
const [featureId, feature] = Object.entries(features).find(([id, feature]) =>
feature.compat_features?.includes(bcdKey)
) || [];
const status = feature?.status.by_compat_key[bcdKey];
Stan podstawowy usługi word-break jest następujący:
{
"baseline": "high",
"baseline_high_date": "2018-03-30",
"baseline_low_date": "2015-09-30",
"support": {
"chrome": "44",
"chrome_android": "44",
"edge": "12",
"firefox": "15",
"firefox_android": "15",
"safari": "9",
"safari_ios": "9"
}
}
"high" Stan podstawowy oznacza, że właściwość jest powszechnie dostępna, więc linter nie musi wyświetlać ostrzeżenia. Następnie sprawdź wartość właściwości.
AST pokazuje, że wartość tej właściwości to auto-phrase. Aby uzyskać odpowiedni klucz BCD, dodaj wartość do klucza BCD właściwości nadrzędnej: css.properties.word-break.auto-phrase.
W tym przypadku symbol web-features oznacza, że stan pary właściwość-wartość word-break: auto-phrase nie jest stanem podstawowym:
{
"baseline": false,
"support": {
"chrome": "119",
"chrome_android": "119",
"edge": "119"
}
}
Użyj informacji z tego przykładu narzędzia do sprawdzania kodu, aby ostrzec programistę, że ta para właściwość-wartość nie jest zgodna z Baseline. To ostrzeżenie ma na celu poinformowanie dewelopera, że w przypadku głównych silników przeglądarek nie będzie działać zgodnie z oczekiwaniami.
Przykłady z życia
Poprzednie przykłady pokazują podstawowe zastosowania pakietu web-features. Istnieje już wiele narzędzi, które wykorzystują te dane. Na przykład:
eslint-cssużywa pakietuweb-featuresw swojejuse-baselineregule, aby sprawdzać określone funkcje.- Karty najazdowe w Visual Studio Code korzystają z pakietu
web-features, aby wyświetlać informacje o funkcjach CSS i HTML. - MDN używa
web-featuresdanych w banerach na większości stron funkcji (np.abs()), aby informować o ich stanie Baseline.
Istnieje więcej przykładów tego, jak można wykorzystać to źródło danych do tworzenia narzędzi Baseline. Mamy nadzieję, że Twój projekt będzie jednym z nich.