Novidades no Chrome 64

Pete LePage

E tem muito mais!

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

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

ResizeObserver

Monitorar quando o tamanho de um elemento muda pode ser um pouco complicado. Provavelmente, você vai anexar um listener ao evento resize do documento e, em seguida, chamar getBoundingClientRect ou getComputedStyle. No entanto, ambos podem causar o colapso do layout.

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

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

Como outros observadores, o uso é muito simples. Crie um objeto ResizeObserver e transmita um callback para o construtor. O callback vai 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 document.onresize para o Elements para mais detalhes e exemplos reais.

Odeio abas de navegação. Você conhece esse tipo de evento, é quando uma página abre um pop-up para algum destino E navega pela página. Normalmente, um deles é um anúncio ou algo que você não quer.

A partir do Chrome 64, esse tipo de navegação será bloqueado, e o Chrome vai mostrar uma interface nativa para o usuário, permitindo que ele siga o redirecionamento se quiser.

import.meta

Ao escrever módulos JavaScript, geralmente é necessário ter acesso a metadados específicos do host sobre o módulo atual. O Chrome 64 agora oferece suporte à propriedade import.meta em 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.

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

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

window.alert()

Ah, e mais uma! Embora isso não seja realmente um "recurso para desenvolvedores", me deixa feliz. O window.alert() não traz mais uma guia em segundo plano para o 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 disparou window.alert em mim. Estou olhando seu Google Agenda antigo.

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

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