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

Descubra alguns dos recursos interessantes que foram lançados em navegadores da Web estáveis e Beta em julho de 2024.

Rachel Andrew

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

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.

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.

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.