Safari 26 para desenvolvedores: WebGPU e as novas APIs do WebKit

Por anos, desenvolvedores web tiveram o mesmo ritual: checar o Can I Use antes de adotar qualquer API nova, e suspirar ao ver o Safari como o único browser sem suporte. O Safari 26, lançado junto com o macOS Tahoe, iOS 26 e visionOS 26, resolve vários desses atrasos de uma vez. WebGPU, CSS anchor positioning, scroll-driven animations, File System WritableStream e Trusted Types agora fazem parte do WebKit.

Não é uma atualização incremental. São APIs que estavam no Chrome há dois, três anos e que travavam a adoção cross-browser. Com essa release, o Safari elimina alguns dos gaps mais irritantes para quem cria aplicações web modernas.

WebGPU completa o suporte cross-browser

O WebGPU chegou ao Chrome em 2023 (versão 113), ao Firefox em 2025 (versão 141 no Windows, 145 no macOS), e agora ao Safari 26. Com isso, todos os browsers relevantes suportam a API. Para quem trabalha com gráficos 3D, visualização de dados ou inferência de ML no browser, a espera acabou.

Diferente do WebGL, que mapeia para OpenGL ES (uma API dos anos 2000), o WebGPU mapeia diretamente para as APIs gráficas modernas de cada plataforma: Metal no macOS/iOS, Vulkan no Linux/Android e Direct3D 12 no Windows. O resultado é acesso a funcionalidades que o WebGL nunca conseguiu expor, como compute shaders para processamento paralelo na GPU.

Os programas de shader usam WGSL (WebGPU Shading Language), uma linguagem projetada para ser verificavelmente segura no contexto web. O browser valida o shader antes de enviá-lo à GPU, prevenindo crashes e exploits.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const shaderModule = device.createShaderModule({
  code: `
    @vertex fn vertexMain(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
      const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
      return vec4f(pos[i], 0, 1);
    }

    @fragment fn fragmentMain() -> @location(0) vec4f {
      return vec4f(0.204, 0.596, 0.859, 1);
    }
  `
});

Frameworks como Babylon.js, Three.js, PlayCanvas e Unity já suportam WebGPU. O Babylon.js, usando GPU Render Bundles (Snapshot Rendering), reporta renderização de cenas até 10x mais rápida em comparação com o path de WebGL, segundo benchmarks publicados pela equipe do Babylon.js no web.dev. Transformers.js e ONNX Runtime também funcionam no Safari 26 via WebGPU, permitindo inferência de modelos de ML direto no browser.

CSS anchor positioning e scroll-driven animations

Duas APIs de CSS que o Chrome já oferece desde 2023-2024 finalmente chegam ao Safari. As duas eliminam quantidades significativas de JavaScript que antes eram necessárias para efeitos visuais comuns.

Anchor positioning

Anchor positioning permite posicionar um elemento relativamente a outro, sem JavaScript. Menus dropdown, tooltips e popovers que seguem seu elemento de referência na página agora funcionam em CSS puro.

.trigger {
  anchor-name: --menu-anchor;
}

.dropdown {
  position: fixed;
  position-anchor: --menu-anchor;
  position-area: bottom span-right;
}

@position-try --flip-top {
  position-area: top span-right;
}

.dropdown {
  position-try-fallbacks: --flip-top;
}

O detalhe que mais interessa é o position-try-fallbacks. Ele define posições alternativas caso o elemento não caiba na posição preferida. Quem já escreveu lógica de "flip" em JavaScript para tooltips sabe o trabalho que isso elimina.

Scroll-driven animations

Scroll-driven animations ligam animações CSS ao progresso de scroll, sem event listeners e sem requestAnimationFrame. Dois modelos de timeline estão disponíveis:

.reading-progress {
  animation: grow-bar linear;
  animation-timeline: scroll();
}

@keyframes grow-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.fade-in-section {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

scroll() amarra a animação ao scroll da página (a barra de leitura cresce conforme o usuário desce). view() amarra ao momento em que o elemento entra ou sai da viewport. Ambos rodam na thread de composição do browser, sem tocar a main thread. O ganho de performance e o menor consumo de bateria em comparação com soluções JavaScript são consideráveis.

File System WritableStream e WebCodecs Audio

File System WritableStream no OPFS

A File System WritableStream API adiciona o método createWritable() ao Safari, fechando uma lacuna na implementação do Origin Private File System (OPFS) do WebKit. Até o Safari 26, a única forma de escrever arquivos no OPFS era via createSyncAccessHandle(), disponível apenas em Web Workers. Com createWritable(), a escrita assíncrona funciona no contexto principal da página.

O OPFS é um sistema de arquivos privado por origem, invisível ao usuário mas persistente entre sessões. Útil para aplicações que precisam armazenar dados estruturados no cliente, como bancos SQLite compilados para Wasm, caches de assets ou arquivos de trabalho de editores web.

const root = await navigator.storage.getDirectory();
const fileHandle = await root.getFileHandle("dados.json", { create: true });
const writable = await fileHandle.createWritable();
await writable.write(JSON.stringify({ nome: "Ana Silva", email: "ana@email.com" }));
await writable.close();

// Leitura do arquivo gravado
const file = await fileHandle.getFile();
const conteudo = await file.text();

O OPFS não substitui showSaveFilePicker (que o Safari continua sem suportar). Para salvar arquivos no sistema de arquivos visível ao usuário, a alternativa continua sendo o download via blob e URL.createObjectURL. Mas para armazenamento persistente de dados da aplicação, createWritable() elimina a necessidade de gambiarras com IndexedDB para guardar binários grandes.

WebCodecs Audio

O Safari 26 expande o suporte à WebCodecs API com AudioEncoder e AudioDecoder. A API já suportava vídeo desde versões anteriores. Agora, desenvolvedores têm acesso de baixo nível aos frames de áudio, possibilitando processamento customizado sem depender de MediaRecorder ou bibliotecas de terceiros.

O MediaRecorder do Safari 26 também ganha suporte a ALAC (Apple Lossless) e PCM, dois codecs que o Chrome não oferece nativamente.

Segurança: Trusted Types e WebAuthn Signal API

Trusted Types

A Trusted Types API previne XSS no lado do cliente. Em vez de aceitar strings arbitrárias em APIs sensíveis como innerHTML ou document.write, o browser passa a exigir objetos tipados que foram sanitizados por uma política definida pela aplicação.

const sanitizer = trustedTypes.createPolicy("sanitize", {
  createHTML: (input) => {
    const div = document.createElement("div");
    div.textContent = input;
    return div.innerHTML;
  }
});

// A string é sanitizada antes de chegar ao DOM
element.innerHTML = sanitizer.createHTML(userInput);

// Sem Trusted Types, isso seria aceito sem validação:
// element.innerHTML = userInput; // TypeError em modo enforced

Com Trusted Types habilitado via Content-Security-Policy (require-trusted-types-for 'script'), qualquer atribuição direta de string a APIs sensíveis gera um TypeError. Força a sanitização no nível da aplicação, antes que o dado chegue ao DOM.

WebAuthn Signal API

A WebAuthn Signal API (PublicKeyCredential.signal*) permite que sites informem aos provedores de credenciais quando uma passkey foi removida ou atualizada do lado do servidor. Sem essa API, um gerenciador de senhas podia continuar oferecendo uma passkey que já não existia no servidor, gerando erro na autenticação.

O que mais mudou no WebKit

O Safari 26 traz mudanças além das APIs de destaque. Algumas valem o registro:

Digital Credentials API: solicita documentos de identidade armazenados na Apple Wallet usando o padrão ISO/IEC 18013-7. Aplicável a verificação de idade e documentos governamentais
URLPattern: API nativa para matching de URLs usando patterns como /blog/:title. Funciona de forma similar ao routing de frameworks como Express, mas sem dependência de servidor
Explicit Resource Management: suporte a Symbol.dispose e DisposableStack em JavaScript, inspirado em patterns de C# (using) e Python (with)
WebAssembly mais rápido: módulos Wasm agora inicializam com um interpretador in-place antes da compilação JIT, reduzindo latência de startup e consumo de memória
CSS contrast-color(): função que retorna preto ou branco dependendo do contraste com a cor de fundo, facilitando acessibilidade dinâmica
CSS text-wrap: pretty: melhora a distribuição de texto em parágrafos, evitando linhas órfãs curtas no final de blocos de texto

Conclusão

O Safari 26 é a maior entrega do WebKit em anos, medida pela quantidade de APIs cross-browser que finalmente chegam. WebGPU completa o suporte em todos os browsers relevantes para uma API que vai definir a próxima geração de aplicações gráficas e de ML no browser. Anchor positioning e scroll-driven animations eliminam categorias inteiras de código JavaScript. E APIs como Trusted Types e File System WritableStream trazem capacidades que desenvolvedores pediam há tempo.

Para quem mantém aplicações cross-browser, vale atualizar a matriz de compatibilidade. Features que antes precisavam de polyfills ou fallbacks para Safari agora são nativas. O Can I Use ficou um pouco menos frustrante.