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:

  • Com o CSS Scroll Snap, é possível criar experiências de rolagem suaves e elegantes.
  • Com os cortes da tela, é possível usar toda a área da tela, incluindo o espaço atrás do corte, às vezes chamado de entalhe.
  • A API Web Locks permite adquirir uma chave de forma assíncrona, mantê-la enquanto o trabalho é realizado e depois liberá-la.

E tem muito mais!

Sou Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 69!

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

CSS Scroll Snap

O CSS Scroll Snap permite criar experiências de rolagem suaves e elegantes, declarando posições de ajuste 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, eu 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 o 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;
}

O ajuste de rolagem CSS funciona bem, mesmo quando os destinos de ajuste têm tamanhos diferentes ou são maiores que o scroller. Confira a postagem Rolagem bem controlada com CSS Scroll Snap para mais detalhes e exemplos que você pode testar.

Cortes de tela (também conhecidos como entalhes)

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

Há um número crescente de dispositivos móveis lançados com um corte 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 do CSS e a metatag viewport-fit, agora é possível. Por exemplo, para informar ao navegador que ele precisa se expandir para a área de corte da 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 CSS do safe-area-inset-* para criar o layout do 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.

API Web Locks

A API Web Locks permite adquirir um bloqueio de forma assíncrona, mantê-lo enquanto o trabalho é realizado e liberá-lo. 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 esteja sincronizando 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 o bloqueio vai sincronizar os dados com a rede. Se outra guia tentar adquirir o mesmo bloqueio, ela será enfileirada. Quando o bloqueio for liberado, a próxima solicitação na fila vai receber o bloqueio e será executada.

O MDN tem um ótimo guia sobre Web Locks que inclui uma explicação mais detalhada e muitos exemplos. Ou confira a especificação para mais detalhes.

E muito mais.

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

gradiente cônico

  • Na 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ários exemplos enviados pela comunidade.
  • Há um novo método toggleAttribute() em elementos que alterna a existência de um atributo, semelhante a classList.toggle().
  • As matrizes JavaScript estão recebendo dois novos métodos: flat() e flatMap(). Elas retornam uma nova matriz com todos os elementos da submatriz combinados.
  • Além disso, OffscreenCanvas move o trabalho da linha de execução principal para um worker, ajudando a eliminar gargalos de desempenho.

Easter eggs

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

Um agradecimento especial a todas as pessoas que ajudaram a criar os 28 episódios do New in Chrome. 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 New in Chrome desde o primeiro episódio? Confira este divertido vídeo de progressão de 30 segundos que mostra nossa história desde o primeiro vídeo até hoje!

E, claro, agradecemos por assistir e enviar seus comentários e feedback. Eu leio todos eles e levo suas sugestões a sério. Esses vídeos melhoraram por sua causa!

Agradecemos por assistir.

Erros de gravação das Novidades do Chrome

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

  • Quando me atrapalho com as palavras, faço uns barulhos estranhos.
  • Faço caretas e mostro a língua.
  • Eu me mexo muito.

Inscrever-se

Quer ficar por dentro dos nossos vídeos? Inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.

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