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:

  • O CSS Scroll Snap permite criar experiências de rolagem suaves e elegantes.
  • Os cortes de tela permitem usar a área completa da tela, incluindo qualquer espaço atrás do corte de tela, às vezes chamado de entalhe.
  • A API Web Locks permite adquirir uma trava de forma assíncrona, retê-la enquanto o trabalho é realizado e, em seguida, liberá-la.

E tem muito mais.

Meu nome é 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

Conferir a demonstração | Origem

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

O CSS Scroll Snapping funciona bem, mesmo quando os destinos de fixação têm tamanhos diferentes ou quando são maiores que o controle de rolagem. Confira a postagem Como controlar a rolagem com o CSS Scroll Snap para mais detalhes e exemplos.

Cortes de tela (também conhecidos como entalhes)

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

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 é possível. Por exemplo, para informar ao navegador que ele deve 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 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 projetar sites para o iPhone X. Confira também o tutorial para mais detalhes.

API Web Locks

A API Web Locks permite adquirir uma fechadura de forma assíncrona, mantê-la enquanto o trabalho é realizado e, em seguida, liberá-la. 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 sincronizada com a rede, o código de sincronização tentará adquirir uma trava chamada 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 a trava for liberada, a próxima solicitação da fila vai receber a trava 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 aprofunde-se 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

  • Com a especificação CSS4, agora é possível criar transições de cores ao redor da circunferência de um círculo usando gradientes cônicos. Lea Verou tem um polyfill conic-gradient() CSS que você pode usar, e a página inclui um monte de exemplos muito legais 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 vão receber dois novos métodos: flat() e flatMap(). Elas retornam uma nova matriz com todos os elementos de submatrizes incluídos.
  • E 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?

Agradecemos especialmente a todas as pessoas que ajudaram a criar os 28 episódios de "Novidades do 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 "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 a sério. Esses vídeos ficaram melhores por sua causa!

Agradecemos por assistir.

Novidades do Chrome Bloopers

Preparamos um vídeo divertido com 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

Se quiser 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.

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