Data di pubblicazione: 12 settembre 2025
Gli strumenti emergenti per Baseline ti aiutano a determinare quali funzionalità web sono sicure da utilizzare oggi nelle tue applicazioni web. Questi strumenti, come i linter e le funzionalità IDE, utilizzano un'origine dati delle funzionalità della piattaforma web che contiene dati sul loro supporto nei browser moderni.
La dashboard dello stato della piattaforma web è una fonte di dati per queste funzionalità e fornisce un'API HTTP interrogabile. L'esecuzione di query su questa origine dati on demand non è pratica per tutti gli strumenti. Per molti casi d'uso degli strumenti, il pacchetto npm è una versione più affidabile e pratica dei dati delle funzionalità web che utilizzi localmente.web-features Questa guida ti mostrerà come utilizzare il pacchetto web-features per sviluppare i tuoi strumenti di base.
Inizia a utilizzare il pacchetto web-features
Innanzitutto, installa il pacchetto come dipendenza nel progetto:
npm install web-features
Una volta installato, importa una o più esportazioni denominate dal pacchetto web-features nel tuo progetto:
import { features, groups, browsers, snapshots } from 'web-features';
A seconda dei tuoi obiettivi, potresti non aver bisogno di tutte queste esportazioni. Queste esportazioni forniscono le seguenti informazioni:
features: un array di oggetti, in cui ogni oggetto rappresenta una funzionalità web. Si tratta dell'esportazione che utilizzerai più spesso.browsers: un array di oggetti che descrivono i browser.groups: un array di oggetti che definisce un raggruppamento logico di funzionalità. Sono utili se il tuo obiettivo è scegliere come target un sottoinsieme di funzionalità della piattaforma web, ad esempio quelle per CSS, JavaScript e raggruppamenti più specifici.snapshots: contiene le versioni ECMAScript delle funzionalità JavaScript corrispondenti, ad esempio ES2023, ES2022 e altre versioni ECMAScript.
L'esportazione delle funzionalità fornisce le seguenti proprietà per la creazione di strumenti di base:
id: l'identificatore univoco della funzionalità. Ad esempio, l'identificatore per CSS Grid è"grid". Nota: questa non è una proprietà all'interno dell'oggetto dati. È la chiave dell'oggetto.compat_features: un array di singole chiavi BCD incluse nella funzionalità.name: La stringa leggibile del nome della funzionalità, ad esempio"Container Queries".description: una breve descrizione della funzionalità.group: il gruppo a cui appartiene la funzionalità. Corrisponde ai dati del gruppo trovati nell'esportazionegroups.baseline: lo stato di base della funzionalità. Può avere uno dei seguenti tre valori:false: Lo stato della funzionalità è Disponibilità limitata."low": la funzionalità è disponibile di recente nella baseline."high": La funzionalità è ampiamente disponibile nella baseline.baseline_high_date: la data in cui la funzionalità è diventata disponibile a livello generale nella base di riferimento. Nota: questa opzione non è disponibile se la funzionalità non è ampiamente disponibile nella baseline.baseline_low_date: la data in cui la funzionalità è diventata disponibile nella baseline. Nota: questa opzione non è disponibile per le funzionalità a disponibilità limitata.
L'esempio seguente mostra l'oggetto dati completo per la funzionalità CSS subgrid:
"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"
}
}
}
L'esportazione groups fornisce dati sui raggruppamenti di funzionalità con la seguente struttura:
id: l'identificatore univoco del gruppo. Ad esempio, le funzionalità CSS hanno un ID"css". Nota:questa non è una proprietà all'interno dell'oggetto gruppi. È la chiave dell'oggetto stesso.name: Il nome del gruppo leggibile da una persona.parent: l'ID del gruppo principale del gruppo. Questa opzione non è disponibile se il gruppo non ha un gruppo principale.
Esempi
Gli esempi riportati di seguito mostrano come utilizzare web-features package per ottenere i dati necessari per creare gli strumenti di base.
Cercare lo stato di Baseline per una funzionalità specifica
import { features } from 'web-features';
function getBaselineStatus (featureId) {
return features[featureId]?.status.baseline;
}
Questo esempio rappresenta il caso d'uso più diretto per il pacchetto web-features, in cui specifichi l'ID di una funzionalità per ottenere i relativi dati di base disponibili nella proprietà status.baseline. Questa proprietà indica se una funzionalità è a disponibilità limitata, appena disponibile o ampiamente disponibile. Negli ultimi due casi, hai anche accesso alle date che descrivono quando la funzionalità ha raggiunto una determinata soglia di base.
Cercare lo stato di base per una chiave BCD specifica
BCD sta per browser-compat-data, un progetto gestito da MDN per catalogare il supporto delle funzionalità nei vari browser. Una chiave BCD corrisponde a una funzionalità granulare, come un valore specifico della proprietà CSS o una funzionalità secondaria comportamentale definita dalla specifica.
I gruppi di progetti web-features raggruppano le chiavi BCD correlate nell'array compat_features per ogni funzionalità. A volte hai bisogno dello stato di base di una chiave BCD, anziché dello stato di base complessivo dell'intera funzionalità. Ad esempio, se crei un linter CSS e devi sapere se una coppia proprietà-valore è compatibile con i principali browser, i dati a livello di funzionalità sono troppo generici. Ciò accade perché il pacchetto aggrega ogni funzionalità in tutte le chiavi BCD costituenti e alcune chiavi hanno un supporto del browser migliore rispetto ad altre.
Per cercare lo stato di base di una chiave BCD, esamina la proprietà status.by_compat_key dell'oggetto funzionalità (disponibile in web-features 3.6.0 e versioni successive):
import { features } from 'web-features';
function getBaselineStatus (featureId, bcdKey) {
return features[featureId]?.status.by_compat_key[bcdKey];
}
Ad esempio, l'output di getBaselineStatus('outline', 'css.properties.outline') è:
{
"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"
}
}
Ordinare le funzionalità in base al loro stato di base
Questo esempio scorre ogni funzionalità nell'oggetto delle funzionalità e le ordina in un array in base al relativo stato di base.
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;
});
Questo esempio illustra come utilizzare la proprietà status.baseline nei tuoi strumenti. Ad esempio, puoi utilizzare questo approccio in un'applicazione web per visualizzare un elenco di tutte le funzionalità web in base al loro stato di base.
Trovare tutte le funzionalità all'interno di un gruppo
Finora, tutti gli esempi mostrati utilizzano l'esportazione features, ma l'esportazione groups organizza tutte le funzionalità in modo logico all'interno dei gruppi. Ciò significa che potresti, ad esempio, trovare tutte le funzionalità che fanno parte delle transizioni di visualizzazione:
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;
});
L'intersezione tra le esportazioni features e group ti consente di restringere la ricerca delle funzionalità web in base al gruppo a cui appartengono.
Elaborazione della risposta…
Puoi utilizzare le ricerche per creare strumenti utili, ad esempio per creare un linter CSS.
I linter CSS valutano le regole at, gli pseudo-elementi, le proprietà e le coppie proprietà-valore. Per il linter di base, cerca lo stato di ogni token in base alla chiave BCD, non in base alla funzionalità principale.
Un analizzatore sintattico come CSSTree tokenizza il CSS, suddividendo un foglio di stile in un albero della sintassi astratta (AST). L'esempio seguente mostra una regola CSS che utilizza un selettore di classe generico e una dichiarazione di stile:
.foo {
word-break: auto-phrase;
}
L'AST avrà un aspetto simile a questo:
{
"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"
}
]
}
}
]
}
}
]
}
Quando trovi una dichiarazione di proprietà mentre esamini l'AST, mappa il nome della proprietà alla chiave BCD corrispondente per verificarne lo stato di base. BCD classifica le proprietà CSS nell'oggetto css.properties, quindi la chiave BCD corrispondente è css.properties.word-break.
Poi, trova la funzionalità associata a quella chiave BCD e controllane lo stato.
// 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];
Lo stato di base per la proprietà word-break è il seguente:
{
"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"
}
}
Lo "high"stato di base indica che la proprietà è ampiamente disponibile, quindi il linter non deve emettere un avviso. Dopodiché, esamina il valore della proprietà.
L'AST mostra che il valore di questa proprietà è auto-phrase. Per ottenere la chiave BCD corrispondente, aggiungi il valore alla chiave BCD della proprietà principale: css.properties.word-break.auto-phrase.
In questo caso, web-features mostra che lo stato della coppia proprietà-valore word-break: auto-phrase non è Baseline:
{
"baseline": false,
"support": {
"chrome": "119",
"chrome_android": "119",
"edge": "119"
}
}
Utilizza le informazioni in questo esempio di linter per avvisare lo sviluppatore che questa coppia proprietà-valore non è di base. Questo avviso garantisce che lo sviluppatore sappia che non funzionerà come previsto nei principali motori del browser.
Esempi reali
Gli esempi precedenti mostrano gli utilizzi di base del pacchetto web-features. Esistono già diversi strumenti che sfruttano questi dati. Ad esempio:
eslint-cssutilizza il pacchettoweb-featuresnella suause-baselineregola per il controllo di specifiche funzionalità.- Le schede al passaggio del mouse in Visual Studio Code utilizzano il pacchetto
web-featuresper mostrare le informazioni di base per le funzionalità CSS e le funzionalità HTML. - MDN utilizza i dati
web-featuresnei banner della maggior parte delle pagine delle funzionalità (ad esempio,abs()) per comunicare il loro stato di Baseline.
Esistono altri esempi di come questa origine dati può essere utilizzata per creare strumenti di base e ci auguriamo che il tuo progetto diventi uno di questi.