Esta página foi traduzida pela API Cloud Translation.

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 o compartilhamento de contexto desnecessário.
Com a API Topics, o navegador pode compartilhar informações com terceiros sobre os interesses de um usuário, preservando a privacidade.
E há muito mais.

Meu nome é Adriana Jara. Vamos conhecer as novidades para os desenvolvedores no Chrome 115.

Animações de rolagem

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

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

Um indicador de leitura na parte de cima do documento, direcionado pela rolagem.

As animações de rolagem também podem criar elementos que aparecem gradualmente conforme são exibidos:

As imagens nesta página aparecem gradualmente à medida que aparecem.

Por padrão, uma animação anexada a um elemento é executada na linha do tempo do documento. O horário de origem começa em 0 quando a página é carregada e avança à medida que 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 você pode usar:

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 superior da janela de visualização.

<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 ver todos os detalhes e mais exemplos.

Armação de cerca

O Sandbox de privacidade é uma iniciativa que visa 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 satisfazer casos de uso entre sites sem cookies de terceiros ou outros mecanismos de rastreamento. Exemplo:

A API Protected Audience: permite a veiculação de anúncios com base em interesses preservando a privacidade.
Armazenamento compartilhado: permite acesso a dados não particionados entre sites em um ambiente seguro.

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

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 de embedding.

Da mesma forma, nenhum dado próprio no contexto de incorporação pode ser compartilhado com o frame isolado.

Engenharia de	`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 embedding pode acessar o DOM de conteúdo incorporado	Sim	Não
Atributos observáveis, como `name`	Sim	Não
URLs (`http://example.com`)	Sim	Sim (dependendo do caso de uso)
Origem opaca gerenciada pelo navegador (`urn:uuid`)	Não	Sim
Acesso a dados entre sites	Não	Sim (dependendo 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 isolado. O news.example não pode exfiltrar dados do anúncio do shoes.example, e o shoes.example não consegue coletar dados próprios do news.example.

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

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

API Topics

No passado, cookies de terceiros e outros mecanismos eram usados para rastrear o comportamento de navegação do usuário em sites com o objetivo de 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 enquanto preserva a privacidade.

A API Topics permite a publicidade com base em interesses (IBA) sem rastrear os sites visitados pelo usuário. 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 registradas no dispositivo do usuário.

Por exemplo, a API pode sugerir o tema "Fiber & Textile Arts" para um usuário que visita 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 informações sobre o usuário ou a atividade de navegação dele.

Leia a visão geral do Sandbox de privacidade para saber todos os detalhes sobre a taxonomia de temas e como usar a API Topics

E muito mais.

Claro, há muito mais.

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

Novidades no Chrome 115

Animações de rolagem

Armação de cerca

API Topics

E muito mais.

Leia mais

Fazer inscrição