Funcionalidades da plataforma web que todo dev deveria conhecer em 2026

Cinco anos atrás, “a plataforma web” significava um <div> e um fetch. Em 2026 significa um runtime com capacidades gráficas, programável via GPU, ciente do sistema de arquivos, multiprocessos com uma biblioteca de componentes mais rica do que a maioria dos sistemas operacionais oferecia em 2015. As funcionalidades abaixo todas atingiram o ponto de “use em produção sem um polyfill” — e elas mudam o que uma aplicação web pode ser.

View Transitions API

A maior vitória de UX dos últimos anos. View Transitions permite animar entre estados do DOM com uma chamada de função, e o navegador lida com a interpolação para você.

// Antes: instantâneo, abrupto
document.body.innerHTML = newHTML;

// Depois: transição suave
document.startViewTransition(() => {
  document.body.innerHTML = newHTML;
});

É só isso. O navegador tira um snapshot do estado antigo, aplica o novo estado e faz uma transição suave. Com algumas linhas de CSS você pode animar elementos individuais (a transição de elemento compartilhado):

::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 (mudanças de rota), MPAs (carregamento completo de página, com uma tag meta e navegação same-origin) e transições de roteadores Vue/React/Svelte. O suporte do navegador atingiu estabilidade cross-browser em 2024 e agora é a maneira recomendada de lidar com transições de página em uma nova app. Da última vez que escrevi uma animação FLIP codificada à mão, a especificação de View Transitions ainda era um rascunho.

Popover API

Os elementos popover, dialog e <select> sempre foram uma bagunça de focus traps, tratamento de tecla Escape, comportamento de light-dismiss e ARIA. A API Popover padroniza tudo isso.

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

Esse é um menu popover totalmente acessível, em camada superior, com light-dismiss, que fecha com a tecla Escape. Sem JavaScript. Sem guerras de z-index. O atributo popover coloca o elemento na camada superior do navegador (acima de todo o outro conteúdo, incluindo diálogos modais de outros componentes), e o navegador lida com foco, Escape e comportamento de clique fora automaticamente.

Três modos:

• popover (auto) — light dismiss, múltiplos popovers podem estar abertos.
• popover="manual" — abertura/fechamento apenas programático, sem light dismiss.
• <dialog> — modal, com backdrop, captura foco, requer fechamento explícito.

Para dropdowns, tooltips, menus de ação e seletores: popover. Para diálogos modais que bloqueiam a interação: <dialog>. Pare de construir dropdowns com position: absolute e um listener de clique fora — esse é o padrão de 2019.

WebGPU compute shaders

WebGPU está “quase pronto” desde 2023, mas a história dos compute shaders só amadureceu em 2025. Agora você pode rodar computação GPU arbitrária no navegador, em todo sistema operacional moderno, com uma API sensata.

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' } });
// ... vincular buffers, despachar, ler resultados

O que você pode fazer com isso:

• Ferramentas de dev. Um testador de regex que roda milhões de matches na GPU. Um formatador de JSON que analisa um arquivo de 500MB em 200ms. Uma ferramenta de diff que compara dois arquivos de 100MB em menos de um segundo.
• Apps local-first. Processamento de imagem, transcodificação de vídeo, inferência de ML — tudo no navegador, sem servidor.
• Visualização. Qualquer coisa que antes seria “isso seria 60fps se pudesse estar na GPU” agora pode estar na GPU.

WebGPU requer HTTPS em produção (a API está condicionada a um contexto seguro, como crypto.subtle). Também requer um navegador recente e uma GPU real — o fallback para WebGL2 ou um caminho apenas-JS ainda é necessário para hardware antigo.

File System Access API

A API File dá a você um snapshot de um arquivo que o usuário arrastou. A File System Access API dá a você um handle ao vivo que você pode ler e escrever de volta.

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();

Você também pode reabrir um arquivo, obter um FileSystemFileHandle e continuá-lo usando entre sessões com IndexedDB (o handle é serializável). Para ferramentas de dev, essa é a diferença entre “baixar um arquivo após cada mudança” e “editar no local”.

Suporte do navegador: Chrome e Edge desde 2023, Safari e Firefox a partir de 2025. Para navegadores sem suporte, use Blob e <a download> como fallback — a funcionalidade detecta de forma limpa.

CSS subgrid

display: grid foi a maior melhoria de layout em uma década. subgrid é a segunda maior. Permite que um item de grid participe do grid do seu pai:

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

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

Agora cada card tem um cabeçalho, corpo e rodapé de altura idêntica, sem um hack de flexbox ou um número mágico. Subgrid chegou em todos os três motores em 2023-2024 e é seguro usar sem fallback.

A conclusão prática

Se você começou no desenvolvimento web nos últimos anos, pode não ter notado o quanto a plataforma mudou. O reflexo de “use uma biblioteca para tudo” — animações, dropdowns, seletores de arquivos, modais, até layout — está cada vez mais obsoleto. Nativo é mais rápido, menor, mais acessível e menos provável de quebrar em uma atualização de framework.

Da próxima vez que você for fazer npm install em um pacote de 50KB para um problema que o navegador resolve em 20 linhas de HTML, verifique a plataforma primeiro. A resposta é cada vez mais “sim, o navegador faz isso”.

Uma maneira rápida de testar: cada ferramenta de dev no DevSpeedTools roda inteiramente client-side usando as mesmas funcionalidades da plataforma (Web Crypto, File System Access, a API Popover, CSS subgrid). Se você pode construir um formatador de JSON com zero dependências npm, você pode construir a maioria das coisas.