Novidades no Chrome 62

Pete LePage

E tem muito mais!

Meu nome é Pete LePage. Vamos conhecer as novidades do Chrome 62 para os desenvolvedores!

Deseja a lista completa de alterações? Confira a lista de alterações de repositório de origem do Chromium.

Indicador de qualidade da rede

A API Network Information está disponível no Chrome há algum tempo, mas só fornece velocidades de rede teóricas, de acordo com a conexão do usuário. Imagine que você está em uma rede Wi-Fi, mas conectado a um ponto de acesso de rede móvel com velocidade de apenas 2G. A API relataria Wi-Fi!

console.log(navigator.connection.type);
> wifi

No Chrome 62, a API foi ampliada para fornecer métricas reais de desempenho de rede do cliente. Com esses sinais de qualidade de rede, é possível personalizar o conteúdo para a rede. Por exemplo, em conexões muito lentas, é possível melhorar o desempenho do carregamento de página exibindo uma versão reduzida.

Para simplificar a lógica do aplicativo, a API retorna o desempenho de rede medido em termos de comparação com uma conexão celular. Por exemplo, se conectado a uma conexão de fibra super-rápida, a API relataria 4G.

console.log(navigator.connection.effectiveType);
> 4G

Esses indicadores também vão estar disponíveis como cabeçalhos de solicitação HTTP e ativados nas Dicas de cliente. Confira a amostra e spec para mais detalhes.

Fontes variáveis OpenType

Tradicionalmente, uma fonte continha apenas uma instância de uma família de fontes, por exemplo, uma espessura ou uma extensão. Se você quiser regular, negrito e itálico, deve incluir três fontes separadas, aumentando o peso da página.

Uma fonte variável OpenType é equivalente a várias fontes individuais que podem ser empacotadas de forma compacta em um único arquivo de fonte. Ao ajustar a propriedade CSS font-variation-settings, os tipos de extensão, estilo, peso e outras opções podem ser facilmente ajustados, fornecendo um número infinito de variações de estilo. Essas três fontes agora podem ser combinadas em um único arquivo compacto.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

As fontes variáveis OpenType nos oferecem uma nova ferramenta poderosa para criar tipografia responsiva e reduzir o peso da página. Confira Apresentando as fontes variáveis do OpenType, de John Hudson, para mais detalhes.

Captura de mídia de elementos DOM

Agora é possível capturar ao vivo conteúdo em um MediaStream diretamente de HTMLMediaElements, como áudio e vídeo, com a captura de mídia da API DOM Elements.

Depois de invocar captureStream() em um elemento de mídia HTML, o conteúdo transmitido pode ser manipulado, processado, enviado remotamente ou gravado. Imagine usar áudio da Web para criar seu próprio equalizador ou vocoder. Ou faça streaming do conteúdo para um site remoto usando WebRTC. As possibilidades são quase infinitas.

Rótulos não seguros para algumas páginas HTTP

Como anunciamos, a partir do Chrome 62, quando um usuário inserir dados em uma página HTTP, o Chrome a marcará como "Não segura" com um rótulo na barra de endereço. Esse rótulo também aparece no modo de navegação anônima para todas as páginas HTTP.

E muito mais.

Essas são apenas algumas das mudanças no Chrome 62 para desenvolvedores. É claro que há muito mais.

Em seguida, inscreva-se no nosso canal do YouTube para receber uma notificação por e-mail sempre que um novo vídeo for lançado.

Eu sou Pete LePage e, assim que o Chrome 63 for lançado, terei aqui as novidades: