Primeira vez na plataforma da Web em março

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

Rachel Andrew

Versões estáveis do navegador

Em março de 2024, o Firefox 124, o Safari 17.4 e o Chrome 123 se tornaram estáveis. Esta postagem aborda os novos recursos adicionados à plataforma da Web.

Adaptar esquemas de cores com light-dark()

A função de cor light-dark() foi lançada no Chrome 123 e facilita a adaptação de esquemas de cores às preferências do usuário. No exemplo abaixo, color-scheme é definido como light dark em root. As propriedades personalizadas usam a função de cor light-dark() para definir cores que serão alternadas de acordo com a preferência do usuário para o modo claro ou escuro.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Encontre mais exemplos e detalhes em Cores dependentes de color-scheme do CSS com light-dark()

Compatibilidade com navegadores

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Origem

Melhor controle de entradas com field-sizing

Também no Chrome 123, a propriedade field-sizing ativa campos de entrada de texto que crescem automaticamente.

Compatibilidade com navegadores

  • Chrome: 123.
  • Edge: 123.
  • Firefox: incompatível.
  • Safari: não é compatível.

Origem

Kerning para pontuação CJK com text-spacing-trim

No Chrome 123, a propriedade text-spacing-trim aplica kerning a caracteres de pontuação chineses, japoneses e coreanos (CJK) para ajustar o espaçamento excessivo. Leia mais em Apresentação de quatro novos recursos internacionais para CSS.

Compatibilidade com navegadores

  • Chrome: 123.
  • Edge: 123.
  • Firefox: não é compatível.
  • Safari: incompatível.

Origem

A regra at-rule CSS @scope

O Safari 17.4 inclui @scope, que permite selecionar elementos em subárvores DOM específicas, segmentando elementos com precisão sem precisar escrever seletores muito específicos que são difíceis de substituir e sem acoplar os seletores muito à estrutura DOM.

Saiba mais em Limitar o alcance dos seletores com a regra @scope do CSS.

Compatibilidade com navegadores

  • Chrome: 118
  • Edge: 118.
  • Firefox: atrás de uma flag.
  • Safari: 17.4.

Origem

Melhorias no modo picture-in-picture

O Chrome 123 inclui dois recursos para melhorar as experiências picture-in-picture. O primeiro é o picture-in-picture modo de exibição do CSS. Isso permite que você escreva regras de CSS específicas que só são aplicadas quando (parte do) app da Web é mostrado no modo picture-in-picture.

O segundo recurso permite usar opener.focus em uma janela picture-in-picture de documento para trazer o foco do sistema para a guia que é proprietária da janela picture-in-picture do documento.

Assim, você pode trazer a guia original de volta para o primeiro plano quando necessário. Por exemplo, quando o usuário precisa acessar uma experiência de interface que não cabe na janela picture-in-picture menor.

Suporte para align-content no layout de bloco e de tabela

O Chrome 123 e o Safari 17.4 incluem suporte para align-content no layout de bloco e de tabela. Leia sobre a mudança no suporte a align-content.

API Service Worker de roteamento estático

No Chrome 123, a API Service Worker Static Routing está disponível. Essa API permite declarar como determinados caminhos de recursos devem ser buscados, o que significa que o navegador não precisa executar um service worker apenas para buscar respostas de um cache ou diretamente da rede.

Saiba mais em Usar a API de roteamento estático do Service Worker para ignorar o service worker em caminhos específicos.

API Long Animation Frames

O Chrome 123 também inclui a API Long Animation Frames, que é uma atualização da API Long Tasks para entender melhor as atualizações lentas da interface do usuário (IU). Isso pode ser útil para identificar frames de animação lentos que provavelmente afetam a métrica Core Web Vital Interaction to Next Paint (INP), que mede a capacidade de resposta, ou para identificar outros problemas de instabilidade da interface que afetam a fluidez.

Compatibilidade com navegadores

  • Chrome: 123
  • Edge: 123.
  • Firefox: incompatível.
  • Safari: não é compatível.

Origem

A propriedade content-visibility

O Firefox 124 inclui suporte à propriedade CSS content-visibility. Essa propriedade controla se um elemento renderiza o conteúdo, permitindo que os navegadores omitam a renderização do conteúdo até que ele seja necessário.

Compatibilidade com navegadores

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 125
  • Safari: 18.

Origem

Adições a ArrayBuffer e agrupamento de matrizes

No Safari 17.4, o JavaScript recebe alguns novos recursos com suporte à propriedade detached e aos métodos transfer() e transferToFixedLength() de ArrayBuffer.

Compatibilidade com navegadores

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 122
  • Safari: 17.4

Origem

O Safari 17.4 também inclui os métodos de agrupamento de matriz Object.groupBy e Map.groupBy. Para saber mais sobre o agrupamento de matrizes, leia O JavaScript está recebendo métodos de agrupamento de matrizes.

Compatibilidade com navegadores

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 119
  • Safari: 17.4.

Origem

Esses recursos agora são interoperáveis e, portanto, fazem parte do valor de referência recentemente disponível.

setHTMLUnsafe e parseHTMLUnsafe

Os métodos setHTMLUnsafe e parseHTMLUnsafe enviados no Safari 17.4 permitem que o DOM paralelo declarativo seja usado no JavaScript. Esses métodos também oferecem uma maneira mais fácil de analisar de forma imperativa o HTML no DOM, em comparação com innerHTML ou DOMParser.

Versões do navegador Beta

As versões Beta 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 o Firefox 125 e o Chrome 124. 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 Firefox 125 está se tornando uma versão incrível. Ele inclui align-content em blocos, tornando esse recurso interoperável. A API Popover também foi incluída e, portanto, passou a fazer parte da Baseline Newly Available. A propriedade transition-behavior também será aceita. O pop-up e o transition-behavior fazem parte da Interop 2024.

O Chrome 124 inclui os métodos setHTMLUnsafe e parseHTMLUnsafe para permitir que o shadow DOM declarativo seja usado no JavaScript, tornando esses recursos interoperáveis. Também está incluída a API WebSocketStream e o atributo writingsuggestions.