Novidades no Chrome 62

E tem muito mais!

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

Quer a lista completa de mudanças? 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 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 a performance de carregamento da página exibindo uma versão reduzida.

Para simplificar a lógica do aplicativo, a API retorna o desempenho da rede medido em comparação com uma conexão de celular. Por exemplo, se estiver conectado a uma conexão de fibra super rápida, a API vai 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 de várias fontes individuais que podem ser empacotadas de forma compacta em um único arquivo de fonte. Ao ajustar a propriedade font-variation-settings do CSS, o alongamento, o estilo, o peso e muito mais podem ser ajustados com facilidade, oferecendo um número infinito de variações estilísticas. Agora, essas três fontes 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 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

Como anunciamos anteriormente, a partir do Chrome 62, quando um usuário insere dados em uma página HTTP, o Chrome marca a página como "Não segura" com um rótulo na barra de endereço. Esse rótulo também vai aparecer 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, se inscreva no nosso canal do YouTube e receba 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.