Descubra alguns dos recursos interessantes que foram lançados em navegadores da Web estáveis e beta em setembro de 2024.
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.
Browser Support
Animar para automático (e mais)
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
aceita 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
.
Saiba mais em Animar para height: auto; (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.
API WebCodecs
O
API de codecs da Web
agora é compatível com desktop no Firefox 130, proporcionando web
desenvolvedores acesso de baixo nível aos quadros individuais de um fluxo de vídeo e
pedaços de áudio. As novas interfaces incluem: VideoEncoder
, VideoDecoder
,
EncodedVideoChunk
, VideoFrame
e VideoColorSpace
. Essa API não
disponibiliza a baseline recém-disponível, porque ainda não tem suporte no Firefox para Android,
mas há suporte para o Firefox Nightly no Android.
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.
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.
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 saber todos os 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). 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 com correções de bugs para recursos existentes.