Iniciante na plataforma da Web em janeiro

Descubra alguns dos recursos interessantes que chegaram aos navegadores da Web estáveis e Beta em janeiro de 2024.

Rachel Andrew

Versões estáveis do navegador

Em janeiro de 2024, o Firefox 122, o Chrome 121 e o Safari 17.3 ficaram estáveis. Esta postagem analisa os novos recursos adicionados à plataforma Web.

<hr> no destino: <select>

O Firefox 122 adiciona elementos <hr> como um filho permitido de elementos <select>. Isso facilita a leitura das listas de seleção com muitas opções. Todos os principais mecanismos do navegador agora são compatíveis com esse recurso. No entanto, é importante notar que nenhum navegador atualmente expõe a <hr> à árvore de acessibilidade.

HTMLSelectElement.showPicker

Também para elementos <select> no Firefox é o método showPicker() para HTMLSelectElement. Esse é o mesmo seletor que normalmente seria exibido quando o elemento é selecionado, mas pode ser acionado ao pressionar um botão ou outra interação do usuário.

API Largest Contentful Paint (LCP)

O Firefox 122 também é compatível com a API LCP (link em inglês). Essa API de performance fornece informações de tempo sobre a maior pintura de imagem ou texto antes que os usuários interajam com uma página da Web. Saiba mais sobre a LCP na documentação da LCP.

Propriedades da barra de rolagem de CSS

O Chrome 121 adiciona suporte às propriedades scrollbar-color e scrollbar-width da barra de rolagem. Para saber mais, consulte o artigo Estilo da barra de rolagem.

Animação CSS font-palette

A propriedade font-palette permite selecionar uma paleta específica para renderizar uma fonte de cores. Essa propriedade agora oferece suporte para animação, então, alternar entre paletas se torna uma transição suave entre as duas paletas selecionadas.

Os métodos transfer() e transferToFixedLength() de ArrayBuffer

O Firefox inclui os métodos JavaScript transfer() e transferToFixedLength() de ArrayBuffer. O método transfer() cria um novo ArrayBuffer com o mesmo conteúdo de bytes do ArrayBuffer atual e remove o ArrayBuffer original. O método transferToFixedLength() funciona da mesma maneira, mas cria um tamanho fixo ArrayBuffer.

Atualizações na API Speculation Rules

Os sites usam a API Speculation Rules para informar programaticamente ao Chrome quais páginas devem ser pré-renderizadas, criando uma experiência do usuário melhor, reduzindo o tempo de navegação na página.

O Chrome 121 inclui suporte para regras de documento: elas são uma extensão da sintaxe das regras de especulação que permite ao navegador acessar a lista de URLs para carregamento especulativo dos elementos de uma página. As regras do documento podem incluir critérios para quais desses links podem ser usados. Junto com um novo campo eagerness, é possível pré-buscar ou pré-renderizar automaticamente links nas páginas imediatamente, ao passar o cursor ou ao passar o mouse para baixo.

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 123, Chrome 122 e Safari 17.4. 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 123 Beta inclui o DOM Shadow DOM.

No Firefox 123, também há suporte para o código de status 103 Early Hints da resposta de informações HTTP para pré-carregamento de recursos que a página pode precisar enquanto o servidor prepara a resposta completa.

Há muitas coisas boas no Safari 17.4 beta. Para CSS, há suporte a @scope, align-content em contêineres de bloco e células da tabela, aos pseudoelementos ::grammar-error e ::spelling-error, entre muito mais.

Em formulários, suporte ao modo de escrita vertical em controles de formulário, ao método showPicker() para <input type="date"> e suporte a <hr> dentro de <select> no iOS.

O JavaScript também recebe alguns novos recursos com suporte aos métodos detached(), transfer() e transferToFixedLength() de ArrayBuffer, entre outras coisas.

O Chrome 122 Beta inclui uma opção unsanitized no método read() da API Async Clipboard para recuperar o formato HTML não corrigido. Para JavaScript, há novos auxiliares de iterador e novos métodos para a classe Set integrada.

No Chrome 122, também há a API Storage Buckets, que visa tornar a remoção do armazenamento persistente sob pressão intensa da memória mais previsível.