Baseline web: qué significa newly y widely available

Una propiedad CSS aparece con una marca verde en la documentación. ¿Puedes usarla sin comprobar nada más? La respuesta depende de lo que significa esa marca. Baseline resume cuándo una función de la plataforma web está disponible en el conjunto de navegadores principales que define la comunidad WebDX. Es una referencia para planificar soporte, no una prueba de que tu sitio funcionará en todos los dispositivos que usan tus visitantes.

Ilustración conceptual generada para Gaia; la pantalla no representa una auditoría de navegadores. Crédito: Gaia Genis Hub.

Tres estados que no deben mezclarse

Según web.dev, una función tiene disponibilidad limitada si todavía no llega a todos los navegadores del conjunto principal. Pasa a newly available cuando esos navegadores la admiten. Se considera widely available al transcurrir 30 meses desde la fecha de interoperabilidad. El conjunto incluye Chrome en escritorio y Android, Edge, Firefox en escritorio y Android y Safari en macOS e iOS. El criterio es deliberadamente concreto; no significa «todos los navegadores existentes».

Esquema original de Gaia basado en web.dev Baseline. Los rótulos describen estados, no resultados de pruebas propias. Crédito: Gaia Genis Hub.

El paso de nueva a amplia no asegura que todas las personas hayan actualizado su navegador. El plazo de 30 meses es una regla de clasificación, no un porcentaje medido de tus usuarios. Una aplicación con dispositivos corporativos antiguos o un navegador integrado puede necesitar otro criterio de soporte. La etiqueta es un punto de partida compartido para el equipo.

Cómo convertir el estado en una decisión de producto

Primero identifica la función concreta que pretendes usar: no basta decir «CSS moderno». Consulta su ficha en MDN, que muestra el estado Baseline, o en las referencias enlazadas por web.dev. Registra el estado y, si es recién disponible, la fecha de soporte. Después contrástalo con los navegadores y versiones que realmente atiende tu sitio. Si no tienes datos fiables de audiencia, declara esa incertidumbre.

Esta tabla es una guía editorial, no una regla universal de lanzamiento. Si una función solo adorna la página, puede bastar una degradación visual aceptable. Si sostiene un pago, un formulario o una acción esencial, la prueba funcional debe ser más estricta. web.dev también propone herramientas para incorporar Baseline al flujo de desarrollo, pero ninguna etiqueta sustituye verificar el producto terminado.

El ejemplo del fallback

Imagina una tarjeta que usa una nueva capacidad CSS para distribuir su contenido. Define primero la experiencia mínima: título legible, enlace activable y orden claro. Implementa la mejora solo donde hay soporte y comprueba que, sin ella, la tarjeta sigue cumpliendo esa función. Después prueba teclado, lectura móvil, zoom y navegadores de interés. Este ejemplo es un criterio de diseño, no una prueba realizada por Gaia en una web concreta.

No elijas un polyfill por el mero color de la etiqueta. Puede añadir peso o complejidad y quizá no sea necesario para una mejora decorativa. La guía de Baseline sobre polyfills plantea precisamente decidir según el objetivo y el soporte requerido. Documenta por qué eliges esperar, degradar o completar la función con otra implementación.

Cuándo revisar la decisión

La compatibilidad de una función cambia con las versiones de los navegadores, y la composición de tu audiencia también puede cambiar. Vuelve a comprobar la ficha Baseline cuando actualices una dependencia, adoptes una nueva capacidad o cambien tus requisitos de soporte. Si cambian la definición de Baseline o el conjunto principal de navegadores, habrá que revisar esta explicación. Una decisión anotada hoy no sustituye las pruebas del próximo lanzamiento.

Fuentes y agradecimientos

Agradecemos la documentación de web.dev sobre Baseline y la referencia de compatibilidad de MDN. Gaia traduce esos estados a una pauta de decisión editorial; no ha medido aquí compatibilidad de un sitio ni porcentajes de uso.