Nova plataforma da Web em setembro

Descubra alguns dos recursos interessantes que chegaram na versão Stable e Beta. navegadores da Web em setembro de 2024.

Rachel Andrew

Versões estáveis do navegador

Em setembro de 2024, o Firefox 130, Safari 18 e O Chrome 129 se tornou estável. Isso post analisa os novos recursos adicionados à plataforma Web.

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

O Firefox 130 oferece suporte ao atributo name do elemento <details>. Este grupo Elementos <details>, em que apenas um elemento de um grupo pode ser aberto em um tempo de resposta. Isso permite que você crie um acordeão exclusivo sem usar o 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 as animações e o transições de palavras-chave de dimensionamento intrínsecas do CSS, como auto, min-content fit-content, nos casos em que essas palavras-chave podem ser animadas.

Compatibilidade com navegadores

  • Chrome: 129.
  • Edge: não é compatível.
  • Firefox: incompatível.
  • Safari: incompatí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 tamanho 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: incompatível.

Origem

Saiba mais em Animar para a altura: automático; (e outras palavras-chave de dimensionamento intrínseco) no CSS.

Formatar durações em JavaScript

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.

Compatibilidade com navegadores

  • Chrome: 129
  • Edge: 129.
  • Firefox: incompatível.
  • Safari: 16.4.

Origem

API WebCodecs

A API Web Codecs agora tem suporte no Firefox 130 para computadores, dando aos desenvolvedores da Web acesso de baixo nível aos 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 é tornar o valor de referência recém-disponibilizado, porque ele ainda não é compatível com o Firefox para Android, No entanto, o Firefox oferece suporte noturno para Android.

Compatibilidade com navegadores

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

Origem

Consultas de estilo CSS para propriedades personalizadas

O Safari 18 é compatível com 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 diversas variações.

Compatibilidade com navegadores

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

Origem

Saiba mais sobre Consultas de estilo CSS.

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

O Safari 18 também suporta as mesmas transições de visualização de documentos para SPAs, permitindo criar transições visuais entre diferentes estados de um app.

Compatibilidade com navegadores

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

Origem

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

Versões Beta do navegador

As versões Beta do navegador mostram uma prévia do que vai acontecer nas próximas 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. Novo Beta são o Firefox 131, Chrome 130, e o Safari 18.1. Esses lançamentos trazem muitos recursos excelentes para a plataforma. Confira as notas da versão para saber todos os detalhes. Confira alguns destaques.

O Firefox 131 inclui novos auxiliares de iterador JavaScript e Os cookies com estado particionado independente (CHIPS, na sigla em inglês) foram ativados.

O Chrome 130 inclui suporte a box-decoration-break: clone para comandos inline fragmentação (layout de linha) e fragmentação de blocos (fragmentos criados para print e multicol). Também há um melhor relatório de erros no IndexedDB e um novo atributo connected para a interface SerialPort da série da Web.

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