Descubra alguns dos recursos interessantes que chegaram aos navegadores da Web estáveis e Beta em março de 2024.
Versões estáveis do navegador
Em março de 2024, o Firefox 124, o Safari 17.4 e o Chrome 123 ficaram estáveis. Esta postagem analisa os novos recursos adicionados à plataforma Web.
Adaptar esquemas de cores com light-dark()
A função de cor light-dark()
está disponível no Chrome 123 e
facilita a adaptação dos esquemas de cores à preferência do usuário.
No exemplo a seguir, color-scheme está definido como light dark em root.
As propriedades personalizadas usam a função de cor light-dark() para definir cores
que serão trocadas dependendo da preferência do usuário no 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().
Melhor controle de entradas com field-sizing
Ainda no Chrome 123, a propriedade field-sizing
permite o crescimento automático dos campos de entrada de texto.
Compatibilidade com navegadores
- 123
- x
- x
- x
Kerning para pontuação CJK com text-spacing-trim
No Chrome 123, a propriedade text-spacing-trim aplica o kerning aos caracteres de pontuação chineses, japoneses
e coreanos (CJK) para ajustar o espaçamento excessivo.
Leia mais em
Introdução aos quatro novos recursos internacionais para CSS.
Compatibilidade com navegadores
- 123
- x
- x
- x
A regra contra a regra do CSS @scope
O Safari 17.4 inclui o @scope, que permite selecionar elementos em subárvores específicas do DOM, 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 do DOM.
Saiba mais em Limitar o alcance dos seletores com a at-rule @scope do CSS
Melhorias no modo picture-in-picture
O Chrome 123 inclui dois recursos para melhorar as experiências picture-in-picture.
O primeiro é o modo de exibição picture-in-picture do CSS.
Isso permite criar regras CSS específicas que são aplicadas somente quando
(parte do) o app da Web é mostrado no modo picture-in-picture.
O segundo recurso permite usar
opener.focus
em uma janela picture-in-picture do documento para levar o foco do sistema
para a guia proprietária da janela.
Isso permite que a guia original volte ao primeiro plano quando necessário. Por exemplo, quando o usuário precisa acessar uma experiência de interface que não se encaixa na janela picture-in-picture menor.
Suporte a align-content no layout de blocos e tabelas.
O Chrome 123 e o Safari 17.4 incluem suporte para align-content
no layout de blocos e tabela. Leia sobre
a mudança no suporte
align-content.
API Service Worker Static Routing
No Chrome 123, a API Service Worker Static Routing está disponível. Essa API permite que você declare de forma declarativa como certos 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 Service Worker Static Routing para ignorar o service worker para 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 oferecer uma compreensão melhor de atualizações lentas da interface do usuário (interface). Isso pode ser útil para identificar frames de animação lentos que provavelmente afetam a métrica Core Web Vitals da Interaction to Next Paint (INP), que mede a capacidade de resposta, ou para identificar outras instabilidades da interface que afetam a suavidade.
Compatibilidade com navegadores
- 123
- x
- x
- x
A propriedade content-visibility
O Firefox 124 inclui suporte para a 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 seja necessário.
Adições a ArrayBuffer e agrupamento de matrizes
No Safari 17.4, o JavaScript recebe alguns novos recursos com suporte para a propriedade detached e
os métodos transfer() e transferToFixedLength() de ArrayBuffer.
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.
Como esses recursos agora são interoperáveis, eles se unem ao valor de referência recém-disponível.
setHTMLUnsafe e parseHTMLUnsafe
Os métodos setHTMLUnsafe e parseHTMLUnsafe enviados no Safari 17.4 permitem que o Shadow DOM seja usado no JavaScript.
Esses métodos também oferecem uma maneira mais fácil de analisar imperativamente HTML em DOM, em comparação com innerHTML ou DOMParser.
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. É um ótimo momento para testar novos recursos ou remoções que podem afetar seu site antes do lançamento ao público. As novas 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. Veja alguns destaques do jogo.
O Firefox 125 está se preparando para ser um lançamento empolgante.
Ela inclui align-content em blocos, o que torna esse recurso interoperável.
A API Popover também está incluída, fazendo parte do valor de referência recém-disponível. A propriedade transition-behavior também será compatível.
O popover e o transition-behavior fazem parte da
Interoperabilidade de 2024 (em inglês).
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. A API WebSocketStream e o atributo writingsuggestions também estão incluídos.