Veröffentlicht: 12. September 2025
Mit den neuen Tools für Baseline können Sie ermitteln, welche Webfunktionen heute in Ihren Webanwendungen sicher verwendet werden können. Diese Tools, z. B. Linter und IDE-Funktionen, verwenden eine Datenquelle mit Webplattformfunktionen, die Daten zur Unterstützung in modernen Browsern enthält.
Das Web Platform Status Dashboard ist eine Datenquelle für diese Funktionen und bietet eine abfragbare HTTP-API. Das Abfragen dieser Datenquelle auf Abruf ist nicht für alle Tools praktikabel. Für viele Anwendungsfälle ist das web-features-npm-Paket eine zuverlässigere und praktischere Version von Webfunktionen-Daten, die Sie lokal verwenden. In diesem Leitfaden erfahren Sie, wie Sie das web-features-Paket verwenden, um eigene Baseline-Tools zu entwickeln.
Erste Schritte mit dem web-features-Paket
Installieren Sie das Paket zuerst als Abhängigkeit in Ihrem Projekt:
npm install web-features
Nach der Installation importieren Sie einen oder mehrere benannte Exporte aus dem web-features-Paket in Ihr Projekt:
import { features, groups, browsers, snapshots } from 'web-features';
Je nach Ihren Zielen benötigen Sie möglicherweise nicht alle diese Exporte. Diese Exporte enthalten die folgenden Informationen:
features: Ein Array von Objekten, wobei jedes Objekt ein Web-Feature darstellt. Diesen Export werden Sie am häufigsten verwenden.browsers: Ein Array von Objekten, die Browser beschreiben.groups: Ein Array von Objekten, das eine logische Gruppierung von Features definiert. Diese sind nützlich, wenn Sie auf eine Teilmenge von Webplattformfunktionen abzielen, z. B. für CSS, JavaScript und spezifischere Gruppierungen.snapshots: Enthält die ECMAScript-Versionen der entsprechenden JavaScript-Funktionen, z. B. ES2023, ES2022 und andere ECMAScript-Versionen.
Der Export von Funktionen bietet die folgenden Eigenschaften zum Erstellen von Baseline-Tools:
id: Die eindeutige Kennung für das Feature. Die Kennung für CSS Grid ist beispielsweise"grid". Hinweis: Dies ist kein Attribut im Datenobjekt. Das ist der Objektschlüssel.compat_features: Ein Array mit einzelnen BCD-Schlüsseln, die im Feature enthalten sind.name: Der für Menschen lesbare String des Namens des Features, z. B."Container Queries".description: Eine kurze Beschreibung der Funktion.group: Die Gruppe, zu der das Feature gehört. Das entspricht den Gruppendaten imgroups-Export.baseline: Der Baseline-Status des Features. Dies kann einer von drei Werten sein:false: Der Status des Features ist „Eingeschränkte Verfügbarkeit“."low: Die Funktion ist neu in Baseline verfügbar."high: Das Feature ist weitgehend verfügbar.baseline_high_date: Das Datum, an dem das Feature allgemein verfügbar wurde. Hinweis: Diese Option ist nicht verfügbar, wenn die Funktion nicht „Baseline Widely available“ ist.baseline_low_date: Das Datum, an dem das Feature als „Baseline Newly available“ (Neu verfügbar) gekennzeichnet wurde. Hinweis: Diese Option ist nicht für Funktionen mit eingeschränkter Verfügbarkeit verfügbar.
Das folgende Beispiel zeigt das vollständige Datenobjekt für die Funktion CSS-Unterraster:
"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"
}
}
}
Der groups-Export enthält Daten zu Feature-Gruppierungen mit der folgenden Struktur:
id: Die eindeutige Kennung für die Gruppe. CSS-Funktionen haben beispielsweise die ID „css“. Hinweis:Dies ist kein Attribut des Gruppenobjekts. Es ist der Objektschlüssel selbst.name: Der für Menschen lesbare Name der Gruppe.parent: Die ID der übergeordneten Gruppe der Gruppe. Diese Option ist nicht verfügbar, wenn die Gruppe keine übergeordnete Gruppe hat.
Beispiele
Die folgenden Beispiele zeigen, wie Sie mit web-features package die Daten abrufen, die Sie zum Erstellen von Baseline-Tools benötigen.
Baseline-Status für ein bestimmtes Feature nachschlagen
import { features } from 'web-features';
function getBaselineStatus (featureId) {
return features[featureId]?.status.baseline;
}
Dieses Beispiel stellt den direktesten Anwendungsfall für das web-features-Paket dar. Sie geben die ID eines Features an, um die zugehörigen Baseline-Daten in der status.baseline-Property abzurufen. Diese Eigenschaft gibt an, ob eine Funktion nur eingeschränkt, neu oder allgemein verfügbar ist. In den beiden letztgenannten Fällen haben Sie auch Zugriff auf Datumsangaben, die beschreiben, wann die Funktion einen bestimmten Baseline-Schwellenwert erreicht hat.
Baseline-Status für einen bestimmten BCD-Schlüssel nachschlagen
BCD steht für browser-compat-data, ein von MDN verwaltetes Projekt, in dem die Unterstützung von Funktionen in verschiedenen Browsern katalogisiert wird. Ein BCD-Schlüssel entspricht einem detaillierten Feature, z. B. einem bestimmten CSS-Attributwert oder einem Verhaltens-Subfeature, das durch die Spezifikation definiert wird.
Im web-features-Projekt werden zugehörige BCD-Schlüssel für jede Funktion im compat_features-Array gruppiert. Manchmal benötigen Sie den Baseline-Status eines einzelnen BCD-Schlüssels und nicht den allgemeinen Baseline-Status für die gesamte Funktion. Wenn Sie beispielsweise einen CSS-Linter erstellen und wissen müssen, ob ein Attribut-Wert-Paar in den wichtigsten Browsern kompatibel ist, sind die Daten auf Feature-Ebene zu grob. Das liegt daran, dass das Paket jede Funktion über alle zugehörigen BCD-Schlüssel hinweg aggregiert und einige Schlüssel eine bessere Browserunterstützung haben als andere.
Wenn Sie den Baseline-Status eines BCD-Schlüssels nachschlagen möchten, sehen Sie sich die status.by_compat_key-Eigenschaft des Feature-Objekts an (verfügbar in web-features 3.6.0 und höher):
import { features } from 'web-features';
function getBaselineStatus (featureId, bcdKey) {
return features[featureId]?.status.by_compat_key[bcdKey];
}
Die Ausgabe von getBaselineStatus('outline', 'css.properties.outline') sieht beispielsweise so aus:
{
"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"
}
}
Funktionen nach ihrem Baseline-Status sortieren
In diesem Beispiel wird jedes Attribut im Objekt „features“ durchlaufen und nach seinem Baseline-Status in ein Array sortiert.
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;
});
Dieses Beispiel veranschaulicht, wie Sie in Ihren Tools mit der status.baseline-Property arbeiten. Sie können diesen Ansatz beispielsweise in einer Webanwendung verwenden, um eine Liste aller Webfunktionen nach ihrem Baseline-Status anzuzeigen.
Alle Funktionen in einer Gruppe finden
Bisher wurde in allen Beispielen der features-Export verwendet. Beim groups-Export werden alle Funktionen logisch in Gruppen organisiert. So können Sie beispielsweise alle Funktionen finden, die Teil von View Transitions sind:
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;
});
Durch die Überschneidung der Exporte features und group können Sie Ihre Suche nach Webfunktionen nach der Gruppe eingrenzen, zu der sie gehören.
Zusammenfassung
Sie können die Lookups verwenden, um nützliche Tools zu erstellen, z. B. einen CSS-Linter.
CSS-Linter werten @-Regeln, Pseudoelemente, Eigenschaften und Eigenschafts-Wert-Paare aus. Suchen Sie für Ihren Baseline-Linter den Status jedes Tokens anhand seines BCD-Schlüssels und nicht anhand seines übergeordneten Features nach.
Ein Parser wie CSSTree tokenisiert CSS und zerlegt ein Stylesheet in eine abstrakte Syntaxstruktur (Abstract Syntax Tree, AST). Das folgende Beispiel zeigt eine CSS-Regel, die einen generischen Klassenselektor und eine Stildeklaration verwendet:
.foo {
word-break: auto-phrase;
}
Der AST würde in etwa so aussehen:
{
"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"
}
]
}
}
]
}
}
]
}
Wenn Sie beim Durchlaufen des AST eine Eigenschaftendeklaration finden, ordnen Sie den Eigenschaftennamen dem entsprechenden BCD-Schlüssel zu, um den Baseline-Status zu prüfen. Im BCD werden CSS-Eigenschaften unter dem Objekt css.properties kategorisiert. Der entsprechende BCD-Schlüssel ist also css.properties.word-break.
Suchen Sie dann nach der Funktion, die mit diesem BCD-Schlüssel verknüpft ist, und sehen Sie sich ihren Status an.
// 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];
Der Baseline-Status für das Attribut word-break ist wie folgt:
{
"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"
}
}
Der "high"-Baselinestatus gibt an, dass die Eigenschaft weitgehend verfügbar ist. Ihr Linter muss also keine Warnung ausgeben. Prüfen Sie als Nächstes den Wert des Attributs.
Der AST zeigt, dass der Wert dieses Attributs auto-phrase ist. Wenn Sie den entsprechenden BCD-Schlüssel abrufen möchten, fügen Sie den Wert dem BCD-Schlüssel der übergeordneten Eigenschaft hinzu: css.properties.word-break.auto-phrase.
In diesem Fall zeigt web-features an, dass der Status des Paars aus Attribut und Wert word-break: auto-phrase nicht „Baseline“ ist:
{
"baseline": false,
"support": {
"chrome": "119",
"chrome_android": "119",
"edge": "119"
}
}
Verwenden Sie die Informationen in diesem Linter-Beispiel, um den Entwickler zu warnen, dass dieses Attribut-Wert-Paar nicht Baseline ist. Diese Warnung soll Entwickler darauf hinweisen, dass die Funktion in den wichtigsten Browser-Engines nicht wie erwartet funktioniert.
Beispiele aus der Praxis
In den vorherigen Beispielen wird die grundlegende Verwendung des web-features-Pakets gezeigt. Es gibt bereits eine Reihe von Tools, die diese Daten nutzen. Beispiel:
eslint-cssverwendet dasweb-features-Paket in seineruse-baseline-Regel, um nach bestimmten Funktionen zu suchen.- Die Hovercards in Visual Studio Code verwenden das
web-features-Paket, um Baseline-Informationen für CSS-Funktionen und HTML-Funktionen anzuzeigen. - Auf MDN werden die
web-features-Daten in den Bannern auf den meisten Funktionsseiten (z. B.abs()) verwendet, um den Baseline-Status zu kommunizieren.
Es gibt noch weitere Beispiele dafür, wie diese Datenquelle zum Erstellen von Baseline-Tools verwendet werden kann. Wir hoffen, dass Ihr Projekt eines davon wird.