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.

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

O Firefox 102 é compatível com Fluxos de transformação. 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

Os streams de bytes legíveis também são compatíveis com o Firefox 102, permitindo um leitor de 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 é renderizado.

Compatibilidade com navegadores

  • Chrome: 113.
  • Borda: 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. É preciso atualizar seu servidor ou CDN para aproveitar o recurso. Saiba mais sobre as dicas iniciais.

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 previamente escrita desta forma:

@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 outra versão empolgante 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

Além disso, para o layout de grade, é possível animar as 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