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.
Compatibilidade com navegadores
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.
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
.
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.
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.
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 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.