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>.