A plataforma da Web começou a ser veiculada em julho

Descubra alguns dos recursos interessantes que chegaram na versão Stable e Beta. navegadores da Web em julho de 2024.

Rachel Andrew

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);
}

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.

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.

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.