Plataforma da Web novidade em junho

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

Rachel Andrew

Versões estáveis do navegador

Em junho, o Chrome 103 e o Firefox 102 se tornaram estáveis.

Transformar fluxos e fluxos de bytes legíveis

O Firefox 102 inclui suporte para Transform Streams. Isso permite o encaminhamento de ReadableStream para um WritableStream, executando uma transformação nos blocos. É ótimo que esse recurso esteja disponível nos três mecanismos. Aproveite para aprender sobre as streams.

Compatibilidade com navegadores

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Origem

Fluxos de bytes legíveis também são aceitos no Firefox 102, permitindo um leitor BYOB (traga seu próprio buffer) com a interface ReadableStreamBYOBReader. Ele pode ser usado para transmitir dados fornecidos pelo desenvolvedor.

Compatibilidade com navegadores

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 102.
  • Safari: não é compatível.

Origem

Acessar fontes instaladas localmente

O Chrome 103 inclui a API Local Fonts Access, que permite o acesso às fontes instaladas localmente do usuário. Depois de solicitar acesso às fontes instaladas no dispositivo, chame window.queryLocalFonts() para receber uma matriz das fontes instaladas.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

O recurso de mídia update

O Firefox 102 inclui o recurso de mídia update. É usado para consultar se o dispositivo de saída pode modificar a aparência do conteúdo depois que ele for renderizado.

Compatibilidade com navegadores

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

Origem

Um novo código de status HTTP: 103 dicas iniciais

O Chrome 103 adiciona um novo código de status HTTP 103 Early Hints. Se o servidor ou CDN souber que um determinado conjunto de subrecursos é necessário para carregar uma página, ele poderá aconselhar o navegador a fazer uma pré-conexão com as origens ou até mesmo pré-carregar os recursos à medida que a página que os exige for carregada. Para aproveitar o recurso, é necessário atualizar o servidor ou a CDN. Saiba mais sobre os Early Hints.

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 de abril foram o Chrome 104, o Firefox 103 e o Safari 16.

Nova sintaxe para consultas de mídia de intervalo

O Chrome 104 inclui a nova sintaxe para consultas de mídia de intervalo, da especificação de consultas de mídia de nível 4. Por exemplo, uma consulta de mídia gravada anteriormente assim:

@media (min-width: 400px) { … }

Agora pode ser escrito assim:

@media (width >= 400px) { … }

Compatibilidade com navegadores

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Origem

API Region Capture

O Chrome 104 para computadores também inclui a API Region Capture. Isso permite cortar e remover conteúdo do vídeo capturado antes de compartilhar.

O Safari 16 traz vários recursos importantes para o navegador

O Safari 16 parece ser mais uma versão incrível da equipe do Safari. Esta versão adiciona muitos dos recursos incluídos na Interop 2022. É ótimo ver tantos lançamentos no meio do ano. Vou destacar alguns dos meus recursos favoritos aqui, mas confira as notas da versão para saber mais.

Assim como muitos desenvolvedores, estou muito feliz em ver o suporte de consultas de tamanho para consultas de contêiner, um recurso que também está por trás de uma flag no Chrome.

O Safari 16 também oferece suporte ao valor subgrid para grid-template-columns e grid-template-rows. Esse recurso já está disponível no Firefox e em desenvolvimento no Chrome. Ele permite que o tamanho da faixa da grade seja herdado por grades aninhadas.

Compatibilidade com navegadores

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Origem

Também para o layout de grade, é possível animar faixas de grade.

Compatibilidade com navegadores

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

O método showPicker(), que permite uma maneira canônica de mostrar um seletor de navegador para datas, hora, cor e arquivos, foi incluído. Saiba mais em Mostrar um seletor de navegador para data, hora, cor e arquivos.

Compatibilidade com navegadores

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16.

Origem

Os problemas de acessibilidade do display: contents também foram resolvidos, tornando esse recurso útil seguro para uso sem o perigo de remover elementos da árvore de acessibilidade.

Esses recursos Beta serão lançados em breve nos navegadores estáveis.

Parte da série Novidades da Web