Cómo consultar el panel de la plataforma web para las herramientas de Baseline

Jeremy Wagner

Publicado: 4 de marzo de 2025

El Baseline fue creado por el equipo de Chrome y ahora lo define el WebDX Community Group. La versión básica aporta claridad a las funciones que son interoperables entre navegadores. Está diseñado para ayudarte a identificar qué funciones puedes usar (o no) en todos los motores de navegadores principales. Sin embargo, necesitas una forma de identificar cuáles son esas características.

Afortunadamente, puedes consultar qué funciones están disponibles como Baseline Newly o Widely con el Panel de la plataforma web, que se basa en el paquete npm web-features. También puedes acceder a esta información con su API de HTTP para integrar los datos de referencia en tu flujo de trabajo de herramientas. En esta guía, se explica cómo hacerlo.

La gramática de consultas de Baseline pertinente del panel de la plataforma web

El panel de la Plataforma web usa una gramática de consultas específica para ayudarte a buscar la compatibilidad con funciones web. Puedes usar esta gramática de consultas directamente en el panel.

A medida que escribas en el cuadro de búsqueda de la parte superior de la página, verás varios parámetros de consulta que puedes usar para filtrar las funciones web.

La gramática de la consulta es expresiva, lo que te brinda mucha flexibilidad para filtrar las funciones web que se muestran en el panel. En la siguiente captura de pantalla, se muestra cómo se puede usar el parámetro de consulta id para limitar la búsqueda a una función específica:

La gramática de consultas está documentada, pero no es necesario conocerla por completo para encontrar datos de referencia de las funciones. Puedes usar cualquiera de estas opciones en el panel, pero aquí te mostramos algunas que son especialmente útiles:

• baseline_status: Usa este parámetro para filtrar entidades por tres valores enumerados:
  • limited: Devuelve las funciones que tienen compatibilidad limitada con el navegador. Si filtras por este valor, solo recibirás funciones que no hayan alcanzado ningún estado de referencia.
  • newly: Devuelve atributos que están disponibles recientemente en el modelo de referencia.
  • widely: Devuelve las funciones que están disponibles de forma generalizada en el modelo de referencia, es decir, las funciones que han sido de referencia durante al menos 30 meses. Estas son funciones que puedes usar sin preocuparte por la compatibilidad del navegador ni los polyfills.
• baseline_date: Usa un formato YYYY-MM-DD..YYYY-MM-DD para especificar un límite superior y uno inferior para cuando las funciones alcanzaron el nivel de Baseline. Por ejemplo, para encontrar todos los eventos destacados en el intervalo de un año, usa un valor como 2024-01-01..2025-01-01.
• id: Es el identificador de un atributo determinado. Estos identificadores se definen en el paquete web-features. Por ejemplo, la entrada de la función para Promise.try() se asigna a un ID de promise-try.
• group: Es uno de los muchos nombres de grupos enumerados para los atributos. Este es un criterio útil si solo deseas consultar un subconjunto determinado de funciones de la plataforma web. Por ejemplo, puedes filtrar una lista de atributos de CSS con un valor de css.

Si bien el frontend del panel es útil, se basa en una API de HTTP que puedes consultar directamente. Por ejemplo, aquí se muestra un extremo que obtiene todas las funciones de Baseline que están disponibles recientemente:

https://api.webstatus.dev/v1/features?q=baseline_status:newly

Estructura de la respuesta JSON

La respuesta JSON que recibes de la API de HTTP tiene una forma coherente para cada función. La respuesta que se muestra contiene una propiedad data en el nivel superior. Esta propiedad contiene un array de todos los elementos coincidentes. Si bien esta no es una lista exhaustiva de todos los campos disponibles en la respuesta JSON, aquí se incluyen algunos que son útiles cuando se trata de la referencia:

• baseline: Contiene información general sobre el estado de referencia de una función determinada, con los siguientes subcampos:
  • status: Es el estado de referencia de una función. Los valores pueden ser limited, newly o widely. Nota: Este será el único subcampo si status tiene un valor de limited.
  • low_date: Indica la fecha en la que la función determinada pasó a estar disponible como Baseline Newly available. Este campo solo aparece si status es newly o widely.
  • high_date: Indica la fecha en la que la función determinada estuvo disponible de forma general como versión de referencia. Este campo solo está disponible si status es widely.
• feature_id: Es el ID del atributo. Por ejemplo, para la cuadrícula de CSS, este sería un valor de "grid".
• name: Es el nombre con formato de la función. En algunos casos, puede ser similar a feature_id, pero suele ser diferente. Por ejemplo, el valor de feature_id para Promise.try() es "promise-try", mientras que el campo name para el mismo atributo es "Promise.try()".
• spec: Este campo contiene un subcampo llamado links, que es un array de vínculos a especificaciones y otros recursos.

Hay otros campos que suelen contener información sobre cuándo los navegadores compatibles específicos implementaron la función en qué versión, datos sobre las pruebas de la plataforma web y otros elementos que te pueden interesar o no.

Ejemplos de consultas

Ahora que tienes una explicación rápida de algunos de los parámetros de consulta disponibles, consulta algunos ejemplos de consultas que puedes usar en tus herramientas y secuencias de comandos para seleccionar funciones de estado web que podrían ser útiles para tu flujo de trabajo.

Obtén datos para un solo atributo

Una buena manera de familiarizarse con la API es comenzar con un ejemplo básico que obtenga datos para una sola función web.

// Specify and encode the query for a query string:
const query = encodeURIComponent('id:grid');

// Construct the URL:
let url = `https://api.webstatus.dev/v1/features?q=${query}`;

// Fetch the resource:
const response = await fetch(url);

if (response.ok) {
  // Convert the response to JSON:
  const { data } = await response.json();

  // Log data for each feature to the:
  console.log(data);
}

En este caso, especificamos un parámetro id con un valor de grid para obtener información sobre la compatibilidad con la cuadrícula de CSS, que está disponible de forma general como Baseline. Por ejemplo, podrías usar esta información para detectar el uso de la función y permitir que los usuarios sepan que pueden usarla en todos los motores de navegador modernos sin preocuparse por la compatibilidad.

Sin embargo, esto es solo el comienzo, y la API de HTTP puede hacer mucho más por ti que obtener datos para una sola función.

Obtén todas las funciones de Baseline Newly y Widely available

Supongamos que deseas tener una secuencia de comandos que extraiga todas las funciones que estén disponibles de forma básica o general. Esto podría ser útil, por ejemplo, si tienes una secuencia de comandos que se ejecuta en algún intervalo y deseas obtener una lista actualizada que cambie a medida que las funciones pasen de tener disponibilidad limitada a tener el estado de referencia:

const query = encodeURIComponent('-baseline_status:limited');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

Esta consulta no obtiene todas las funciones de Baseline Newly y Widely available, sino solo las primeras 100. Si la cantidad de entidades recuperadas supera este valor, habrá un campo metadata en el nivel superior de la respuesta JSON que puede contener hasta dos subcampos:

• next_page_token: Es una cadena que contiene un token que puedes agregar a la cadena de consulta de la solicitud GET al backend. Cuando lo uses y vuelvas a recuperar datos del backend de webstatus.dev, se mostrará el siguiente lote de funciones coincidentes. Nota: Este campo no estará disponible si la búsqueda actual devuelve menos de 100 resultados o si la búsqueda actual se encuentra al final del conjunto de resultados.
• total: Es un número entero que indica la cantidad total de atributos disponibles para la búsqueda actual.

Estos campos son útiles para la paginación. Con ellos, podemos probar el siguiente código para obtener todos los resultados de una búsqueda que devuelve una gran cantidad de datos:

async function queryWebStatusDashboard (query, token) {
  const urlBase = 'https://api.webstatus.dev/v1/features?q=';
  let queryUrl = `${urlBase}${encodeURIComponent(query)}`;

  if (token) {
    queryUrl += `&page_token=${encodeURIComponent(token)}`;
  }

  const response = await fetch(queryUrl);

  if (response.ok) {
    const { data, metadata } = await response.json();

    console.log(data);

    // See if there's a page token in this query:
    if ('next_page_token' in metadata) {
      const { next_page_token } = metadata;
      queryWebStatusDashboard(query, next_page_token);
    } else {
      console.log('All results collected');
    }
  }
}

// Make the first query, and if there are more
// than 100 entries, the function will run
// recursively until all features are fetched
queryWebStatusDashboard('-baseline_status:limited');

Obtén todas las funciones de CSS disponibles recientemente en Baseline

Supongamos que eres ingeniero y te enfocas especialmente en CSS, y te interesa saber qué funciones de CSS se convierten en funciones disponibles recientemente en Baseline. Este es un caso de uso perfecto para el valor de la consulta group, así como para usar el operador AND cuando se consulta webstatus.dev:

const query = encodeURIComponent('baseline_status:newly AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

Cuando especificas un valor de css para group, puedes consultar todas las funciones de Baseline Newly available. Si también deseas incluir las funciones de CSS de Baseline Widely available, puedes usar el enfoque del último ejemplo de código y usar el operador de negación con una consulta como -baseline_status:limited AND group:css'.

Otro campo que puedes consultar es el campo snapshot, que es útil para encontrar funciones de JavaScript que forman parte de un conjunto específico de funciones de ECMAScript. El siguiente código verifica todas las funciones de Baseline Newly available que forman parte de la instantánea ecmascript-2023:

const query = encodeURIComponent('baseline_status:newly AND snapshot:ecmascript-2023');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

Obtén todas las funciones de Baseline dentro de un período

Se puede consultar el campo baseline_date para encontrar todos los atributos que se convirtieron en referencia dentro de un período específico:

const query = encodeURIComponent('baseline_status:widely AND baseline_date:2022-01-01..2022-12-31 AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

La muestra de código anterior realizará una consulta sobre las funciones de CSS que se volvieron ampliamente disponibles en Baseline en algún momento de 2022. La sintaxis de la consulta para baseline_date te permite especificar una fecha de inicio y una fecha de finalización, separadas por ...

Conclusión

Las consultas de esta guía están diseñadas para que comiences a experimentar con la forma de consultar el backend de webstatus.dev. Con cualquier cantidad de parámetros de consulta disponibles, deberías poder obtener resultados específicos para tu aplicación.

Saber cómo consultar la API de HTTP del panel de la plataforma web te permite crear herramientas que pueden ser útiles para tu trabajo y mantenerte informado sobre si las funciones que deseas usar para tu proyecto tienen suficiente compatibilidad con los navegadores. Esto significa que puedes compilar aplicaciones web con funciones modernas del navegador que puedes usar de forma segura, lo que proporciona una experiencia del desarrollador mucho más agradable.