Novidades do Chrome 69

Pete LePage

Já faz dez anos desde o lançamento do Chrome. Muita coisa mudou desde então, mas nosso objetivo de criar uma base sólida para aplicativos da Web modernos não mudou.

No Chrome 69, adicionamos suporte para:

  • A quebra de rolagem do CSS permite criar experiências de rolagem suaves e elegantes.
  • Os cortes de tela permitem usar toda a área da tela, incluindo qualquer espaço atrás do corte de tela, às vezes chamado de entalhe.
  • A API Web Locks permite adquirir um bloqueio de forma assíncrona, mantê-lo enquanto o trabalho é realizado e, em seguida, liberá-lo.

E tem muito mais.

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

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

Quebra de rolagem do CSS

Conferir a demonstração | Origem

O CSS Scroll Snap permite criar experiências de rolagem suaves e elegantes, declarando posições de snap de rolagem que informam ao navegador onde parar após cada operação de rolagem. Isso é muito útil para carrosséis de imagens ou seções paginadas em que você quer que o usuário role até um ponto específico.

Para um carrossel de imagens, adicionaria scroll-snap-type: x mandatory; ao contêiner de rolagem e scroll-snap-align: center; a cada imagem. Em seguida, conforme o usuário rola pelo carrossel, cada imagem é rolada suavemente até a posição perfeita.


#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

A quebra de rolagem CSS funciona bem, mesmo quando os destinos de fixação têm tamanhos diferentes ou são maiores que o controle de rolagem. Confira o post Rolagem bem controlada com quebra de rolagem CSS para mais detalhes e exemplos.

Cortes da tela (também conhecidos como entalhes)

smartphone com recorte na tela
Os navegadores adicionam uma margem extra em um dispositivo móvel com corte da tela para evitar que o conteúdo seja coberto pelo recorte.

Há um número crescente de dispositivos móveis sendo lançados com um entalhe na tela, às vezes chamado de entalhe. Para lidar com isso, os navegadores adicionam um pouco de margem extra à página para que o conteúdo não seja obscurecido pelo entalhe.

Mas e se você quiser usar esse espaço?

Com as variáveis de ambiente CSS e a metatag viewport-fit, agora você pode. Por exemplo, para instruir o navegador a se expandir para a área de recorte de tela, defina a propriedade viewport-fit na metatag viewport como cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Em seguida, use as variáveis de ambiente do CSS safe-area-inset-* para organizar seu conteúdo.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

Há uma ótima postagem no blog do WebKit sobre Como criar sites para o iPhone X ou confira a explicação para mais detalhes (links em inglês).

API Web Locks

A API Web Locks permite que você adquira um bloqueio de forma assíncrona, o mantenha enquanto a tarefa é realizada e o libere em seguida. Enquanto o bloqueio é mantido, nenhum outro script na origem pode adquirir o mesmo bloqueio, ajudando a coordenar o uso de recursos compartilhados.

Por exemplo, se um app da Web em execução em várias guias quiser garantir que apenas uma guia seja sincronizada com a rede, o código de sincronização tentará adquirir um bloqueio chamado network_sync_lock.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

A primeira guia a adquirir a fechadura vai sincronizar os dados com a rede. Se outra guia tentar adquirir o mesmo bloqueio, ela será colocada na fila. Depois que o bloqueio for liberado, a próxima solicitação na fila receberá o bloqueio e será executada.

O MDN tem uma ótima introdução às fechaduras da Web e inclui uma explicação mais detalhada e muitos exemplos. Ou se aprofunde e confira a especificação.

E muito mais.

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

gradiente cônico

  • A partir da especificação CSS4, agora é possível criar transições de cor ao redor da circunferência de um círculo usando gradientes cônicos. Lea Verou tem um polyfill CSS conic-gradient() que você pode usar, e a página inclui várias amostras muito legais enviadas pela comunidade.
  • Há um novo método toggleAttribute() em elementos que alterna a existência de um atributo, semelhante a classList.toggle().
  • As matrizes do JavaScript estão recebendo dois novos métodos: flat() e flatMap(). Elas retornam uma nova matriz com todos os elementos de submatrizes agrupados.
  • E o OffscreenCanvas move o trabalho da linha de execução principal para um worker, ajudando a eliminar gargalos de desempenho.

Ovos de Páscoa

Você encontrou todos os ovos de Páscoa no vídeo?

Um agradecimento especial a todas as pessoas que ajudaram a disponibilizar os 28 episódios de "Novidades no Chrome" (em inglês). Todas essas pessoas são incríveis!

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

Quer saber o que mudou no "Novidades do Chrome" desde o primeiro episódio? Confira este vídeo de progressão de 30 segundos que mostra nossa história desde o primeiro vídeo até hoje.

E, claro, agradecemos a você por assistir e enviar seus comentários e feedback. Li todas elas e levei suas sugestões em consideração. Esses vídeos ficaram melhores por causa de você!

Agradecemos por assistir.

Novidades nos Bloopers do Chrome

Preparamos um vídeo divertido com os erros de gravação para você. Depois de assistir, aprendi algumas coisas:

  • Quando eu tropeço nas palavras, faço alguns barulhos estranhos.
  • Eu faço caretas e mostro a língua.
  • Eu me mexo muito.

Inscrever-se

Para ficar por dentro dos nossos vídeos, inscreva-se no nosso canal Chrome Developers no YouTube. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

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