Crea herramientas de Baseline con el paquete web-features

Jeremy Wagner
Rick Viscomi

Publicado el 12 de septiembre de 2025

Las herramientas emergentes para Baseline te ayudan a determinar qué funciones web son seguras para usar en tus aplicaciones web hoy mismo. Estas herramientas, como los linters y las funciones de IDE, usan una fuente de datos de funciones de la plataforma web que contiene datos sobre su compatibilidad en los navegadores modernos.

El Panel de estado de la plataforma web es una fuente de datos para estas funciones y proporciona una API de HTTP consultable. Consultar esta fuente de datos a pedido no es práctico para todas las herramientas. Para muchos casos de uso de herramientas, el paquete npm web-features es una versión más confiable y práctica de los datos de funciones web que usas de forma local. En esta guía, se muestra cómo usar el paquete web-features para desarrollar tus propias herramientas de Baseline.

Comienza a usar el paquete de web-features

Primero, instala el paquete como dependencia en tu proyecto:

npm install web-features

Una vez instalado, importa una o más exportaciones con nombre del paquete web-features a tu proyecto:

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

Según tus objetivos, es posible que no necesites todas estas exportaciones. En estas exportaciones, se proporciona la siguiente información:

  • features: Es un array de objetos, en el que cada objeto representa una función web. Esta es la exportación que usarás con mayor frecuencia.
  • browsers: Es un array de objetos que describen navegadores.
  • groups: Es un array de objetos que define una agrupación lógica de atributos. Son útiles si tu objetivo es segmentar un subconjunto de funciones de la plataforma web, como las de CSS, JavaScript y agrupaciones más específicas.
  • snapshots: Contiene las versiones de ECMAScript de las funciones de JavaScript correspondientes, como ES2023, ES2022 y otras versiones de ECMAScript.

La exportación de funciones proporciona las siguientes propiedades para compilar herramientas de referencia:

  • id: Es el identificador único de la función. Por ejemplo, el identificador de CSS Grid es "grid". Nota: Esta no es una propiedad dentro del objeto de datos. Es la clave del objeto.
  • compat_features: Es un array de claves de BCD individuales incluidas en la función.
  • name: Es la cadena legible por humanos del nombre de la función, como "Container Queries".
  • description: Es una descripción breve de la función.
  • group: Es el grupo al que pertenece el atributo. Corresponde a los datos del grupo que se encuentran en la exportación de groups.
  • baseline: Es el estado de referencia de la función. Puede ser uno de los siguientes tres valores:
    1. false: El estado de la función es Disponibilidad limitada.
    2. "low": La función está disponible como línea de base.
    3. "high": La función está disponible de forma general como versión básica.
    4. baseline_high_date: Fecha en la que la función se convirtió en una versión de referencia ampliamente disponible. Nota: Esta opción no está disponible si la función no está disponible de forma general como versión de referencia.
    5. baseline_low_date: Fecha en la que la función estuvo disponible como Baseline Newly available. Nota: Esta opción no está disponible para las funciones con disponibilidad limitada.

El siguiente ejemplo es el objeto de datos completo para la función de subcuadrícula de 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"
    }
  }
}

La exportación de groups proporciona datos sobre las agrupaciones de funciones con la siguiente estructura:

  • id: Es el identificador único del grupo. Por ejemplo, las funciones de CSS tienen el ID"css". Nota: Esta no es una propiedad dentro del objeto de grupos. Es la clave del objeto en sí.
  • name: Es el nombre del grupo en lenguaje natural.
  • parent: Es el ID del grupo principal del grupo. Esta opción no está disponible si el grupo no tiene un grupo superior.

Ejemplos

En los siguientes ejemplos, se muestra cómo usar web-features package para obtener los datos que necesitas para compilar herramientas de Baseline.

Cómo buscar el estado de referencia de una función específica

import { features } from 'web-features';

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

Este ejemplo representa el caso de uso más directo para el paquete web-features, en el que especificas el ID de una función para obtener sus datos de referencia disponibles en la propiedad status.baseline. Esta propiedad te indica si una función tiene disponibilidad limitada, es nueva o está disponible de forma general. En los últimos dos casos, también tienes acceso a las fechas que describen cuándo la función alcanzó un determinado umbral de Baseline.

Cómo buscar el estado de referencia de una clave de BCD específica

BCD significa browser-compat-data, un proyecto que mantiene MDN para catalogar la compatibilidad con funciones en diferentes navegadores. Una clave de BCD corresponde a una función detallada, como un valor de propiedad CSS específico o una subfunción de comportamiento definida por la especificación.

El proyecto web-features agrupa las claves de BCD relacionadas en el array compat_features para cada función. A veces, necesitas el estado de referencia de una clave de BCD, en lugar del estado de referencia general de toda la función. Por ejemplo, si compilas un verificador de CSS y necesitas saber si un par propiedad-valor es compatible con los principales navegadores, los datos a nivel de la función son demasiado generales. Esto sucede porque el paquete agrega cada función en todas sus claves de BCD constituyentes, y algunas claves tienen mejor compatibilidad con el navegador que otras.

Para buscar el estado de referencia de una clave de BCD, inspecciona la propiedad status.by_compat_key del objeto de la función (disponible en web-features 3.6.0 y versiones posteriores):

import { features } from 'web-features';

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

Por ejemplo, el resultado de getBaselineStatus('outline', 'css.properties.outline') es el siguiente:

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

Cómo ordenar las funciones por su estado de referencia

En este ejemplo, se itera por cada atributo del objeto features y se ordena cada uno en un array según su estado de referencia.

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

En este ejemplo, se ilustra cómo trabajar con la propiedad status.baseline en tus herramientas. Por ejemplo, podrías usar este enfoque en una aplicación web para mostrar una lista de todas las funciones web según su estado de Baseline.

Cómo encontrar todos los atributos dentro de un grupo

Hasta ahora, todos los ejemplos que se mostraron usan la exportación features, pero la exportación groups organiza todas las funciones de forma lógica dentro de grupos. Esto significa que, por ejemplo, podrías encontrar todas las funciones que forman parte de View Transitions:

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

La intersección entre las exportaciones de features y group te permite limitar la búsqueda de funciones web según el grupo al que pertenecen.

Revisión general

Puedes usar las búsquedas para crear herramientas útiles, por ejemplo, para crear un verificador de CSS.

Los verificadores de CSS evalúan las reglas @, los seudoelementos, las propiedades y los pares propiedad-valor. Para tu verificador de Baseline, busca el estado de cada token por su clave de BCD, no por su función principal.

Un analizador como CSSTree tokeniza CSS, lo que divide una hoja de estilos en un árbol de sintaxis abstracta (AST). En el siguiente ejemplo, se muestra una regla de CSS que usa un selector de clase genérico y una declaración de estilo:

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

El AST se vería de la siguiente manera:

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

Cuando encuentres una declaración de propiedad mientras recorres el AST, asigna ese nombre de propiedad a su clave de BCD correspondiente para verificar su estado de Baseline. BCD categoriza las propiedades de CSS en el objeto css.properties, por lo que la clave de BCD correspondiente es css.properties.word-break.

Luego, busca la función asociada a esa clave de BCD y consulta su estado.

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

El estado de referencia de la propiedad word-break es el siguiente:

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

El estado "high" de referencia indica que la propiedad está ampliamente disponible, por lo que el linter no necesita emitir una advertencia. A continuación, examina el valor de la propiedad.

El AST muestra que el valor de esta propiedad es auto-phrase. Para obtener la clave BCD correspondiente, agrega el valor a la clave BCD de la propiedad principal: css.properties.word-break.auto-phrase.

En este caso, web-features muestra que el estado del par propiedad-valor word-break: auto-phrase no es Baseline:

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

Usa la información de este ejemplo de verificador para advertir al desarrollador que este par de propiedad y valor no es de Baseline. Esta advertencia garantiza que el desarrollador sepa que no funcionará como se espera en los principales motores de navegador.

Ejemplos del mundo real

En los ejemplos anteriores, se muestran usos básicos del paquete web-features. Ya hay varias herramientas que aprovechan estos datos. Por ejemplo:

Existen más ejemplos de cómo se puede usar esta fuente de datos para crear herramientas de Baseline, y esperamos que tu proyecto se convierta en uno de ellos.