Descubra alguns dos recursos interessantes que chegaram aos navegadores da Web estáveis e Beta em dezembro de 2023.
Versões estáveis do navegador
Em dezembro de 2023, o Firefox 121, o Chrome 120 e o Safari 17.2 ficaram estáveis. Esta postagem analisa o que isso significa para a plataforma Web.
Análise simplificada para transição de CSS
O Chrome 120 e o Safari 17.2 incluem uma análise simplificada para o Nesting de CSS (link em inglês). Como isso era compatível com o Firefox a partir da versão 117, isso significa que todos os principais mecanismos são compatíveis com essa mudança de sintaxe.
Acordeões exclusivos com o elemento <details>
O Chrome 120 e o Safari 17.2 incluem suporte para o atributo name do
elemento <details>. Isso significa que você pode criar componentes de acordeão exclusivos
agrupando vários elementos <details>.
Saiba mais no acordeão exclusivo.
Compatibilidade com navegadores
- 120
- 120
- x
- 17,2
O seletor :has()
O Firefox 121 inclui o seletor de CSS :has(). Esta versão torna o :has() interoperável entre todos os principais mecanismos.
Saiba mais em :has(): o seletor de famílias.
API CSS Custom Highlight
O Safari 17.2 inclui a
API CSS Custom Highlight,
que permite criar e estilizar intervalos de texto,
ampliando as pseudoclasses padrão, como ::selection.
A API CloseWatcher
O Chrome 120 inclui a API CloseWatcher, uma nova API para detectar e responder a solicitações fechadas.
Essas solicitações são acionadas pela tecla ESC no computador e pelo gesto ou botão "Voltar" no Android.
Podem ser difíceis de implementar.
Além da API, o Chrome 120 faz upgrade de <dialog> e do atributo popover para responder ao botão "Voltar" do Android.
Compatibilidade com navegadores
- 120
- 120
- x
- x
CSS text-wrap: balance e stable
O Firefox 121 inclui os valores balance e stable para text-wrap.
O valor balance é útil para blocos curtos de conteúdo, como cabeçalhos,
criando um texto mais agradável e fácil de ler. O valor stable impede que o conteúdo editável volte a ser editado durante a edição.
Saiba mais sobre text-wrap: balance.
text-wrap: balance
text-wrap: stable
Carregamento lento de elementos <iframe>
O Firefox 121 oferece suporte ao atributo loading nos elementos <iframe>.
Isso significa que o carregamento lento de iframes agora é compatível com todos os principais mecanismos.
Compatibilidade com navegadores
- 77
- 79
- 121
- 16.4
Suporte à função de easing linear().
O Safari 17.2 também inclui suporte para a função de easing linear(), que pode ser usada para criar
efeitos de esmaecimento e mola.
Compatibilidade com navegadores
- 113
- 113
- 112
- 17,2
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. É um ótimo momento para testar novos recursos ou remoções que podem afetar seu site antes do lançamento ao público. As novas Betas são Firefox 122, Chrome 121 e Safari 17.3. Essas versões trazem muitos recursos excelentes para a plataforma. Confira as notas da versão para saber todos os detalhes. Veja alguns destaques do jogo.
O Firefox 122 e o Chrome 121 incluem o método showPicker() para HTMLSelectElement.
Isso mostra o mesmo seletor que seria exibido quando o elemento fosse selecionado,
mas que pode ser acionado ao pressionar um botão ou outra interação do usuário.
O Chrome 121 inclui as propriedades de estilo da barra de rolagem scrollbar-color e scrollbar-width,
além de um melhor mascaramento de CSS para SVG
e destaca pseudoelementos em textos com erros ortográficos ou gramaticais.