Criar ferramentas de referência com o pacote web-features

Jeremy Wagner
Rick Viscomi

Publicado em: 12 de setembro de 2025

As ferramentas emergentes para Baseline ajudam você a determinar quais recursos da Web são seguros para uso nos seus aplicativos da Web hoje. Essas ferramentas, como linters e recursos de IDE, usam uma fonte de dados de recursos da plataforma Web que contém dados sobre o suporte deles em navegadores modernos.

O Painel de status da plataforma da Web é uma fonte de dados para esses recursos e oferece uma API HTTP consultável. Consultar essa fonte de dados sob demanda não é prático para todas as ferramentas. Para muitos casos de uso de ferramentas, o pacote npm web-features é uma versão mais confiável e prática dos dados de recursos da Web que você usa localmente. Este guia mostra como usar o pacote web-features para desenvolver suas próprias ferramentas de referência.

Começar a usar o pacote web-features

Primeiro, instale o pacote como uma dependência no seu projeto:

npm install web-features

Depois de instalado, importe uma ou mais exportações nomeadas do pacote web-features para seu projeto:

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

Dependendo dos seus objetivos, talvez você não precise de todas essas exportações. Essas exportações fornecem as seguintes informações:

  • features: uma matriz de objetos, em que cada objeto representa um recurso da Web. Essa é a exportação que você vai usar com mais frequência.
  • browsers: uma matriz de objetos que descrevem navegadores.
  • groups: uma matriz de objetos que define um agrupamento lógico de recursos. Eles são úteis se você quiser segmentar um subconjunto de recursos da plataforma da Web, como aqueles para CSS, JavaScript e agrupamentos mais específicos.
  • snapshots: contém as versões ECMAScript dos recursos correspondentes do JavaScript, como ES2023, ES2022 e outras versões do ECMAScript.

A exportação de recursos fornece as seguintes propriedades para criar ferramentas de referência:

  • id: o identificador exclusivo do recurso. Por exemplo, o identificador da grade CSS é "grid". Observação: essa não é uma propriedade no objeto de dados. É a chave do objeto.
  • compat_features: uma matriz de chaves BCD individuais incluídas no recurso.
  • name: a string legível por humanos do nome do recurso, como "Container Queries".
  • description: uma breve descrição do recurso.
  • group: o grupo a que o recurso pertence. Isso corresponde aos dados do grupo encontrados na exportação groups.
  • baseline: o status de base do recurso. Pode ser um dos três valores:
    1. false: o status do recurso é "Disponibilidade limitada".
    2. "low": o recurso é "Recém-disponível na linha de base".
    3. "high": o recurso está disponível para todos os usuários.
    4. baseline_high_date: a data em que o recurso ficou disponível para todos. Observação: isso não estará disponível se o recurso não estiver disponível para todos.
    5. baseline_low_date: a data em que o recurso ficou disponível como "Recém-disponível" no Baseline. Observação: isso não está disponível para recursos de disponibilidade limitada.

O exemplo a seguir é o objeto de dados completo para o recurso subgrade do 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"
    }
  }
}

A exportação groups fornece dados sobre agrupamentos de recursos com a seguinte estrutura:

  • id: o identificador exclusivo do grupo. Por exemplo, os recursos do CSS têm um ID"css". Observação:essa não é uma propriedade do objeto de grupos. É a própria chave do objeto.
  • name: o nome legível do grupo.
  • parent: o ID do grupo principal do grupo. Essa opção não está disponível se o grupo não tiver um grupo pai.

Exemplos

Os exemplos a seguir mostram como usar o web-features package para receber os dados necessários para criar ferramentas de comparativo.

Pesquisar o status de base de um recurso específico

import { features } from 'web-features';

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

Este exemplo representa o caso de uso mais direto do pacote web-features, em que você especifica o ID de um recurso para receber os dados de comparativo de mercado disponíveis na propriedade status.baseline. Essa propriedade informa se um recurso tem disponibilidade limitada, é novo ou está disponível para todos. Nos dois últimos casos, você também tem acesso a datas que descrevem quando o recurso atingiu um determinado limite de comparativo de mercado.

Pesquisar o status de referência de uma chave BCD específica

BCD significa browser-compat-data, um projeto mantido pela MDN para catalogar o suporte a recursos em todos os navegadores. Uma chave BCD corresponde a um recurso granular, como um valor de propriedade CSS específico ou um subrecurso comportamental definido pela especificação.

O projeto web-features agrupa as chaves BCD relacionadas na matriz compat_features para cada recurso. Às vezes, você precisa do status de comparativo de mercado de uma chave BCD, em vez do status geral de comparativo de mercado para todo o recurso. Por exemplo, se você criar um linter de CSS e precisar saber se um par propriedade-valor é compatível com os principais navegadores, os dados no nível do recurso serão muito imprecisos. Isso acontece porque o pacote agrega cada recurso em todas as chaves BCD constituintes, e algumas chaves têm melhor suporte do navegador do que outras.

Para pesquisar o status de base de uma chave BCD, inspecione a propriedade status.by_compat_key do objeto de recurso (disponível no web-features 3.6.0 e versões mais recentes):

import { features } from 'web-features';

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

Por exemplo, a saída de 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"
  }
}

Ordenar recursos pelo status de referência

Este exemplo itera por cada recurso no objeto "features" e classifica cada um em uma matriz pelo status de linha de 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;
});

Este exemplo ilustra como trabalhar com a propriedade status.baseline nas suas ferramentas. Por exemplo, você pode usar essa abordagem em um aplicativo da Web para mostrar uma lista de todos os recursos da Web pelo status da linha de base.

Encontrar todos os recursos em um grupo

Até agora, todos os exemplos mostrados usam a exportação features, mas a exportação groups organiza todos os recursos de maneira lógica em grupos. Isso significa que você pode, por exemplo, encontrar todos os recursos que fazem parte das transições de visualização:

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

A interseção entre as exportações features e group permite restringir a pesquisa de recursos da Web pelo grupo a que pertencem.

Como tudo funciona em conjunto

É possível usar as pesquisas para criar ferramentas úteis, por exemplo, um linter de CSS.

Os linters de CSS avaliam at-rules, pseudoelementos, propriedades e pares de propriedade-valor. Para o linter de linha de base, procure o status de cada token pela chave BCD, não pelo recurso principal.

Um analisador como o CSSTree tokeniza o CSS, dividindo uma folha de estilos em uma árvore de sintaxe abstrata (AST, na sigla em inglês). O exemplo a seguir mostra uma regra CSS que usa um seletor de classe genérico e uma declaração de estilo:

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

A AST seria parecida com isto:

{
  "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 você encontra uma declaração de propriedade ao percorrer a AST, mapeie o nome da propriedade para a chave BCD correspondente e verifique o status de linha de base. O BCD categoriza as propriedades do CSS no objeto css.properties. Portanto, a chave correspondente do BCD é css.properties.word-break.

Em seguida, encontre o recurso associado a essa chave BCD e confira o status dele.

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

O status de comparativo de mercado da propriedade word-break é o seguinte:

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

O status de "high" indica que a propriedade está amplamente disponível, então o linter não precisa emitir um aviso. Em seguida, examine o valor da propriedade.

A AST mostra que o valor dessa propriedade é auto-phrase. Para receber a chave BCD correspondente, adicione o valor à chave BCD da propriedade pai: css.properties.word-break.auto-phrase.

Nesse caso, web-features mostra que o status do par propriedade-valor word-break: auto-phrase não é "De base":

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

Use as informações neste exemplo de linter para avisar o desenvolvedor de que esse par propriedade-valor não é de base. Esse aviso garante que o desenvolvedor saiba que ele não vai funcionar como esperado nos principais mecanismos de navegador.

Exemplos reais

Os exemplos anteriores mostram usos básicos do pacote web-features. Já existem várias ferramentas que aproveitam esses dados. Exemplo:

Há mais exemplos de como essa fonte de dados pode ser usada para criar ferramentas de referência, e esperamos que seu projeto se torne um deles.