Novidades no Chrome 62

Pete LePage

E tem muito mais!

Meu nome é Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 62.

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

Indicador de qualidade da rede

A API Network Information já está disponível no Chrome há algum tempo, mas ela só fornece velocidades de rede teóricas, considerando a conexão do usuário. Imagine que você está usando o Wi-Fi, mas está conectado a um ponto de acesso de rede móvel que tem apenas velocidades de 2G. A API vai informar o Wi-Fi.

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

No Chrome 62, a API foi expandida para fornecer métricas de desempenho de rede reais do cliente. Com esses indicadores, você pode adaptar o conteúdo à rede. Por exemplo, em conexões muito lentas, é possível melhorar o desempenho de carregamento da 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 estiver conectada a uma conexão de fibra super rápida, a API informará 4G.

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

Esses indicadores também estarão disponíveis como cabeçalhos de solicitação HTTP e ativados por Sugestões para o cliente. Confira o exemplo e a especificação para saber mais.

Fontes variáveis OpenType

Tradicionalmente, uma fonte continha apenas uma única instância de uma família de fontes, por exemplo, um peso ou um alongamento. Se você quiser usar fontes normais, em negrito e itálico, é necessário incluir três fontes separadas, aumentando o peso da página.

Uma fonte variável OpenType é o 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, estilos, pesos, extensões e muito mais podem ser ajustados com facilidade, oferecendo um número infinito de variações estilísticas. 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 Introdução às fontes variáveis OpenType de John Hudson para mais detalhes.

Captura de mídia de elementos DOM

Agora é possível capturar ao vivo o conteúdo em um MediaStream diretamente de HTMLMediaElements, como áudio e vídeo, com a API Media Capture from DOM Elements.

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

Rótulos "Não seguro" para algumas páginas HTTP

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

E muito mais.

Estas são apenas algumas das mudanças no Chrome 62 para desenvolvedores. Há muitas outras.

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

Meu nome é Pete LePage, e assim que o Chrome 63 for lançado, vou estar aqui para contar as novidades do Chrome.