Créer des outils de référence avec le package web-features

Jeremy Wagner
Rick Viscomi

Publié le 12 septembre 2025

Les outils émergents pour Baseline vous aident à déterminer quelles fonctionnalités Web peuvent être utilisées en toute sécurité dans vos applications Web aujourd'hui. Ces outils, tels que les linters et les fonctionnalités d'IDE, utilisent une source de données de fonctionnalités de plate-forme Web qui contient des données sur leur compatibilité avec les navigateurs modernes.

Le tableau de bord d'état de la plate-forme Web est une source de données pour ces fonctionnalités et fournit une API HTTP interrogeable. Il n'est pas pratique d'interroger cette source de données à la demande pour tous les outils. Pour de nombreux cas d'utilisation d'outils, le package npm web-features est une version plus fiable et pratique des données sur les fonctionnalités Web que vous utilisez localement. Ce guide vous explique comment utiliser le package web-features pour développer vos propres outils de référence.

Premiers pas avec le package web-features

Commencez par installer le package en tant que dépendance dans votre projet :

npm install web-features

Une fois installé, importez un ou plusieurs exports nommés du package web-features dans votre projet :

import { features, groups, browsers, snapshots } from 'web-features';

Selon vos objectifs, vous n'aurez peut-être pas besoin de toutes ces exportations. Ces exportations fournissent les informations suivantes :

  • features : tableau d'objets, où chaque objet représente une fonctionnalité Web. Il s'agit de l'exportation que vous utiliserez le plus souvent.
  • browsers : tableau d'objets décrivant les navigateurs.
  • groups : tableau d'objets qui définit un regroupement logique de caractéristiques. Elles sont utiles si votre objectif est de cibler un sous-ensemble de fonctionnalités de la plate-forme Web, telles que celles pour CSS, JavaScript et des regroupements plus spécifiques.
  • snapshots : contient les versions ECMAScript des fonctionnalités JavaScript correspondantes, telles que ES2023, ES2022 et d'autres versions ECMAScript.

L'exportation des fonctionnalités fournit les propriétés suivantes pour créer des outils de référence :

  • id : identifiant unique de la fonctionnalité. Par exemple, l'identifiant de CSS Grid est "grid". Remarque : Il ne s'agit pas d'une propriété de l'objet de données. Il s'agit de la clé de l'objet.
  • compat_features : tableau des clés BCD individuelles incluses dans la fonctionnalité.
  • name : chaîne lisible par l'utilisateur du nom de la fonctionnalité, par exemple "Container Queries".
  • description : brève description de la fonctionnalité.
  • group : groupe auquel appartient la caractéristique. Cela correspond aux données de groupe trouvées dans l'exportation groups.
  • baseline : état de référence de la fonctionnalité. Il peut s'agir de l'une des trois valeurs suivantes :
    1. false : l'état de la fonctionnalité est "Disponibilité limitée".
    2. "low : la fonctionnalité est disponible dans la version de référence.
    3. "high : la fonctionnalité est largement disponible dans la configuration de base.
    4. baseline_high_date : date à laquelle la fonctionnalité est devenue largement disponible dans la référence. Remarque : Cette option n'est pas disponible si la fonctionnalité n'est pas largement disponible dans la version de base.
    5. baseline_low_date : date à laquelle la fonctionnalité est devenue disponible dans la version de référence. Remarque : Cette option n'est pas disponible pour les fonctionnalités à disponibilité limitée.

L'exemple suivant est l'objet de données complet pour la fonctionnalité Sous-grille 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"
    }
  }
}

L'exportation groups fournit des données sur les regroupements de fonctionnalités avec la structure suivante :

  • id : identifiant unique du groupe. Par exemple, les fonctionnalités CSS ont un ID"css". Remarque : Il ne s'agit pas d'une propriété de l'objet "groups". Il s'agit de la clé de l'objet lui-même.
  • name : nom lisible du groupe.
  • parent : ID du groupe parent du groupe. Cette option n'est pas disponible si le groupe n'a pas de parent.

Exemples

Les exemples suivants montrent comment utiliser web-features package pour obtenir les données dont vous avez besoin pour créer des outils de référence.

Rechercher l'état de référence d'une fonctionnalité spécifique

import { features } from 'web-features';

function getBaselineStatus (featureId) {
  return features[featureId]?.status.baseline;
}

Cet exemple représente le cas d'utilisation le plus direct pour le package web-features, où vous spécifiez l'ID d'une fonctionnalité pour obtenir ses données de référence disponibles dans la propriété status.baseline. Cette propriété indique si une fonctionnalité est en disponibilité limitée, nouvellement disponible ou largement disponible. Dans les deux derniers cas, vous avez également accès aux dates auxquelles la fonctionnalité a atteint un certain seuil de référence.

Rechercher l'état de référence pour une clé BCD spécifique

BCD signifie browser-compat-data, un projet géré par MDN pour cataloguer la compatibilité des fonctionnalités entre les navigateurs. Une clé BCD correspond à une fonctionnalité précise, comme une valeur de propriété CSS spécifique ou une sous-fonctionnalité comportementale définie par la spécification.

Le projet web-features regroupe les clés BCD associées dans le tableau compat_features pour chaque fonctionnalité. Il peut arriver que vous ayez besoin de l'état de référence d'une clé BCD, plutôt que de l'état de référence global pour l'ensemble de la fonctionnalité. Par exemple, si vous créez un linter CSS et que vous devez savoir si une paire propriété-valeur est compatible avec les principaux navigateurs, les données au niveau des fonctionnalités sont trop générales. Cela se produit parce que le package agrège chaque fonctionnalité sur toutes ses clés BCD constitutives, et que certaines clés sont mieux prises en charge par les navigateurs que d'autres.

Pour rechercher l'état de référence d'une clé BCD, inspectez la propriété status.by_compat_key de l'objet de fonctionnalité (disponible dans web-features 3.6.0 et versions ultérieures) :

import { features } from 'web-features';

function getBaselineStatus (featureId, bcdKey) {
  return features[featureId]?.status.by_compat_key[bcdKey];
}

Par exemple, le résultat de getBaselineStatus('outline', 'css.properties.outline') est le suivant :

{
  "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"
  }
}

Trier les fonctionnalités par état de référence

Cet exemple parcourt chaque fonctionnalité de l'objet "features" et les trie dans un tableau en fonction de leur état de référence.

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;
});

Cet exemple montre comment utiliser la propriété status.baseline dans vos outils. Par exemple, vous pouvez utiliser cette approche dans une application Web pour afficher la liste de toutes les fonctionnalités Web en fonction de leur état de référence.

Rechercher toutes les caractéristiques d'un groupe

Jusqu'à présent, tous les exemples présentés utilisent l'exportation features, mais l'exportation groups organise toutes les caractéristiques de manière logique dans des groupes. Cela signifie que vous pouvez, par exemple, trouver toutes les fonctionnalités qui font partie des transitions de vue :

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'intersection entre les exportations features et group vous permet d'affiner votre recherche de fonctionnalités Web par groupe d'appartenance.

Synthèse

Vous pouvez utiliser les recherches pour créer des outils utiles, par exemple un linter CSS.

Les linters CSS évaluent les règles @, les pseudo-éléments, les propriétés et les paires propriété-valeur. Pour votre linter de référence, recherchez l'état de chaque jeton par sa clé BCD, et non par sa fonctionnalité parente.

Un analyseur tel que CSSTree tokenise le CSS, en décomposant une feuille de style en un arbre syntaxique abstrait (AST). L'exemple suivant montre une règle CSS qui utilise un sélecteur de classe générique et une déclaration de style :

.foo {
  word-break: auto-phrase;
}

L'AST se présenterait comme suit :

{
  "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"
                }
              ]
            }
          }
        ]
      }
    }
  ]
}

Lorsque vous trouvez une déclaration de propriété en parcourant l'AST, mappez ce nom de propriété à sa clé BCD correspondante pour vérifier son état de référence. BCD catégorise les propriétés CSS sous l'objet css.properties. La clé BCD correspondante est donc css.properties.word-break.

Ensuite, recherchez la fonctionnalité associée à cette clé BCD et consultez son état.

// 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];

L'état de référence de la propriété word-break est le suivant :

{
  "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"
  }
}

L'état de référence "high" indique que la propriété est largement disponible. Votre outil lint n'a donc pas besoin d'émettre d'avertissement. Ensuite, examinez la valeur de la propriété.

L'AST indique que la valeur de cette propriété est auto-phrase. Pour obtenir la clé BCD correspondante, ajoutez la valeur à la clé BCD de la propriété parente : css.properties.word-break.auto-phrase.

Dans ce cas, web-features indique que l'état de la paire propriété-valeur word-break: auto-phrase n'est pas "Baseline" :

{
  "baseline": false,
  "support": {
    "chrome": "119",
    "chrome_android": "119",
    "edge": "119"
  }
}

Utilisez les informations de cet exemple de linter pour avertir le développeur que cette paire propriété-valeur n'est pas conforme à la référence. Cet avertissement permet de s'assurer que le développeur sait que cela ne fonctionnera pas comme prévu sur les principaux moteurs de navigateur.

Exemples concrets

Les exemples précédents montrent des utilisations de base du package web-features. De nombreux outils exploitent déjà ces données. Exemple :

Il existe d'autres exemples d'utilisation de cette source de données pour créer des outils de référence. Nous espérons que votre projet en fera partie !