Novidades do Chrome 69

Pete LePage

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

No Chrome 69, adicionamos suporte para:

  • O Scroll Snap CSS permite que você crie experiências de rolagem suaves e eficientes.
  • Os cortes da tela permitem usar toda a área da tela, incluindo qualquer espaço atrás do corte da tela, às vezes chamado de entalhe.
  • A API Web Locks permite adquirir um bloqueio de forma assíncrona, mantê-lo enquanto o trabalho é executado e depois liberá-lo.

E tem muito mais!

Meu nome é Pete LePage. Vamos conhecer as novidades do Chrome 69 para os desenvolvedores!

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

Snap de rolagem do CSS

Confira a demonstração | Origem

O ajuste de rolagem CSS permite que você crie experiências de rolagem suaves e inteligentes, 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. Depois, à medida que o usuário percorre o carrossel, cada imagem é rolada suavemente para 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 do CSS funciona bem, mesmo quando os destinos de ajuste têm tamanhos diferentes ou quando são maiores que o botão de rolagem. Confira a postagem Rolagem bem controlada com o Snap de rolagem CSS para conferir mais detalhes e exemplos que você pode testar.

Cortes de tela (também conhecidos como entalhes)

Smartphone com corte de tela
Os navegadores adicionam alguma margem extra em um dispositivo móvel com recorte de tela para evitar que o conteúdo seja coberto pelo recorte.

Há um número crescente de dispositivos móveis sendo lançado com corte de 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 coberto por entalhes.

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

Agora isso é possível com as variáveis de ambiente CSS e a metatag viewport-fit. Por exemplo, para instruir o navegador a 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, você pode usar as variáveis de ambiente CSS safe-area-inset-* para definir o layout do 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 (em inglês) ou confira a explicação para mais detalhes (links em inglês).

API Web Locks

A API Web Locks permite adquirir um bloqueio de forma assíncrona, mantê-lo enquanto o trabalho é executado e liberá-lo. Enquanto o bloqueio estiver mantido, nenhum outro script na origem poderá adquirir o mesmo bloqueio, ajudando a coordenar o uso de recursos compartilhados.

Por exemplo, se um app da Web executado em várias guias quiser garantir que apenas uma guia esteja sendo 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 o bloqueio sincronizará os dados com a rede. Se outra guia tentar conseguir 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.

A MDN tem uma ótima introdução sobre Web Locks e inclui uma explicação mais detalhada e muitos exemplos. Ou se aprofunde e confira as spec.

E muito mais.

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

gradiente cônico

  • A partir da especificação do CSS4, agora é possível criar transições de cores em torno da circunferência de um círculo, usando gradientes de cônica. A Lea Verou tem um polyfill conic-gradient() do CSS (links em inglês) que você pode usar, e a página inclui várias amostras muito legais enviadas pela comunidade.
  • Há um novo método toggleAttribute() nos elementos que ativa 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 de submatriz adicionados a ela.
  • E 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 easter eggs no vídeo?

Um agradecimento especial a todas as pessoas que ajudaram a fazer os 28 episódios de "Novidades no Chrome" acontecerem. 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 ver até onde chegou o "Novidades no Chrome" desde o primeiro episódio? Confira este divertido vídeo de progressão de 30 segundos que traça 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 e levo suas sugestões a sério. Estes vídeos ficaram melhores graças a vocês!

Agradecemos por assistir.

Novidades nos erros de gravação do Chrome

Criamos um boletim de erros de gravação curto para você curtir! Depois de assistir, eu aprendi algumas coisas:

  • Quando troco minhas palavras, faço alguns barulhos estranhos.
  • Faço caras e coloco a língua para fora.
  • Eu me remexo bastante.

Inscrever-se

Para ficar por dentro dos nossos vídeos, inscreva-se no canal de desenvolvedores do Chrome no YouTube. 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 70 for lançado, terei aqui as novidades do Chrome!