Baseline: Una Nueva Forma de Pensar sobre la Compatibilidad con Navegadores

Durante años, los desarrolladores frontend han lidiado con una pregunta obsoleta: “¿Qué versiones de navegadores soportamos?” Este enfoque tenía sentido cuando Internet Explorer dominaba y los navegadores se actualizaban anualmente. Hoy en día, Chrome y Firefox lanzan nuevas versiones cada pocas semanas. Safari se actualiza regularmente. El viejo modelo mental ya no encaja.

Web Platform Baseline ofrece un mejor enfoque. En lugar de rastrear versiones de navegadores, rastreas la disponibilidad de funcionalidades. Este artículo explica cómo funciona Baseline, por qué es importante para la compatibilidad moderna de navegadores y cómo aplicarlo en tus proyectos.

¿Qué es Web Platform Baseline?

Baseline es una iniciativa multi-proveedor respaldada por Google, Microsoft, Apple y Mozilla a través del W3C WebDX Community Group. Encontrarás indicadores de Baseline en MDN, web.dev y Can I Use.

Baseline responde una pregunta simple: ¿Puedo usar esta funcionalidad de forma segura en todos los navegadores?

Define un conjunto principal de navegadores:

• Chrome (escritorio y Android)
• Edge
• Firefox (escritorio y Android)
• Safari (macOS e iOS)

Cuando una funcionalidad funciona en todos estos navegadores, obtiene el estatus Baseline.

Los Tres Estados de Disponibilidad

Las funcionalidades Baseline se dividen en tres categorías:

Disponibilidad limitada: La funcionalidad existe en algunos navegadores pero no en todos. Úsala con precaución o con polyfills.

Recientemente disponible: La funcionalidad funciona en todas las versiones estables de cada navegador principal. Es interoperable pero reciente.

Ampliamente disponible: La funcionalidad ha estado en todos los navegadores principales durante al menos 30 meses. La mayoría de los usuarios tienen acceso.

El umbral de 30 meses para “Ampliamente disponible” no es arbitrario. Tiene en cuenta usuarios que no actualizan inmediatamente, dispositivos antiguos y navegadores derivados que heredan de los motores principales. Después de 30 meses, una funcionalidad típicamente ha alcanzado a casi todos.

Por Qué Importa Este Cambio de Modelo Mental

Las políticas tradicionales basadas en versiones crean problemas. ¿Qué significa “las últimas dos versiones de Firefox” cuando Firefox lanza seis versiones principales durante un solo proyecto? El objetivo se mantiene en movimiento.

El pensamiento basado en disponibilidad de funcionalidades resuelve esto. En lugar de preguntar “¿Qué versiones de navegadores soportamos?” preguntas “¿Esta funcionalidad es Baseline?”

Este cambio ofrece tres beneficios prácticos:

Decisiones más claras. Consulta MDN para el indicador Baseline. Si muestra “Ampliamente disponible”, usa la funcionalidad con confianza. Sin cálculos mentales sobre números de versión.

Mejor comunicación con stakeholders. “Usamos funcionalidades disponibles en todos los navegadores durante más de 30 meses” es más fácil de explicar que “las últimas dos versiones de Chrome, Firefox y Safari, más Firefox ESR, más cualquier cosa por encima del 0.5% de uso global.”

Consistencia mejorada. Los equipos toman menos decisiones subjetivas. La política se aplica uniformemente en todos los proyectos.

Cómo Aplicar Baseline en la Práctica

Adoptar Baseline sigue un patrón directo:

Para funcionalidad principal, confía en funcionalidades Ampliamente disponibles. Estas forman tu base. Los usuarios sin navegadores modernos aún obtienen una experiencia funcional.

Para mejoras progresivas, usa funcionalidades Recientemente disponibles con detección de funcionalidades. Envuélvelas en bloques @supports o comprobaciones JavaScript. Los usuarios con navegadores antiguos obtienen la experiencia base, mientras que otros obtienen la versión mejorada.

/* Fallback ampliamente disponible */
.container {
  max-width: 100%;
}

/* Mejora recientemente disponible */
@supports (container-type: inline-size) {
  .container {
    container-type: inline-size;
  }
}

El CSS anterior es un ejemplo limpio de mejora progresiva. Todos los navegadores entienden max-width: 100%. Los navegadores que también soportan container queries obtienen el diseño más capaz. Nada se rompe para nadie.

Integrando Baseline con Tus Herramientas

Baseline cuenta con un soporte creciente en las herramientas de desarrollo. Browserslist ahora soporta consultas Baseline directamente (por ejemplo, apuntando a funcionalidades “ampliamente disponibles” o un año específico de Baseline), ayudando a mantener tus herramientas de compilación alineadas con tu política de soporte. El paquete browserslist-config-baseline proporciona una configuración lista para usar si prefieres no escribir consultas tú mismo.

El soporte CSS de ESLint (@eslint/css) incluye una regla use-baseline que puede marcar propiedades que caen fuera de tu umbral Baseline elegido. Aunque no es perfecta — puede ser excesivamente estricta con patrones de mejora progresiva — señala hacia dónde se dirige el ecosistema.

Espera una integración más estrecha con herramientas de compilación, linters y frameworks a medida que crezca la adopción de Baseline.

Baseline es un Valor Predeterminado, No una Garantía

Baseline proporciona un punto de partida sólido, pero no reemplaza el juicio. Existen casos extremos. Una funcionalidad podría ser Baseline pero tener un bug significativo en un navegador. Las preocupaciones de accesibilidad pueden requerir pruebas más allá de los datos de compatibilidad. Los entornos empresariales con navegadores bloqueados necesitan consideración separada.

Usa Baseline como tu suposición predeterminada, luego verifica cuando las apuestas son altas.

Conclusión

Web Platform Baseline representa un cambio fundamental: de matrices de soporte basadas en versiones al pensamiento basado en disponibilidad de funcionalidades. Reduce la sobrecarga cognitiva, mejora la comunicación del equipo y se alinea con cómo funcionan realmente los navegadores modernos.

Comienza verificando el estado Baseline en MDN antes de recurrir a nuevas funcionalidades. Adopta “Ampliamente disponible” como tu base. Incorpora funcionalidades “Recientemente disponibles” a través de mejora progresiva. Deja que las herramientas se pongan al día para soportar tu flujo de trabajo.

La pregunta no es qué navegadores soportas. Es qué funcionalidades necesitas.

Preguntas Frecuentes

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.