API ampliamente disponible marzo 2026 para la web

12 APIs del navegador ampliamente disponibles a partir de marzo de 2026: Qué implementar en producción

En marzo de 2026, 12 APIs del navegador alcanzaron el estatus de amplia disponibilidad, lo que significa soporte estable en todos los navegadores principales durante al menos 2,5 años. Esto simplifica las decisiones de implementación: consultar Can I Use y las métricas de usuarios confirma que están listas para producción. El enfoque está en propiedades CSS, cabeceras HTTP y eventos JavaScript para optimizar rendimiento, tipografía y gestión de datos.

Lista de características clave:

• Clear-Site-Data
• contain-intrinsic-size
• @counter-style
• Eventos de orientación del dispositivo
• hyphenate-character
• hyphens
• image-set()
• <link rel="modulepreload">
• Consultas de medios de desbordamiento
• Gestor de almacenamiento
• Consulta de medios de frecuencia de actualización
• subgrid

Clear-Site-Data: Reinicio completo de datos locales

La cabecera HTTP Clear-Site-Data permite que un servidor inicie el borrado del almacenamiento del navegador: caché, cookies, localStorage, IndexedDB, service workers. Se usa durante cierre de sesión, cambio de usuario o recuperación de caché corrupto.

Sintaxis y directivas

Las directivas se especifican entre comillas dobles, separadas por comas:

Clear-Site-Data: "cache"
Clear-Site-Data: "cache", "cookies"
Clear-Site-Data: "*"

Directivas clave:

• "cache" — caché HTTP, bfcache, sombreadores WebGL.
• "cookies" — cookies y autenticación HTTP para el dominio y subdominios.
• "storage" — localStorage, sessionStorage, IndexedDB, service workers.
• "executionContexts" (experimental) — recarga de contextos.
• "clientHints" (experimental) — reinicio de Client Hints.
• "prefetchCache", "prerenderCache" (experimental) — reglas de especulación.
• "*" — todos los tipos de datos.

Ejemplos de uso

Cierre de sesión con limpieza completa:

HTTP/1.1 200 OK
Clear-Site-Data: "cache", "cookies", "storage", "executionContexts", "prefetchCache", "prerenderCache"
Content-Type: text/html

Solo cookies:

Clear-Site-Data: "cookies"

En producción, esta cabecera resuelve problemas con datos residuales después de POST /logout, incluidos conflictos con service workers y paquetes en caché. Las páginas de recuperación con "cache", "storage" restauran rápidamente el estado sin DevTools.

contain-intrinsic-size: Estabilizar el diseño con contención

La propiedad contain-intrinsic-size establece tamaños de respaldo para elementos con contain: size o content-visibility: auto. Evita reflujos al renderizar fuera del viewport fijando altura/ancho para el desplazamiento.

Sintaxis

contain-intrinsic-size: none;
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 300px 200px;
contain-intrinsic-size: auto 320px;
contain-intrinsic-size: auto 400px auto 250px;
contain-intrinsic-size: auto none;

Valores:

• none — sin sustitución.
• <length> — tamaño fijo.
• auto <length> — recuerda el tamaño real después del primer renderizado.
• auto none — vuelve a none si no hay memoria disponible.

Ejemplos

Feed de noticias:

.feed-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

Tarjeta de producto:

.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

Esta propiedad elimina el 'salto' en el scroll: sin ella, los bloques invisibles tienen altura cero, causando recálculo al desplazar. El modo auto optimiza después del primer renderizado.

@counter-style: Estilos de lista personalizados

La regla @counter-style define estilos de numeración personalizados para listas usando descriptores: system, symbols, additive-symbols. Extiende estilos integrados como decimal, disc, etc.

Sintaxis y descriptores

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

Descriptores principales:

• system: cyclic, numeric, alphabetic, fixed, additive.
• symbols: cadenas/imágenes para marcadores.
• additive-symbols: pares peso-símbolo para números romanos.
• prefix/suffix: enmarcado.
• range: valores permitidos.
• pad: longitud mínima (relleno con ceros).
• fallback: estilo de respaldo.

Ejemplos

Letras en círculo:

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

.items {
  list-style: circled-alpha;
}

Cohete para listas:

@counter-style rocket {
  system: cyclic;
  symbols: "\1F680";
  suffix: " ";
}

ul.features {
  list-style: rocket;
}

Para secciones:

@counter-style chapter {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ". ";
}

.article h2::before {
  counter-increment: section;
  content: counter(section, chapter);
}

En producción, @counter-style simplifica la localización de numeración, minimizando lógica JS/backend. Asegurar fallback y speak-as para accesibilidad.

Eventos de orientación del dispositivo y otras características

Los eventos de orientación del dispositivo proporcionan datos sobre orientación y aceleración del dispositivo a través de eventos DOM. La lista se complementa con: hyphenate-character y hyphens para guiones, image-set() para imágenes responsivas, <link rel="modulepreload"> para precarga de módulos, consultas de medios de desbordamiento/frecuencia de actualización para adaptación de rendimiento, Gestor de almacenamiento para cuotas, subgrid para grids.

Conclusiones clave

• Amplia disponibilidad — al menos 2,5 años de soporte estable en todos los navegadores.
• Verificar métricas de usuarios y Can I Use antes de implementar.
• Clear-Site-Data es esencial para cierre de sesión y recuperación.
• contain-intrinsic-size estabiliza el scroll con content-visibility.
• @counter-style para tipografía personalizada sin JS.

— Editorial Team