Plataforma da Web novidade em maio

Descubra alguns dos recursos interessantes que chegaram aos navegadores da Web estáveis e Beta em maio de 2023.

Versões estáveis do navegador

Em maio de 2023, o Firefox 113, Chrome 113, Chrome 114 e Safari 16.5 ficaram estáveis. Vamos dar uma conferida no 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 com GPU, acesso com menor sobrecarga ao hardware da GPU, capacidade de renderização em várias telas a partir de um único dispositivo gráfico e desempenho melhor e mais previsível.

Conjuntos primários

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

Recursos de mídia CSS e muito mais

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

E o recurso de mídia update.

A função de easing linear() também está incluída. Saiba mais sobre ela no artigo Criar curvas de animação complexas em CSS com a função de easing linear().

Recursos de nível 4 de cor 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 cor e funções agora são suportados nos três principais mecanismos. Saiba mais sobre esses espaços de cor e funções no Guia de cores CSS de alta definição.

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

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 veja exemplos na postagem Mais controle sobre as seleções de :nth-child() com a sintaxe S.

API Compressions Streams

Agora compatível com os 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.

Aninhamento de CSS

O Safari 16.5 resolveu a maioria dos problemas. No entanto, ele também é compatível com aninhamento de CSS, com o novo seletor de aninhamento >, usado para aninhar regras de estilo relacionadas, de uma forma familiar para os desenvolvedores que usaram pré-processadores:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Equilíbrio dos títulos com text-wrap: balance

A partir do Chrome 114, você pode usar text-wrap: balance. Assim, você consegue equilibrar 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 Ajuste de texto do CSS: saldo.

CHIPS: cookies com estado particionado independente

Como parte do trabalho para eliminar gradualmente os cookies de terceiros, a CHIPS permite que cookies de terceiros sejam particionados por sites de nível superior usando o novo atributo de cookie Partitioned. Ela está disponível no Chrome 114.

A API Popover

A API Popover também está no Chrome 114, facilitando a criação de elementos temporários de interface do usuário que são exibidos por cima de todas as outras interfaces de apps da Web.

Isso inclui elementos interativos com o 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, empilhamento de elementos, foco ou interações do teclado.

Saiba mais em Introdução à API popover.

Versões Beta do navegador

As versões Beta do navegador oferecem uma prévia do que vai aparecer na próxima versão estável. Este é um ótimo momento para testar novos recursos ou remoções que podem afetar seu site antes que o mundo receba esse lançamento. As novas versões Beta são Firefox 114, Chrome 115 e Safari 16.6. Essas versões trazem muitos recursos excelentes para a plataforma. Confira as notas da versão para saber todos os detalhes. Aqui estão apenas alguns destaques.

O Chrome 115 inclui diversos valores para a propriedade display do CSS. 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 legadas e, uma vez no Chrome Stable, os vários valores são disponibilizados em todos os mecanismos.

No Chrome 115, também existem as extensões ScrollTimeline e ViewTimeline na especificação Web Animations. Eles permitem animações de rolagem via 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 para iniciantes na Web