Descubra alguns dos recursos interessantes que foram lançados em navegadores da Web estáveis e Beta em fevereiro de 2025.
Publicado em 28 de fevereiro de 2025
Versões estáveis do navegador
Em fevereiro de 2025, o Firefox 135 e o Chrome 133 passaram a ser estáveis. Esta postagem aborda os novos recursos adicionados à plataforma da Web.
Verificar os recursos do WebAuthn
O Firefox 135 e o Chrome 133 adicionam suporte ao método
estático
PublicKeyCredential.getClientCapabilities()
. Isso permite verificar se um navegador oferece suporte a recursos da API
Authentication da Web, sem precisar recorrer ao sniffing do navegador.
O Firefox 135 também inclui recursos da
análise JSON com proposta de origem: o
parâmetro reviver
context
do argumento JSON.parse
,
JSON.isRawJSON()
e
JSON.rawJSON()
.
O valor da dica do atributo do pop-up
O Chrome 133 adiciona um terceiro valor para o atributo popover
,
popover="hint"
.
As dicas, que geralmente são associadas a comportamentos do tipo "tooltip", têm comportamentos um pouco diferentes. Agora é possível abrir um popover de dica não relacionado enquanto uma pilha de popovers automáticos permanece aberta.
O exemplo canônico é quando um seletor <select>
está aberto (popover="auto"
) e uma dica acionada por passar o cursor (popover="hint"
) é mostrada. Essa ação não fecha o seletor <select>
.
Browser Support
Leia mais em Popover = dica.
Função attr()
avançada do CSS
Há uma boa coleção de adições de CSS no Chrome 133. Esta versão do Chrome inclui o aumento de
attr()
especificado no CSS Level 5,
que permite tipos além de <string>
e uso em todas as propriedades CSS (além do suporte existente para o conteúdo de pseudoelementos).
Browser Support
Saiba mais em
O CSS attr()
recebe um upgrade.
Consultas de contêiner de estado de rolagem do CSS
Também no Chrome 133, use consultas de contêiner para definir o estilo de descendentes de contêineres com base no estado de rolagem.
O contêiner de consulta é um contêiner de rolagem ou um elemento afetado pela posição de rolagem de um contêiner de rolagem. Os seguintes estados podem ser consultados:
stuck
: um contêiner com posição fixa fica preso a uma das bordas da caixa de rolagem.snapped
: um contêiner alinhado com o ajuste de rolagem está fixado horizontal ou verticalmente.scrollable
: indica se um contêiner de rolagem pode ser rolado na direção consultada.
Também há um novo valor para container-type
: scroll-state
, que permite que os contêineres sejam consultados.
Browser Support
Leia CSS scroll-state()
para saber mais.
CSS text-box
, text-box-trim
e text-box-edge
Também no CSS para o Chrome 133 estão as propriedades text-box-trim
e text-box-edge
,
junto com a propriedade abreviada text-box
.
Elas permitem um controle mais preciso do alinhamento vertical do texto.
Browser Support
Saiba como essa propriedade funciona no CSS text-box-trim
.
Mover preservando o estado do DOM
O Chrome 133 adiciona uma primitiva DOM (Node.prototype.moveBefore
) que permite mover elementos em uma árvore DOM sem redefinir o estado do elemento.
Ao mover em vez de remover e inserir, o estado a seguir é preservado:
- Os elementos
<iframe>
continuam carregados. - O elemento ativo continua em foco.
- Pop-ups, caixas de diálogo modais e em tela cheia permanecem abertos.
- As transições e animações do CSS continuam.
Browser Support
Interface FileSystemObserver
A interface FileSystemObserver
adicionada no Chrome 133 notifica os sites sobre mudanças no sistema de arquivos. Os sites observam as mudanças em arquivos e diretórios, para os quais o usuário concedeu permissão anteriormente, no dispositivo local do usuário ou no sistema de arquivos do bucket (também conhecido como sistema de arquivos particular de origem) e são notificados sobre informações básicas de mudança, como o tipo de mudança.
Browser Support
Versões Beta do navegador
As versões Beta do navegador oferecem uma prévia do que vai estar na próxima versão estável do navegador. É um ótimo momento para testar novos recursos ou remoções que podem afetar seu site antes que o mundo receba a versão. As novas versões Beta são Firefox 136, Safari 18.4 e Chrome 134. Essas versões trazem muitos recursos excelentes para a plataforma. Confira as notas da versão para saber todos os detalhes. Confira alguns destaques.
A versão Beta mais recente do Safari traz uma lista enorme de adições e melhorias,
incluindo alguns recursos que esperamos que fiquem disponíveis na versão de referência
quando o navegador estiver estável. Por exemplo, writing-mode: sideways-rl
e writing-mode: sideways-lr
, o método estático supports()
para ClipboardItem
e uma lista inteira de
coisas da proposta de auxiliares de iterador.
O Safari 18.4 Beta e o Firefox 136 incluem a API Cookie Store, que será disponibilizada como Baseline Newly quando os dois navegadores forem lançados.
O Firefox 136 inclui as pseudoclasses :open
e :has-slotted
,
e a última também está no Chrome 134.
Também inclui Intl.DurationFormat
, que deve ser "Baseline recém-disponível".
O Chrome 134 inclui elementos <select>
personalizáveis, a propriedade CSS dynamic-range-limit
e a funcionalidade de dispensa leve para elementos <dialog>
.