Plataforma da Web novidade em maio

Confira alguns dos recursos interessantes que chegaram aos navegadores da Web estáveis e Beta em maio de 2026.

Rachel Andrew

Publicado em: 29 de maio de 2026

Versões estáveis do navegador

O Chrome 148, o Firefox 151 e o Safari 26.5 foram lançados para a versão estável em maio. Esta postagem mostra os vários recursos novos deste mês.

A pseudoclasse :open do CSS se torna Baseline

O Safari 26.5 é principalmente uma versão de correções para recursos atuais. No entanto, ele também inclui suporte para a pseudoclasse :open, tornando esse recurso recém-disponibilizado no Baseline.

A pseudoclasse :open permite estilizar elementos que têm estados "aberto" e "fechado" quando estão abertos. Isso se aplica a elementos como <details> e <dialog> quando estão abertos, bem como a elementos <select> e <input> (como seletores de cor ou data) quando as interfaces de seleção estão aparecendo. Isso oferece uma alternativa semântica e mais limpa ao estilo usando atributos como details[open].

As consultas de contêiner somente com nome do CSS se tornam de linha de base

Com o lançamento do Chrome 148 este mês, as consultas de contêineres somente com nome agora estão disponíveis na versão de referência.

Antes, ao escrever uma consulta de contêiner, era necessário especificar uma condição de consulta de tamanho ou estilo junto com o nome do contêiner e estabelecer o tipo do contêiner com a propriedade container-type. Agora, é possível consultar a presença de um contêiner nomeado apenas pelo nome, sem nenhuma condição adicional. Além disso, não é mais necessário definir um container-type no ancestral se você estiver consultando apenas pelo nome:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

As consultas de estilo de contêiner para propriedades personalizadas se tornam de linha de base

O Firefox 151 oferece suporte a consultas style() em @container, tornando consultas de estilo de contêiner para propriedades personalizadas disponíveis na versão de referência.

Com as consultas de estilo de contêiner, é possível aplicar estilos a elementos com base nas propriedades CSS de um contêiner pai. Embora as consultas de tamanho sejam extremamente úteis, as consultas de estilo permitem consultar recursos que não são de tamanho. Em especial, essa versão traz suporte completo entre navegadores para consultar propriedades personalizadas. Por exemplo, é possível verificar se uma propriedade personalizada --theme está definida como dark em um contêiner pai:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Carregamento lento para elementos de vídeo e áudio

O Chrome 148 apresenta o carregamento lento nativo para elementos <video> e <audio> com o atributo loading="lazy".

Assim como os elementos <img> e <iframe>, agora você pode instruir o navegador a atrasar o carregamento de recursos de mídia até que eles estejam próximos à janela de visualização. Isso ajuda a melhorar o desempenho de carregamento da página, economizar largura de banda e reduzir o uso de dados para seus usuários. Saiba mais com a equipe que implementou esse recurso em Como usar o carregamento lento de vídeo e áudio HTML padrão na Web hoje.

API Picture-in-Picture de documentos

O Firefox 151 introduz suporte à API Document Picture-in-Picture em plataformas de computador.

Ao contrário da API Picture-in-Picture padrão, que permite visualizar um elemento <video> em uma janela sempre no topo, a API Document Picture-in-Picture permite abrir uma janela sempre no topo com conteúdo HTML arbitrário. Isso permite sobreposições interativas avançadas, como grades de participantes de videoconferências, tickers de ações interativos ou timers que permanecem mesmo quando você sai da página.

A API Web Serial amplia a compatibilidade com a plataforma

O Firefox 151 adiciona suporte à API Web Serial em plataformas de computador, e o Chrome 148 adiciona suporte a ela no Android.

A API Web Serial permite que os sites leiam e gravem em dispositivos seriais, como microcontroladores, impressoras 3D, placas de desenvolvimento e hardware periférico. No Firefox, o uso da API Web Serial exige que os usuários instalem um complemento de permissão de site gerado sinteticamente, garantindo um mecanismo seguro e controlado para gerenciar o acesso.

Versões Beta do navegador

As versões Beta do navegador oferecem uma prévia dos recursos da próxima versão estável. É uma ótima hora para testar novos recursos ou remoções que possam afetar seu site antes do lançamento para o mundo todo. As novas versões Beta deste mês são o Chrome 149 e o Firefox 152. Não há uma versão Beta do Safari este mês.

A versão Beta do Chrome 149 inclui atualizações interessantes de CSS, como decorações de lacunas de CSS, permitindo estilizar o espaço em branco (lacunas) entre itens flexíveis e de grade. Ele também é compatível com path() e shape(), além de rect() e xywh(), funções básicas de forma na propriedade shape-outside e path-length como uma propriedade CSS. No lado da API, os métodos de rolagem programática, como scrollTo(), scrollBy() e scrollIntoView(), agora retornam promessas que são resolvidas quando a rolagem suave é concluída, e as páginas com conexões WebSocket ativas agora podem se qualificar para o cache de volta/avanço (BFCache).

O Firefox 152 Beta apresenta suporte completo à propriedade field-sizing, que permite que os controles de formulário ajustem automaticamente o tamanho para se adequar ao conteúdo. Ele também adiciona propriedades actions e maxActions à interface Notification e suporte a options.pseudoElement em Element.getAnimations().