Novidades no Chrome 115

Adriana Jara

Veja o que é necessário saber:

  • Use ScrollTimeline e ViewTimeline para criar animações de rolagem que melhoram a experiência do usuário.
  • Os frames delimitados funcionam com outras APIs do Sandbox de privacidade para incorporar conteúdo relevante e evitar compartilhamentos de contexto desnecessários.
  • Com a API Topics, o navegador pode compartilhar informações com terceiros sobre os interesses de um usuário, preservando a privacidade.
  • E tem muito mais.

Meu nome é Adriana Jara. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 115.

Animações movidas por rolagem

As animações de rolagem são um padrão de UX comum na Web. Uma animação de rolagem é vinculada à posição de um contêiner de rolagem. Isso significa que, conforme você rola para cima ou para baixo, a animação vinculada vai para frente ou para trás em resposta direta.

Os exemplos a seguir demonstram alguns casos de uso. Por exemplo, você pode criar indicadores de leitura que se movem conforme você rola a tela:

Um indicador de leitura na parte de cima de um documento, acionado por rolagem.

As animações de rolagem também podem criar elementos que aparecem gradualmente:

As imagens nesta página aparecem gradualmente à medida que são exibidas.

Por padrão, uma animação anexada a um elemento é executada na linha do tempo do documento. O tempo de origem começa em 0 quando a página é carregada e começa a avançar conforme o tempo avança. Esta é a linha do tempo de animação padrão e, até agora, era a única à qual você tinha acesso.

A especificação de animações de rolagem define dois novos tipos de linhas do tempo que podem ser usados:

  • Linha do tempo do progresso de rolagem: uma linha do tempo vinculada à posição de rolagem de um contêiner de rolagem ao longo de um eixo específico.
  • Linha do tempo do progresso de visualização: uma linha do tempo vinculada à posição relativa de um elemento específico no contêiner de rolagem.

Confira um exemplo de código que usa uma linha do tempo do progresso de rolagem anônima para criar um indicador de progresso de leitura fixado na parte de cima da viewport.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Leia Animações de rolagem para conferir todos os detalhes e mais exemplos.

Frames isolados

O Sandbox de privacidade é uma iniciativa para criar tecnologias que protejam a privacidade das pessoas on-line e forneçam aos desenvolvedores ferramentas para criar negócios digitais de sucesso.

Muitas das propostas têm como objetivo atender a casos de uso entre sites sem cookies de terceiros ou outros mecanismos de rastreamento. Exemplo:

Para preservar a privacidade, algumas dessas APIs exigem uma nova maneira de incorporar conteúdo. A solução é chamada de frame limitado.

Os frames delimitados funcionam com outras propostas do Sandbox de privacidade para mostrar documentos de diferentes partições de armazenamento em uma única página.

Um frame isolado é um elemento HTML para conteúdo incorporado, semelhante a um iframe. Ao contrário dos iframes, um frame isolado limita a comunicação com o contexto de embedding para permitir que o frame acesse dados entre sites sem compartilhá-los com o contexto.

Da mesma forma, os dados próprios no contexto de incorporação não podem ser compartilhados com o frame protegido.

Recurso iframe fencedframe
Incorporar conteúdo Sim Sim
O conteúdo incorporado pode acessar o DOM do contexto de incorporação Sim Não
O contexto de incorporação pode acessar o DOM do conteúdo incorporado Sim Não
Atributos observáveis, como name Sim Não
URLs (http://example.com) Sim Sim (depende do caso de uso)
Fonte opaca gerenciada pelo navegador (urn:uuid) Não Sim
Acesso a dados entre sites Não Sim (depende do caso de uso)

Por exemplo, digamos que news.example (o contexto de incorporação) incorpore um anúncio de shoes.example em um frame restrito. O news.example não pode extrair dados do anúncio shoes.example, e o shoes.example não pode aprender dados próprios do news.example.

Uma comparação do estado anterior e posterior do particionamento de armazenamento.

Confira estes artigos para conferir a documentação sobre Frames restritos, a API Protected Audience, o armazenamento compartilhado e muito mais.

API Topics

No passado, cookies de terceiros e outros mecanismos foram usados para rastrear o comportamento de navegação do usuário em sites para inferir temas de interesse. Esses mecanismos estão sendo descontinuados como parte da iniciativa do Sandbox de privacidade.

A API Topics permite que um navegador compartilhe informações com terceiros sobre os interesses de um usuário, preservando a privacidade.

A API Topics ativa a publicidade com base em interesses (IBA) sem rastrear os sites que um usuário visita. O navegador observa e registra temas que parecem ser de interesse do usuário com base na atividade de navegação dele. Essas informações são gravadas no dispositivo do usuário.

Por exemplo, a API pode sugerir o tema "Fiber & Textile Arts" para um usuário que acessa o site knitting.example.

Os tópicos são um indicador para ajudar as plataformas de adtech a selecionar anúncios relevantes. Ao contrário dos cookies de terceiros, essas informações são compartilhadas sem revelar mais detalhes sobre o usuário ou a atividade de navegação dele.

Leia a visão geral do Sandbox de privacidade para conferir todos os detalhes sobre a taxonomia de tópicos e o uso da API Topics.

E muito mais.

Claro que há muito mais.

  • O tamanho máximo de uma WebAssembly.Module na linha de execução principal foi aumentado para 8 megabytes.
  • A propriedade CSS display agora aceita várias palavras-chave como valor, além das palavras-chave predefinidas legados.
  • Há um teste de origem para a API Compute Pressure, que oferece informações de alto nível sobre o estado atual do hardware do dispositivo.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 115.

Inscrever-se

Para ficar por dentro das novidades, 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.

Adriana Jara! Assim que o Chrome 116 for lançado, estarei aqui para contar as novidades do Chrome!