Funciones de la plataforma web que todo desarrollador debería conocer en 2026

Hace cinco años, “la plataforma web” significaba un <div> y un fetch. En 2026 significa un entorno de ejecución con capacidad gráfica, programable con GPU, con conocimiento del sistema de archivos, multiproceso y con una biblioteca de componentes más rica que la mayoría de los sistemas operativos enviados en 2015. Las funciones a continuación han llegado al punto de “úsalas en producción sin un polyfill” — y cambian lo que una aplicación web puede ser.

API View Transitions

La mayor ganancia de UX de los últimos años. View Transitions te permite animar entre estados del DOM con una llamada a función, y el navegador maneja la interpolación por ti.

// Before: instant, jarring
document.body.innerHTML = newHTML;

// After: smooth crossfade
document.startViewTransition(() => {
  document.body.innerHTML = newHTML;
});

Eso es todo. El navegador captura el estado antiguo, aplica el nuevo estado y hace un fundido cruzado. Con unas pocas líneas de CSS puedes animar elementos individuales (la transición de elemento compartido):

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

::view-transition-old(.card),
::view-transition-new(.card) {
  animation-duration: 0.4s;
}

Funciona para SPAs (cambios de ruta), MPAs (cargas completas de página, con una etiqueta meta y navegación de mismo origen) y transiciones de router de Vue/React/Svelte. El soporte del navegador alcanzó estabilidad entre navegadores en 2024 y ahora es la forma recomendada de manejar transiciones de página en una nueva aplicación. La última vez que escribí una animación FLIP a mano, la especificación de View Transitions era un borrador.

API Popover

Los elementos popover, dialog y <select> siempre han sido un desorden de trampas de foco, manejo de tecla Escape, comportamiento de descuido ligero y ARIA. La API Popover estandariza todo esto.

<button popovertarget="menu">Abrir menú</button>
<ul id="menu" popover>
  <li>Cut</li>
  <li>Copy</li>
  <li>Paste</li>
</ul>

Eso es un menú popover completamente accesible, en la capa superior, con descuido ligero, que se cierra con Escape. Sin JavaScript. Sin guerras de z-index. El atributo popover pone el elemento en la capa superior del navegador (sobre todo el contenido, incluidos los diálogos modales de otros componentes), y el navegador maneja el foco, Escape y el comportamiento de clic afuera automáticamente.

Tres modos:

• popover (auto) — descuido ligero, múltiples popovers pueden estar abiertos.
• popover="manual" — apertura/cierre programático solo, sin descuido ligero.
• <dialog> — modal, con fondo, trampa de foco, requiere cierre explícito.

Para desplegables, tooltips, menús de acción y selectores: popover. Para diálogos modales que bloquean la interacción: <dialog>. Deja de construir desplegables con position: absolute y un listener de clic afuera — ese es el patrón de 2019.

WebGPU compute shaders

WebGPU ha estado “casi listo” desde 2023, pero la historia de los compute shaders solo maduró en 2025. Ahora puedes ejecutar computación GPU arbitraria en el navegador, en cada sistema operativo moderno, con una API razonable.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const shader = device.createShaderModule({ code: computeWGSL });
const pipeline = await device.createComputePipeline({ layout: 'auto', compute: { module: shader, entryPoint: 'main' } });
// ... bind buffers, dispatch, read results

Qué puedes hacer con ello:

• Herramientas de desarrollo. Un probador de expresiones regular que ejecuta millones de coincidencias en la GPU. Un formateador JSON que analiza un archivo de 500MB en 200ms. Una herramienta diff que compara dos archivos de 100MB en menos de un segundo.
• Aplicaciones local-first. Procesamiento de imágenes, transcodificación de video, inferencia de ML — todo en el navegador, sin servidor.
• Visualización. Cualquier cosa que antes era “esto sería a 60fps si pudiera ponerlo en la GPU” ahora puede estar en la GPU.

WebGPU requiere HTTPS en producción (la API está protegida por un contexto seguro, como crypto.subtle). También requiere un navegador reciente y una GPU real — la alternativa a WebGL2 o una ruta solo JS todavía es necesaria para hardware antiguo.

File System Access API

La API File te da una instantánea de un archivo que el usuario arrastró. La File System Access API te da un control vivo que puedes leer y escribir de vuelta.

const handle = await window.showSaveFilePicker({
  suggestedName: 'config.json',
  types: [{ description: 'JSON', accept: { 'application/json': ['.json'] } }],
});
const writable = await handle.createWritable();
await writable.write(JSON.stringify(data, null, 2));
await writable.close();

También puedes reabrir un archivo, obtener un FileSystemFileHandle y seguir usándolo entre sesiones con IndexedDB (el control es serializable). Para herramientas de desarrollo, esto es la diferencia entre “descargar un archivo después de cada cambio” y “editar en el lugar”.

Soporte del navegador: Chrome y Edge desde 2023, Safari y Firefox a partir de 2025. Para navegadores no compatibles, usa alternativa con Blob y <a download> — la función se detecta limpiamente.

CSS subgrid

display: grid fue la mayor mejora de diseño en una década. subgrid es la segunda mayor. Permite que un elemento de grid participe en el grid de su padre:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Ahora cada tarjeta tiene un encabezado, cuerpo y pie de página de altura idéntica, sin un truco de flexbox o un número mágico. Subgrid llegó a los tres motores en 2023-2024 y es seguro usar sin alternativa.

La lección práctica

Si empezaste en el desarrollo web en los últimos años, puede que no hayas notado cuánto ha cambiado la plataforma. El reflejo de “usar una biblioteca para todo” — animaciones, desplegables, selectores de archivos, modales, incluso diseño — es cada vez más obsoleto. Lo nativo es más rápido, más pequeño, más accesible y menos probable que se rompa en una actualización de framework.

La próxima vez que vayas a hacer npm install en un paquete de 50KB para un problema que el navegador puede resolver en 20 líneas de HTML, revisa la plataforma primero. La respuesta es cada vez “sí, el navegador hace eso”.

Una forma rápida de probar: cada herramienta de desarrollo en DevSpeedTools se ejecuta completamente del lado del cliente usando las mismas funciones de plataforma (Web Crypto, File System Access, la API Popover, CSS subgrid). Si puedes construir un formateador JSON con cero dependencias de npm, puedes construir la mayoría de las cosas.