Descubra alguns dos recursos interessantes que foram lançados em navegadores da Web estáveis e Beta em agosto de 2024.
Versões estáveis do navegador
Em agosto de 2024, o Firefox 129 e o Chrome 128 passaram a ser estáveis. Esta postagem aborda os novos recursos adicionados à plataforma da Web.
Atualizações na formatação de rubi
O elemento <ruby>
do HTML é uma ferramenta poderosa para melhorar a apresentação de texto, especialmente para idiomas do leste asiático. Esse elemento permite exibir anotações fonéticas ou outras informações complementares acima ou ao lado do texto base. No Chrome 128 e versões mais recentes, a anotação Ruby pode ser quebrada e você pode estilizar o texto Ruby com a propriedade CSS ruby-align
.
Saiba mais em
Propriedade <ruby>
e CSS ruby-align
com quebra de linha.
PointerEvent.deviceProperties
para pintura com várias canetas
Essa mudança, que está sendo enviada no Chrome 128, oferece uma maneira segura e confiável de identificar canetas individuais (ponteiros) interagindo com a tela para definir cores ou formas específicas para cada dispositivo que interage com o digitalizador. Ele estende a interface PointerEvent
para incluir um novo atributo, deviceProperties
. Ele contém o atributo uniqueId
, que representa um identificador exclusivo persistente na sessão e isolado do documento que pode ser usado para identificar canetas individuais que interagem com a página.
Promise.try
Também no Chrome 128, Promise.try
facilita o processamento de erros com promessas. Há um padrão em que você tem uma função, f
. Essa função pode ser assíncrona e retornar uma promessa ou não. Para usar a semântica de promessas para processar erros em ambos os casos, você envolve a função em uma promessa. Isso geralmente é feito com new Promise(resolve => resolve(f()))
.
Promise.try
é uma maneira mais direta de fazer isso. Ele permite iniciar uma cadeia de promessas que captura todos os erros em gerenciadores .catch
, em vez de precisar processar fluxos de exceção síncronos e assíncronos.
Animar efeitos de entrada
O Firefox 129 inclui dois recursos de CSS usados para animar efeitos de entrada. Esses recursos agora estão disponíveis na versão de referência.
A regra @starting-style
define os estilos iniciais em um elemento antes que ele seja renderizado na página. Isso é necessário para elementos que são animados de display: none, porque eles precisam de um estado para serem animados.
Os efeitos de entrada também exigem a animação de propriedades discretas, aquelas que não podem interpolar entre valores.
Isso pode ser feito com transition-behavior: allow-discrete
ou o valor allow-discrete
na abreviação de transição.
Isso também é compatível com o Firefox 129.
Saiba mais em Agora no valor de referência: animação de efeitos de entrada.
Adições à PerformanceResourceTiming
O Firefox 129 adiciona as propriedades contentType
e responseStatus
da interface PerformanceResourceTiming
.
Eles indicam o tipo de conteúdo do recurso buscado e o código de status da resposta HTTP retornado ao buscar o recurso, respectivamente.
contentType
responseStatus
Métodos de toJSON()
de geolocalização
O Firefox 129 também tem GeolocationCoordinates.toJSON()
e GeolocationPosition.toJSON()
.
WebDriver BiDi
O Firefox 129 agora tem suporte para o WebDriver BiDi. Isso significa que você pode usar o Puppeteer com o Chrome ou o Firefox para automações. Saiba mais em WebDriver BiDi pronto para produção no Firefox, Chrome e Puppeteer e Anúncio do suporte oficial do Puppeteer para o Firefox.
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 do navegador. É um ótimo momento para testar novos recursos ou remoções que podem afetar seu site antes que o mundo receba a versão. As novas versões Beta são Firefox 130 e Chrome 129. O Safari 18 ainda está em fase Beta. Essas versões trazem muitos recursos excelentes para a plataforma. Confira as notas da versão para saber todos os detalhes. Confira alguns destaques.
O Firefox 130 oferece suporte ao atributo name do elemento <details>
que agrupa elementos <details>
, em que apenas um elemento em um grupo pode ser aberto por vez. Isso permite criar um acordeão exclusivo sem usar JavaScript.
O Chrome 129 adiciona a propriedade CSS interpolate-size
e a função calc-size()
.
A propriedade CSS interpolate-size
permite que uma página ative animações e transições de palavras-chave de dimensionamento intrínseco do CSS, como auto
, min-content
e fit-content
, nos casos em que essas palavras-chave podem ser animadas.
A função CSS calc-size()
é semelhante a calc()
, mas também oferece suporte a operações em exatamente uma palavra-chave de dimensionamento compatível. As palavras-chave de dimensionamento atualmente compatíveis são auto
, min-content
, max-content
e fit-content
.
O Chrome 129 também tem Intl.DurationFormat
, que fornece um método de formatação de durações, por exemplo, "1 hora 40 minutos 30 segundos", que oferece suporte a várias localidades.