Descubra alguns dos recursos interessantes que foram lançados em navegadores da Web estáveis e Beta em julho de 2024.
Versões estáveis do navegador
Em julho de 2024, o Firefox 128, o Safari 17.6 e o Chrome 127 se tornaram estáveis. Esta postagem aborda os novos recursos adicionados à plataforma da Web.
Sintaxe de cor relativa de CSS
O Firefox 128 inclui a
sintaxe de cores relativas do CSS,
que permite criar uma cor relativa a uma cor de origem.
O CSS a seguir desatura a cor indigo
pela metade, usando hsl()
.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Compatibilidade com navegadores
Confira mais exemplos na postagem do blog CSS relative color syntax. A sintaxe de cores relativa é uma das áreas de foco da interoperabilidade 2024. Por isso, essa atualização ajuda a melhorar a pontuação do Firefox estável.
Texto alternativo para a propriedade content
O Firefox 128 oferece suporte a texto alternativo para a propriedade CSS content
quando ela inclui uma imagem. O texto alternativo é exposto à árvore de acessibilidade.
Isso significa que o texto alternativo agora é compatível com todos os navegadores para content
.
Compatibilidade com navegadores
Uma atualização no Chrome 127 garante que o Chrome aceite um número arbitrário de
elementos em vez de apenas uma única string, permitindo o uso da função
attr()
, por exemplo.
A propriedade font-size-adjust
O Chrome 127 inclui font-size-adjust
, também uma área de foco para a Interop 2024.
Essa propriedade é útil em situações em que pode ocorrer fallback de fonte,
porque ajuda a corresponder o tamanho de uma fonte de fallback à primeira escolha.
Com essa versão do Chrome, a propriedade font-size-adjust
passa a fazer parte do
Baseline Newly Available.
Suporte para a API View Transition em iframes
No Chrome 127, haverá transições simultâneas de visualização de um mesmo documento em um frame principal e um iframe de mesma origem.
Anteriormente, executar uma transição de visualização usando document.startViewTransition em um iframe de mesma origem não funcionava se o frame principal estivesse executando uma transição ao mesmo tempo. A transição do iframe seria pulada automaticamente. Agora, as duas transições serão executadas.
Contêineres de rolagem focalizáveis do teclado
No Chrome 127, os controles de rolagem podem ser focalizados por clique e programaticamente por padrão. Os controles de rolagem sem filhos focalizáveis podem ser focalizados pelo teclado por padrão.
Saiba mais sobre essa mudança na postagem Scrollers com foco no teclado.
A regra @property
O Firefox 128 inclui suporte para a regra @property
e as APIs JavaScript
relacionadas. Isso significa que você pode criar propriedades personalizadas de CSS que definem uma sintaxe, uma herança e um valor inicial.
No exemplo a seguir, a propriedade personalizada é definida para aceitar apenas um valor <color>
, não herdar e ter um valor inicial de hotpink
.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
A regra @property
agora faz parte do valor de referência recentemente disponível. Saiba mais em
@property: variáveis CSS de última geração agora com suporte universal a navegadores.
ArrayBuffer
redimensionável e SharedArrayBuffer
expansível
ArrayBuffer redimensionável e SharedArrayBuffer com crescimento agora são compatíveis com o Firefox 128, permitindo que o tamanho dos buffers seja alterado sem precisar alocar um novo buffer e copiar dados para ele. Essas propriedades também vão para a seção "Recém disponíveis" da página de destino.
A palavra-chave safe
nas propriedades flexbox
O Safari 17.6 é principalmente uma versão de correções de recursos existentes,
mas também inclui a palavra-chave safe
para propriedades de alinhamento de flexbox.
Isso torna a palavra-chave safe
compatível com vários navegadores.
Compatibilidade com navegadores
A palavra-chave safe
evita que um alinhamento escolhido faça com que o conteúdo seja mostrado fora da
área visível. O CodePen a seguir mostra como isso funciona
com itens alinhados ao centro. Se o alinhamento center
causar perda de dados, o
start
será usado.
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 129 e Chrome 128. A versão beta do Safari 18 ainda está em andamento. 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 Chrome 128 inclui a propriedade CSS ruby-align
, junto com mudanças para
permitir quebras de linha em elementos que têm display: ruby
. A
propriedade zoom
também foi atualizada para corresponder à especificação. Há
uma atualização na API AudioContext
para adicionar um callback atribuído a
AudiContext.onerror
, que informa erros de criação e renderização do AudioContext.
O Firefox 129 inclui a regra @starting-style
e a propriedade
transition-behavior
. Essas propriedades vão se tornar parte do valor de referência recentemente disponível quando
o Firefox 129 for lançado na versão estável.