Descubra alguns dos recursos interessantes que chegaram na versão Stable e Beta. navegadores da Web em julho de 2024.
Lançamentos de navegadores estáveis
Em julho de 2024, Firefox 128, Safari 17.6 e O Chrome 127 se tornou estável. Esta postagem analisa os novos recursos adicionados à plataforma Web.
Sintaxe de cor relativa de CSS
O Firefox 128 inclui
Sintaxe de cores relativas a CSS,
isso permite criar uma cor relativa a uma cor de origem.
O CSS a seguir reduz a saturação da cor indigo
pela metade, usando hsl()
.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Compatibilidade com navegadores
- 119
- 119
- 128
- 16.4
Há muito mais exemplos na postagem do blog Sintaxe de cores relativas a CSS (link em inglês). A sintaxe de cor relativa é uma das áreas de foco do Interop 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 é compatível com 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
- 77
- 79
- 128
- 17,4
Uma atualização no Chrome 127 garante que o Chrome aceite um número arbitrário de
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
, também uma área de foco para a Interop 2024.
Essa propriedade é útil para situações em que pode ocorrer uma substituição de fonte,
já que ajuda a corresponder o tamanho de uma fonte substituta à fonte de primeira escolha.
Com este lançamento do Chrome, a propriedade font-size-adjust
se torna parte de
Valor de referência recentemente disponível.
Suporte à 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.
Antes, executar uma transição de visualização usando document.startViewTransition em um iframe de mesma origem não funcionaria se o frame principal estivesse executando uma transição ao mesmo tempo. A transição do iframe seria ignorada automaticamente. Agora, as duas transições serão executadas.
Contêineres de rolagem focalizáveis do teclado
No Chrome 127, os controles de rolagem têm foco em cliques e programaticamente com foco por padrão. Por padrão, os controles de rolagem sem filhos focalizáveis são focalizáveis pelo teclado.
Saiba mais sobre essa mudança na postagem. Rolagens focalizáveis do teclado.
A regra @property
O Firefox 128 é compatível com a regra @property
e o JavaScript relacionado.
APIs de terceiros. Isso significa que você pode criar propriedades CSS personalizadas que definem uma sintaxe,
herança e um valor inicial.
No exemplo a seguir, a propriedade personalizada é definida para aceitar um <color>
somente valor, para 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 recém-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
Redimensionável ArrayBuffer e crescimento SharedArrayBuffer agora são compatíveis com o Firefox 128, permitindo que o tamanho dos buffers seja alterado sem ter que alocar um novo buffer e copiar dados nele. Essas propriedades também mesclam dados de referência recentemente disponíveis.
A palavra-chave safe
nas propriedades flexbox
O Safari 17.6 é basicamente uma versão de correções para os recursos existentes,
No entanto, ela também inclui a palavra-chave safe
para propriedades de alinhamento flexbox.
Isso torna a palavra-chave safe
interoperável em vários navegadores.
Compatibilidade com navegadores
- 115
- 115
- 63
- 18
A palavra-chave safe
impede que um alinhamento escolhido faça com que o conteúdo seja exibido fora do
área visível. O CodePen a seguir mostra como isso funciona
com itens centralizados. Se o alinhamento center
causar perda de dados,
Em vez disso, start
é usado.
Versões do navegador Beta
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 poderiam afetar seu site antes do lançamento oficial. Novo Betas são Firefox 129 e Chrome 128: O Safari 18 versão Beta ainda está em andamento. Esses lançamentos trazem muitos recursos excelentes para a plataforma. Confira o lançamento a observação para todos os detalhes. Estes são alguns destaques.
O Chrome 128 inclui a propriedade CSS ruby-align
, junto com mudanças em
possibilitam quebras de linha em elementos que têm display: ruby
, o
A propriedade zoom
também foi atualizada para corresponder à especificação. Há
uma atualização na API AudioContext
para adicionar um callback atribuído
AudiContext.onerror
, que informa erros de criação e renderização do AudioContext.
O Firefox 129 inclui a regra @starting-style
e a transition-behavior
. Essas propriedades vão se tornar parte do valor de referência recentemente disponível quando
O Firefox 129 foi lançado na versão estável.