A plataforma da Web começou a ser nova em dezembro

Descubra alguns dos recursos interessantes que chegaram na versão Stable e Beta. navegadores da Web em dezembro de 2023.

Lançamentos de navegadores estáveis

Em dezembro de 2023, no Firefox 121, Chrome 120 e O Safari 17.2 se tornou estável. Esta postagem aborda o que isso significa para a plataforma Web.

Análise tranquila para transição de CSS

O Chrome 120 e o Safari 17.2 incluem análise relaxada para transição de CSS. Como isso tem suporte do 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 <details>. Isso significa que você pode criar componentes exclusivos de acordeão agrupando vários elementos <details>.

Saiba mais em acordeão exclusivo.

Compatibilidade com navegadores

  • 120
  • 120
  • x
  • 17,2

O seletor :has()

O Firefox 121 inclui o seletor CSS :has(). Esta versão torna o :has() interoperável em todos os principais mecanismos.

Saiba mais no :has(): seletor de família.

Compatibilidade com navegadores

  • 105
  • 105
  • 121
  • 15,4

Origem

API de destaque personalizado do CSS

O Safari 17.2 inclui a API CSS Custom Spotlight que permite criar e estilizar intervalos de texto, estendendo as pseudoclasses de destaque padrão, como ::selection;

Compatibilidade com navegadores

  • 105
  • 105
  • 17,2

Origem

API CloseWatcher

O Chrome 120 inclui a API CloseWatcher, uma nova API para detectar e responder a solicitações de fechamento. Essas solicitações são acionadas pela tecla ESC no computador e pelo gesto ou botão "Voltar" no Android. e pode ser complicado de implementar bem.

Além da API, o Chrome 120 faz upgrade da <dialog> e do atributo popover para responder ao botão "Voltar" do Android.

Compatibilidade com navegadores

  • 126
  • 126
  • 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 textos mais agradáveis e fáceis de ler. O valor stable impede que o conteúdo editável mude novamente durante a edição.

Saiba mais sobre text-wrap: balance.

text-wrap: balance

Compatibilidade com navegadores

  • 114
  • 114
  • 121
  • 17,5

Origem

text-wrap: stable

Compatibilidade com navegadores

  • x
  • x
  • 121
  • 17,5

Origem

Carregamento lento de elementos <iframe>

O Firefox 121 é compatível com o atributo loading em elementos <iframe>. Isso significa que o carregamento lento de iframes agora tem suporte em todos os principais mecanismos.

Compatibilidade com navegadores

  • 77
  • 79
  • 121
  • 16.4

Suporte à função de easing linear().

O Safari 17.2 também é compatível com a função de easing linear(), que pode ser usada para criar efeitos de rejeição e mola.

Compatibilidade com navegadores

  • 113
  • 113
  • 112
  • 17,2

Versões do navegador Beta

As versões Beta do navegador mostram uma prévia do que vai acontecer nas próximas versão estável do navegador. É um ótimo momento para testar novos recursos ou remoções, que poderiam afetar seu site antes do lançamento oficial. Novo Betas são Firefox 122 Chrome 121 e Safari 17.3 Esses lançamentos trazem muitos recursos excelentes para a plataforma. Confira o lançamento a observação para todos os detalhes. Estes são alguns destaques.

O Firefox 122 e o Chrome 121 incluem o método showPicker() para HTMLSelectElement. Isso mostra o mesmo seletor que seria mostrado quando o elemento fosse selecionado, mas 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. junto com um mascaramento CSS aprimorado para SVG, e destacar pseudoelementos em textos com erros ortográficos ou erros gramaticais.