Compatibilidad con varios navegadores de forma predeterminada: Cómo funcionan las alternativas de Baseline en Modern Web Guidance

Tara Agyemang

Publicación: 12 de noviembre de 2026

Pídele a un agente de programación con IA que cree un cuadro de diálogo modal o una información sobre la herramienta, y observa con atención el código que escribe. La mayoría de las veces, el agente extrae JavaScript para recrear funciones integradas en el navegador. Si le pides al agente que use funciones de CSS o HTML más recientes, suele omitir la detección de funciones y las alternativas. Esta omisión deja a los usuarios de navegadores no compatibles con una página rota.

La Guía para la Web moderna incorpora la compatibilidad con navegadores en cada recomendación. Cada guía combina funciones web modernas con datos de compatibilidad de Baseline y patrones de resguardo verificados. En esta publicación, se analiza cómo tu agente usa esos datos para escribir código moderno compatible con varios navegadores.

Por qué los agentes de programación se equivocan con la compatibilidad de navegadores sin orientación

Sin orientación, los agentes de programación rara vez verifican qué navegadores debe admitir tu proyecto antes de escribir código. En cambio, suelen caer en uno de dos extremos:

• Uso de código heredado de forma predeterminada: Los datos de entrenamiento de los modelos están llenos de patrones heredados, y las evaluaciones de Modern Web Guidance muestran que los modelos aún recomiendan muchos de estos patrones. Los agentes suelen escribir código JavaScript complejo o agregar bibliotecas externas cuando una función integrada de HTML o CSS puede hacer el trabajo.
• Uso de funciones nuevas sin una red de seguridad: Cuando le pides a un agente que use una función web más nueva, suele escribir código para los navegadores compatibles y se detiene allí. Omite la detección de funciones y deja de lado las alternativas, lo que rompe la página en los navegadores que no admiten la función.

Los datos del paquete de evaluación de Modern Web Guidance muestran lo común que es esta brecha. En el caso de las funciones que aún no funcionan en todos los navegadores principales, el paquete de evaluación prueba la detección de funciones, las reglas @supports, los resguardos o los polyfills condicionales. Los modelos sin guía aprueban estas verificaciones solo el 43% de las veces. Con Modern Web Guidance habilitado, la tasa de aprobación aumenta al 87%.

Cómo los datos de Baseline guían cada recomendación

Para decidir cuándo una función web necesita un resguardo, Modern Web Guidance se basa en Baseline. Baseline hace un seguimiento de la compatibilidad en el conjunto de navegadores principales (Chrome, Edge, Firefox y Safari en computadoras de escritorio y dispositivos móviles) con tres estados:

• Baseline Widely available: La función se ejecuta en todos los navegadores principales desde hace, al menos, 30 meses.
• Baseline Newly available: La función funciona en todos los navegadores principales, a partir de la fecha en que el último navegador agregó compatibilidad.
• Disponibilidad limitada: La función aún no es compatible con todos los navegadores principales.

Cada guía de Modern Web Guidance incluye el estado de Baseline integrado y los datos de la versión del navegador del paquete web-features. Cuando tu agente de programación carga una guía, obtiene el estado de compatibilidad exacto de la función, las fechas de lanzamiento y las versiones del navegador junto con las instrucciones de implementación. Por ejemplo:

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

De forma predeterminada, Modern Web Guidance sigue dos reglas basadas en esos datos:

• Funciones de Baseline Widely available: Tu agente usa estas funciones directamente sin detección de funciones adicional ni código de resguardo. Esta regla mantiene tu base de código optimizada y evita soluciones alternativas innecesarias.
• Funciones de Baseline con disponibilidad limitada y recientemente disponibles: Las guías de estas funciones incluyen una estrategia de resguardo verificada. Tu agente usa la función moderna cuando es compatible y proporciona un resguardo limpio para otros navegadores.

Cuatro patrones de resguardo que usa Modern Web Guidance en la práctica

No todas las funciones web necesitan el mismo tipo de resguardo. Modern Web Guidance hace coincidir cada función con uno de los cuatro enfoques de resguardo según cómo se comporte la función en los navegadores no compatibles:

Mejora progresiva sin código de resguardo

Algunas funciones modernas mejoran la tipografía, las animaciones o la velocidad de carga de la página sin cambiar su funcionamiento. Si un navegador no reconoce estas funciones, las ignora y renderiza el resto de la página con normalidad.

Por ejemplo, la declaración de CSS text-wrap: balance (disponible recientemente en Baseline) iguala las longitudes de las líneas en los encabezados.

.balanced {
  text-wrap: balance;
}

La API de Speculation Rules (disponibilidad limitada) realiza la carga o la renderización previas de las páginas que se visitarán. Los navegadores no compatibles ignoran de forma segura los bloques <script type="speculationrules"> y las declaraciones de CSS no reconocidas.

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Debido a este comportamiento, tu agente puede agregar estas funciones directamente sin código de resguardo adicional.

Detección de funciones de CSS con la regla @supports

Otras funciones de CSS cambian la forma en que se posiciona o se aplica un estilo a un elemento en la pantalla. Si aplicas parte del estilo de forma incondicional, es posible que los navegadores no compatibles rendericen el elemento en el lugar equivocado.

Por ejemplo, las consultas de contenedores fijos (container-type: anchored, disponibilidad limitada) en una información sobre la herramienta posicionada te permiten voltear la flecha de la información sobre la herramienta cuando se voltea cerca del borde del viewport. En los navegadores que no admiten consultas de contenedores fijos, la flecha no puede detectar el giro y podría apuntar en la dirección incorrecta. Modern Web Guidance le indica a tu agente que una los estilos de flecha en una regla @supports (container-type: anchored) para que la flecha predeterminada aparezca solo en los navegadores que también admiten la regla de inversión @container anchored().

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

JavaScript personalizado liviano

Cuando una función interactiva de HTML no es compatible con todos los navegadores principales, puede ser innecesario incorporar una biblioteca de terceros. Para las interacciones independientes, Modern Web Guidance proporciona un resguardo de JavaScript breve y sin dependencias detrás de una verificación de funciones.

Por ejemplo, el atributo closedby="any" en un elemento <dialog> (disponibilidad limitada) permite que los usuarios cierren un diálogo modal haciendo clic en el fondo. Para los navegadores que no admiten el atributo closedby, la guía incluye un pequeño objeto de escucha de clics que primero verifica el objeto HTMLDialogElement.prototype:

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

Polyfills cargados de forma condicional

Para las funciones de plataforma más grandes, como el posicionamiento de anclas de CSS (disponibilidad limitada) o la API de Temporal (disponibilidad limitada), no es práctico escribir un resguardo personalizado a mano. Al mismo tiempo, empaquetar un polyfill para cada usuario agrega un costo de descarga adicional para los navegadores que ya admiten la función.

En estos casos, Modern Web Guidance le indica a tu agente que primero verifique la compatibilidad y cargue un polyfill verificado de forma dinámica con la expresión import() de tu empaquetador o una CDN. Los navegadores compatibles no descargan código adicional, mientras que los navegadores más antiguos recuperan el polyfill a pedido.

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

Personaliza el objetivo de compatibilidad con navegadores de tu proyecto

De forma predeterminada, Modern Web Guidance trata las funciones de Baseline Widely available como seguras para usar sin resguardos. Requiere resguardos para las funciones de Baseline de disponibilidad reciente y disponibilidad limitada.

Es posible que tu proyecto tenga requisitos de navegador diferentes. Por ejemplo, puedes segmentar un año de Baseline específico, compilar para una app de Electron o excluir polyfills para mantener los paquetes pequeños.

Puedes definir una política de compatibilidad con navegadores personalizada en el archivo AGENTS.md o CLAUDE.md de tu proyecto:

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

Cada guía incluye el estado de Baseline, la fecha de lanzamiento y las versiones mínimas del navegador para cada función. Tu agente compara tu política con estos datos de compatibilidad antes de escribir código. Cuando una función ya cumple con tu objetivo, el agente escribe el código moderno y omite el código de resguardo.

Prueba la ruta moderna y la de resguardo

Escribir código compatible con varios navegadores es solo la mitad del trabajo. También debes probar la ruta de acceso del código moderno y la ruta de acceso de resguardo en navegadores reales.

Cuando realizas pruebas en un solo navegador, solo verificas una rama de tu código. Por ejemplo, Chrome y Firefox ejecutan el atributo closedby="any" nativo en un elemento <dialog>, mientras que Safari ejecuta el resguardo de JavaScript para hacer clic fuera del elemento. Si inspeccionas el diálogo solo en Chrome, ese objeto de escucha de resguardo nunca se ejecuta durante la prueba.

Para verificar ambas instrucciones de código, conecta tu agente de programación a varios motores de navegador al mismo tiempo:

• Herramientas para desarrolladores de Chrome para agentes: Conecta tu agente a Chrome para inspeccionar el diseño, los registros de la consola y el comportamiento del entorno de ejecución.
• MCP de Herramientas para desarrolladores de Firefox: Conecta tu agente a una instancia de Firefox activa a través de WebDriver BiDi.
• Servidor de MCP de Safari: Conecta tu agente a Safari a través del comando integrado safaridriver --mcp.

Con las tres herramientas conectadas, tu agente puede abrir tu página en Chrome, Firefox y Safari en un solo flujo de trabajo. Luego, puede confirmar que tanto la función nativa como la experiencia de resguardo funcionan como se espera.

Comienza a usar Modern Web Guidance

Para agregar Modern Web Guidance a tu proyecto, ejecuta el instalador interactivo desde el directorio del proyecto:

npx modern-web-guidance@latest install

Si tienes instalada una versión anterior, ejecuta el comando de actualización para actualizar a la versión 1.0:

npx modern-web-guidance@latest update

También puedes instalar Modern Web Guidance a través de los mercados de complementos para Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code y Grok.

Para obtener más información, explora estos recursos:

• Documentación de Modern Web Guidance
• Repositorio de GitHub
• Panel de evaluación
• Documentación de Baseline en web.dev