A plataforma da Web foi novidade em agosto

Descubra alguns dos recursos interessantes que foram lançados em navegadores da Web estáveis e Beta em agosto de 2024.

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.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

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.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

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.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

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.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

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

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

Métodos de toJSON() de geolocalização

O Firefox 129 também tem GeolocationCoordinates.toJSON() e GeolocationPosition.toJSON().

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

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.