Nova plataforma da Web em setembro

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

Rachel Andrew

Versões estáveis do navegador

Em setembro de 2024, o Firefox 130, o Safari 18 e o Chrome 129 se tornaram estáveis. Neste post, analisamos os novos recursos adicionados à plataforma da Web.

Acordeões exclusivos com o atributo name para <details>

O Firefox 130 oferece suporte ao atributo name do elemento <details>. Ele 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.

Compatibilidade com navegadores

  • Chrome: 120
  • Borda: 120.
  • Firefox: 130.
  • Safari: 17.2.

Animar para automático (e mais)

O Chrome 129 adiciona a propriedade interpolate-size e a função calc-size() do CSS.

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.

Compatibilidade com navegadores

  • Chrome: 129.
  • Edge: não é compatível.
  • Firefox: não é compatível.
  • Safari: não é compatível.

Origem

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 compatíveis são auto, min-content, max-content e fit-content.

Compatibilidade com navegadores

  • Chrome: 129.
  • Edge: 129.
  • Firefox: não é compatível.
  • Safari: não é compatível.

Origem

Saiba mais em Animar para height: auto; (e outras palavras-chave de dimensionamento intrínseco) no CSS.

Formatar durações em JavaScript

O Intl.DurationFormat também está disponível no Chrome 129, fornecendo um método de formatação de durações, por exemplo, "1h40min30s", que oferece suporte a várias localidades.

Compatibilidade com navegadores

  • Chrome: 129
  • Edge: 129.
  • Firefox: não é compatível.
  • Safari: 16.4.

Origem

API WebCodecs

A API Web Codecs agora é compatível com computadores no Firefox 130, oferecendo aos desenvolvedores da Web acesso de baixo nível a frames individuais de um stream de vídeo e a partes de áudio. As novas interfaces incluem: VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame e VideoColorSpace. Essa API não disponibiliza a baseline recém-criada, porque ainda não tem suporte no Firefox para Android, mas há suporte para o Firefox Nightly no Android.

Compatibilidade com navegadores

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130
  • Safari: 16.4.

Origem

Consultas de estilo CSS para propriedades personalizadas

O Safari 18 oferece suporte a vários recursos novos, incluindo consultas de estilo CSS. As consultas de estilo oferecem uma maneira de criar estilos reutilizáveis e aplicá-los como um grupo. Por exemplo, quando você tem um componente reutilizável com várias variações.

Compatibilidade com navegadores

  • Chrome: 111.
  • Edge: 111.
  • Firefox: incompatível.
  • Safari: 18.

Origem

Saiba mais sobre consultas de estilo CSS.

Transições de visualização do mesmo documento

O Safari 18 também oferece suporte a transições de visualização de mesmo documento para SPAs, permitindo a criação de transições visuais entre diferentes estados de um app.

Compatibilidade com navegadores

  • Chrome: 111.
  • Borda: 111.
  • Firefox: não é compatível.
  • Safari: 18.

Origem

Saiba mais sobre as transições de visualização do mesmo documento

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 o Firefox 131, o Chrome 130 e o Safari 18.1. Essas versões trazem muitos recursos excelentes para a plataforma. Confira as notas da versão para mais detalhes. Confira alguns destaques.

O Firefox 131 inclui novos ajudantes de iterador JavaScript e Cookies com estado particionado independente (CHIPS, na sigla em inglês) agora estão ativados.

O Chrome 130 inclui suporte para box-decoration-break: clone para fragmentação inline (layout de linha) e fragmentação de bloco (fragmentos criados para impressão e multicoluna). Há também um relatório de erros melhor no IndexedDB e um novo atributo connected para a interface SerialPort serial da Web.

O Safari 18.1 é uma versão de correções de bugs dos recursos existentes.