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 do CSS
O Firefox 128 inclui a
sintaxe de cor relativa 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);
}
Browser Support
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 todos os navegadores agora oferecem suporte a texto alternativo para content
.
Browser Support
Uma atualização no Chrome 127 garante que o Chrome aceite um número arbitrário de
elementos em vez de apenas uma string, permitindo o uso da função
attr()
, por exemplo.
A propriedade font-size-adjust
O Chrome 127 inclui font-size-adjust
, que também é uma área de foco para a interoperabilidade em 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, transições simultâneas de visualização do mesmo documento em um frame principal e um iframe de mesma origem estarão disponíveis.
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 com foco no 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.
Regra @property
O Firefox 128 inclui suporte à regra @property
e às APIs JavaScript
relacionadas. Isso significa que você pode criar propriedades personalizadas de CSS que definem uma sintaxe,
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 da versão mais recente da linha de base. Leia 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 do 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.
Browser Support
A palavra-chave safe
impede que um alinhamento escolhido faça com que o conteúdo seja exibido 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. O Safari 18 ainda está em fase Beta. 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 Chrome 128 inclui a propriedade CSS ruby-align
, além de mudanças para
tornar os quebras de linha possíveis 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 fazer parte da baseline recém-disponível quando
o Firefox 129 for lançado na versão estável.