Novidades no Chrome 64

Pete LePage

E tem muitos outros!

Meu nome é Pete LePage. Vamos conhecer as novidades para os desenvolvedores no Chrome 64!

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

ResizeObserver

Rastrear quando o tamanho de um elemento muda pode ser um pouco trabalhoso. É provável que você anexe um listener ao evento resize do documento e depois chamará getBoundingClientRect ou getComputedStyle. Porém, ambos podem causar sobrecarga do layout.

E se o tamanho da janela do navegador não mudasse, mas um novo elemento fosse adicionado ao documento? Ou você adicionou display: none a um elemento? Ambas podem mudar o tamanho de outros elementos da página.

ResizeObserver notifica você sempre que o tamanho de um elemento muda e fornece a nova altura e largura do elemento, reduzindo o risco de sobrecarga do layout.

Como outros Observadores, usá-lo é muito simples, crie um objeto ResizeObserver e transmita um callback para o construtor. O callback receberá uma matriz de ResizeOberverEntries, uma entrada por elemento observado, que contém as novas dimensões do elemento.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Confira ResizeObserver: é como a document.onresize para elementos para mais detalhes e exemplos do mundo real.

Eu odeio tab-unders. Você sabe que é quando uma página abre um pop-up em algum destino E navega pela página. Normalmente, um deles é um anúncio ou algo que você não queria.

A partir do Chrome 64, esse tipo de navegação será bloqueada, e o Chrome mostrará IU nativa ao usuário, permitindo que ele siga o redirecionamento, se quiser.

import.meta

Ao escrever módulos JavaScript, normalmente você quer acessar os metadados específicos do host sobre o módulo atual. O Chrome 64 agora oferece suporte à propriedade import.meta nos módulos e expõe o URL do módulo como import.meta.url.

Isso é muito útil quando você quer resolver recursos relativos ao arquivo do módulo, e não ao documento HTML atual.

E muito mais.

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

  • O Chrome agora oferece suporte a capturas nomeadas e escapes de propriedade Unicode em expressões regulares.
  • O valor padrão de preload para elementos <audio> e <video> agora é metadata. Isso alinha o Chrome a outros navegadores e ajuda a reduzir o uso da largura de banda e dos recursos carregando apenas os metadados, e não a mídia em si.
  • Agora você pode usar Request.prototype.cache para ver o modo de cache de um Request e determinar se uma solicitação é de atualização
  • Com a API Focus Management, agora você pode focar um elemento sem rolar até ele com o atributo preventScroll

window.alert()

Ah, e mais uma! Embora não seja realmente um "recurso para desenvolvedores", isso me deixa feliz. window.alert() não coloca mais uma guia em segundo plano em primeiro plano. Em vez disso, o alerta será mostrado quando o usuário voltar para essa guia.

Chega de alternar guias aleatórias porque algo acionou uma window.alert em mim. estou olhando para você, o antigo Google Agenda.

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

Sou Pete LePage e, assim que o Chrome 65 for lançado, estarei aqui para informar as novidades do Chrome!