Descubra alguns dos recursos interessantes que chegaram aos navegadores da Web estáveis e Beta em maio de 2022.
Versões estáveis do navegador
Em maio, o Chrome 102, Safari 15.5, Firefox 100 e Firefox 101 ficaram estáveis.
O Chrome 102 e o Safari 15.5 incluem o atributo inert. Isso remove elementos da ordem de tabulação e da árvore de acessibilidade se eles não forem interativos. Por exemplo, um elemento que está fora da tela ou oculto no momento.
O Chrome 102 inclui o novo valor until-found para o atributo HTML hidden. Isso permite localizar na página e rolar até um fragmento de texto em um texto que está dentro de uma área recolhida da página, como é possível encontrar em um padrão de acordeão. Saiba mais na postagem Como tornar o conteúdo recolhido acessível com "hidden=until-found".
O Chrome 102 inclui a API Navigation, que padroniza o roteamento no lado do cliente em aplicativos de página única. Antes, essa API era chamada de API App History.
O Firefox 101 oferece suporte a folhas de estilo construtáveis. O suporte inclui o construtor CSSStyleSheet() e os métodos replace() e replaceSync(). As folhas de estilo construíveis facilitam a criação de folhas de estilo para uso com o Shadow DOM. No exemplo a seguir, uma folha de estilo é criada usando o construtor CSSStyleSheet(), uma regra CSS é adicionada com o método replaceSync() e a regra resultante é mostrada no console.
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);
No Firefox 101, também encontramos o recurso de mídia prefers-contrast, que o torna disponível em vários navegadores.
Versões Beta do navegador
As versões Beta do navegador oferecem uma prévia do que vai aparecer na próxima versão estável. Este é um ótimo momento para testar novos recursos ou remoções que podem afetar seu site antes que o mundo receba esse lançamento.
As novas versões Beta em abril foram o Chrome 103 e o Firefox 102.
O Firefox 102 inclui o recurso de mídia update. É usado para consultar se o dispositivo de saída pode modificar a aparência do conteúdo depois de renderizado. Ele aceita os seguintes valores:
none- Não é possível atualizar o conteúdo após a renderização. Por exemplo, um documento impresso.
slow- O dispositivo pode atualizar o conteúdo, mas é muito lento para exibir uma animação suave. Por exemplo, telas de tinta eletrônica.
fast- O conteúdo pode mudar dinamicamente e com rapidez suficiente para renderizar animações. Por exemplo, uma tela de computador ou smartphone.
O Chrome 103 inclui a API Local Font Access, que permite acesso às fontes instaladas localmente do usuário.
Esses recursos Beta estarão disponíveis em navegadores estáveis em breve.
Edição: uma versão anterior desta postagem incluía o método Element.isVisible(), que não está disponível nesta versão.
Parte da série para iniciantes na Web