Plataforma da Web novidade em junho

Descubra alguns dos recursos interessantes que chegaram aos navegadores da Web estáveis e beta em junho de 2026.

Rachel Andrew

Publicado em: 30 de junho de 2026

Versões estáveis do navegador

O Chrome 149, o Chrome 150 e o Firefox 152 foram lançados para a versão estável em junho. Não houve lançamento de uma versão estável do Safari este mês. Esta postagem mostra os novos recursos que estão chegando aos navegadores da Web.

O dimensionamento de controles de formulário com field-sizing se torna o valor de referência

O Firefox 152 introduz suporte à propriedade field-sizing do CSS, tornando o dimensionamento automático do controle de formulário disponível em todos os principais mecanismos de navegador.

A propriedade field-sizing permite que controles de formulário, como <textarea>, <input> e <select>, diminuam ou aumentem dinamicamente para se ajustar ao conteúdo (field-sizing: content) em vez de permanecerem fixos em um tamanho padrão (field-sizing: fixed). Isso elimina a necessidade de soluções alternativas em JavaScript ao criar entradas de texto ou textareas que são redimensionados conforme os usuários digitam.

textarea {
  field-sizing: content;
}

As formas básicas rect() e xywh() em shape-outside se tornam de referência

Com o Chrome 149, o suporte para as funções de forma rect() e xywh() na propriedade shape-outside foi lançado. Essas formas básicas agora estão disponíveis no Baseline em todos os principais navegadores.

Com as funções rect() e xywh(), é possível definir áreas de exclusão flutuantes retangulares usando coordenadas de encarte exatas ou sintaxe de origem e dimensões. Isso oferece uma sintaxe mais simples e legível do que usar polygon() para formas de ajuste de ponto flutuante retangulares.

Escalonamento automático de fontes com CSS text-fit

O Chrome 150 apresenta a propriedade CSS text-fit, permitindo que os desenvolvedores dimensionem automaticamente os tamanhos das fontes para se ajustar à largura de uma caixa de contêiner.

.headline {
  text-fit: grow;
}

Decorações de lacuna do CSS

O Chrome 149 apresenta suporte para decorações de lacunas CSS em layouts de grade e flexbox. Com as decorações de lacuna, é possível adicionar linhas e estilos diretamente ao espaçamento entre itens de grade e flexíveis, semelhante a column-rule em layouts de várias colunas.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Saiba mais em Decorações de lacuna: agora no Chromium.

CSS background-clip: border-area

O Chrome 150 adiciona suporte para background-clip: border-area do CSS Backgrounds Level 4.

Esse valor corta os planos de fundo dos elementos especificamente na área da borda, permitindo criar bordas de gradiente personalizadas, bordas de frame decorativas e efeitos de borda animados sem exigir elementos de encapsulamento ou pseudoelementos extras.

Promessas de rolagem programática

O Chrome 150 atualiza os métodos de rolagem programática (scrollTo(), scrollBy() e scrollIntoView()) para retornar uma promessa.

A promessa retornada é resolvida quando a animação de rolagem suave termina, fornecendo um sinal confiável para acionar ações de acompanhamento assim que a rolagem se estabiliza.

Navegação declarativa pelo teclado com focusgroup

O Chrome 150 apresenta suporte para o atributo focusgroup.

O atributo focusgroup permite que os desenvolvedores gerenciem de forma declarativa a navegação com as teclas de seta em controles de interface compostos (como barras de ferramentas, listas de guias e menus) sem escrever manualmente listeners de eventos de teclado.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Saiba mais no artigo explicativo sobre grupos focais.

WebSockets compatíveis com o cache de avanço e retorno (bfcache)

No Chrome 149, as páginas com conexões WebSocket ativas agora podem entrar no cache de avanço e retorno (bfcache).

Antes, uma conexão WebSocket aberta tornava uma página inelegível para o bfcache. Agora, o navegador fecha automaticamente as conexões WebSocket ativas na entrada do bfcache, permitindo que a página seja armazenada em cache e restaurada instantaneamente quando você volta para ela.

Tempo de resposta do cabeçalho e provisório no Resource Timing

O Firefox 152 adiciona compatibilidade com firstInterimResponseStart e finalResponseHeadersStart na interface PerformanceResourceTiming.

Eles podem ser usados para medir quanto tempo leva para o navegador receber respostas HTTP provisórias e a resposta HTTP final após o envio de uma solicitação, respectivamente.

Botões de ação para notificações

O Firefox 152 adiciona suporte a botões de ação de notificação usando a propriedade actions em Notification e opções em ServiceWorkerRegistration.showNotification().

Agora é possível incluir botões de ação em notificações do SO e detectar interações do usuário quando os botões são tocados.

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 Firefox 153 e o Safari 27.

O Firefox 153 Beta apresenta suporte para Error.stackTraceLimit para configurar a profundidade máxima da pilha de rastreamento capturada, IDBObjectStore.getAllRecords() e IDBIndex.getAllRecords() para recuperar registros indexados e RTCDtlsTransport.getRemoteCertificates() para inspeção de segurança do WebRTC. Os desenvolvedores de complementos também ganham uma nova API publicSuffix e um método userScripts.execute() para injeção de script sob demanda.

O Safari 27 Beta apresenta posicionamento de âncora com reconhecimento de transformação, a pseudoclasse :heading para correspondência de elementos de cabeçalho, a palavra-chave revert-rule para reverter camadas em cascata, suporte à palavra-chave stretch no dimensionamento de caixa e seletores compostos :host:has().