Descubra alguns dos recursos interessantes que chegaram aos navegadores da Web Stable e Beta em maio de 2022.
Versões estáveis do navegador
Em maio, o Chrome 102, o Safari 15.5, o Firefox 100 e o Firefox 101 se tornaram estáveis.
O Chrome 102 e o Safari 15.5 incluem o atributo inert
. Isso remove elementos da ordem de guias e da árvore de acessibilidade se eles não forem interativos. Por exemplo, um elemento que está fora da tela ou oculto.
O Chrome 102 inclui o novo valor until-found
para o atributo HTML hidden
. Isso permite o recurso "Localizar na página" e "rolar até o fragmento de texto" no texto que está dentro de uma área recolhida da página, como você pode encontrar em um padrão acordeão. Saiba mais na postagem Como tornar o conteúdo fechado acessível com hidden=until-found.
O Chrome 102 inclui a API Navigation, que padroniza o roteamento do lado do cliente em aplicativos de página única. Essa API era chamada de API App History.
O Firefox 101 é compatível com folhas de estilo construíveis. O suporte inclui o construtor CSSStyleSheet()
e os métodos replace()
e replaceSync()
. As folhas de estilo configurá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 é impressa no console.
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);
O Firefox 101 também tem o recurso de mídia prefers-contrast
, que está disponível em vários navegadores.
Versões Beta do navegador
As versões Beta oferecem uma prévia do que será incluído na próxima versão estável do navegador. É um ótimo momento para testar novos recursos ou exclusões que possam afetar seu site antes que o mundo receba a versão.
As novas versões Beta de 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 que ele é renderizado. Ele aceita os seguintes valores:
none
- Depois de renderizado, o conteúdo não pode ser atualizado. Por exemplo, um documento impresso.
slow
- O dispositivo pode atualizar o conteúdo, mas muito lentamente para mostrar uma animação suave. Por exemplo, telas E-ink.
fast
- O conteúdo pode mudar dinamicamente e com rapidez suficiente para renderizar animações. Por exemplo, a tela de um computador ou smartphone.
O Chrome 103 inclui a API Local Fonts Access, que permite o acesso às fontes instaladas localmente do usuário.
Esses recursos Beta serão lançados em breve nos navegadores estáveis.
Edição: uma versão anterior desta postagem mencionou o método Element.isVisible()
, que não está sendo enviado nesta versão.
Parte da série na Web do Google