Plataforma da Web novidade em maio

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

Em maio de 2023, o Firefox 113, o Chrome 113, o Chrome 114 e o Safari 16.5 foram estáveis. Vamos conferir o que isso significa para a plataforma da Web.

WebGPU

O Chrome 113 inclui a WebGPU, a sucessora das APIs gráficas WebGL e WebGL 2 para a Web. Ele oferece recursos modernos, como computação GPU, acesso com menor overhead a hardware da GPU, capacidade de renderizar várias telas a partir de um único dispositivo gráfico, além de desempenho melhor e mais previsível.

Compatibilidade com navegadores

  • Chrome: 113
  • Borda: 113.
  • Firefox Technology Preview: compatível.
  • Safari Technology Preview: compatível.

Origem

Conjuntos próprios

Os conjuntos primários (QPS) fazem parte do Sandbox de privacidade. É uma maneira de as organizações declararem relações entre sites para que os navegadores possam decidir quando permitir o acesso limitado de cookies de terceiros para sites em um conjunto. O FPS começou um lançamento gradual no Chrome 113.

Recursos de mídia CSS e muito mais

No CSS, o Chrome 113 inclui os recursos de mídia overflow-inline e overflow-block.

Compatibilidade com navegadores

  • Chrome: 113.
  • Borda: 113.
  • Firefox: 66.
  • Safari: 17.

Origem

E o recurso de mídia update.

Compatibilidade com navegadores

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Origem

Também está incluída a função de suavização linear(), sobre a qual você pode saber mais no artigo Criar curvas de animação complexas no CSS com a função de suavização linear().

Compatibilidade com navegadores

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Recursos do nível 4 de cores do CSS

O Firefox 113 inclui as notações funcionais color(), lab(), lch(), oklab(), oklch() e color-mix(), além da propriedade forced-color-adjust. Isso significa que os novos espaços de cores e funções agora têm suporte nos três principais mecanismos. Saiba mais sobre esses espaços e funções de cores no guia de cores de CSS de alta definição.

Compatibilidade com navegadores

  • Chrome: 111.
  • Borda: 111.
  • Firefox: 113
  • Safari: 16.2.

Origem

Mais controle sobre as seleções do :nth-child()

O Firefox 113 também adiciona a capacidade de transmitir uma lista de seletores para :nth-child() e nth-last-child(). Saiba mais sobre isso e confira exemplos na postagem Mais controle sobre as seleções :nth-child() com a sintaxe de S.

Compatibilidade com navegadores

  • Chrome: 111
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

API Compressions Streams

Agora, com suporte nos três principais mecanismos devido à inclusão no Firefox 113, a API Compressions Streams permite a compactação e descompactação de streams. Isso significa que os aplicativos JavaScript não precisam mais agrupar uma biblioteca de compactação.

Compatibilidade com navegadores

  • Chrome: 80.
  • Borda: 80.
  • Firefox: 113.
  • Safari: 16.4.

Origem

Anilhamento de CSS

O Safari 16.5 resolveu a maioria dos problemas, mas também adicionou suporte ao aninhamento de CSS, com o novo seletor de aninhamento >, usado para aninhar regras de estilo relacionadas de uma forma que será familiar para desenvolvedores que usaram pré-processadores:

.nesting {
 
color: hotpink;

 
> .is {
   
color: rebeccapurple;

   
> .awesome {
     
color: deeppink;
   
}
 
}
}

Compatibilidade com navegadores

  • Chrome: 120.
  • Borda: 120.
  • Firefox: 117.
  • Safari: 17.2.

Origem

Como equilibrar manchetes com text-wrap: balance

No Chrome 114, você pode usar text-wrap: balance. Isso permite que você equilibre os títulos, evitando o problema de ter uma única palavra na linha final, fornecendo um resultado mais agradável e legível. Saiba mais em CSS text-wrap: balance.

Compatibilidade com navegadores

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

Origem

CHIPS: cookies com estado particionado independente

Como parte do trabalho de encerrar o uso de cookies de terceiros, o CHIPS permite ativar o particionamento de cookies de terceiros por site de nível superior usando o novo atributo de cookies Partitioned. A CHIPS está disponível no Chrome 114.

A API Popover

Também no Chrome 114, está a API Popover, que facilita a criação de elementos temporários da interface do usuário (IU) exibidos por cima de todas as outras interfaces de apps da Web.

Isso inclui elementos interativos do usuário, como menus de ação, sugestões de elementos de formulário, seletores de conteúdo e interface de ensino.

O novo atributo de pop-up permite que qualquer elemento seja exibido na camada superior automaticamente. Isso significa que o desenvolvedor não precisa mais se preocupar com posicionamento, elementos empilhados, foco ou interações com o teclado.

Saiba mais em Introdução à API popover.

Compatibilidade com navegadores

  • Chrome: 114
  • Borda: 114.
  • Firefox: 120.
  • Safari: 17.

Origem

Versões Beta do navegador

As versões Beta do navegador oferecem uma prévia dos recursos que vão estar na próxima versão estável do navegador. É um ótimo momento para testar novos recursos ou exclusões que possam afetar seu site antes que o mundo receba a versão. As novas versões Beta são o Firefox 114, o Chrome 115 e o Safari 16.6. Essas versões trazem muitos recursos excelentes para a plataforma. Confira as notas da versão para saber todos os detalhes. Confira alguns destaques abaixo.

O Chrome 115 inclui vários valores para a propriedade CSS display. Isso significa que display: flex se torna display: block flex, e display: block se torna display: block flow. Os valores únicos são mantidos como palavras-chave legados, e, uma vez no Chrome Stable, os vários valores ficam disponíveis em todos os mecanismos.

O Chrome 115 também inclui as extensões ScrollTimeline e ViewTimeline para a especificação de animações da Web. Eles permitem animações de rolagem usando CSS e JavaScript.

O Firefox 114 inclui a API WebTransport, uma atualização moderna para WebSockets que oferece suporte a vários streams, streams unidirecionais e entrega fora de ordem.

Parte da série Novidades da Web