Novidades do Chrome 110

Adriana Jara

Veja o que é necessário saber:

  • Adicione um estilo personalizado aos elementos picture-in-picture com a nova pseudoclasse :picture-in-picture.
  • Defina o comportamento de inicialização do app da Web com launch_handler no manifesto.
  • usar o atributo credentialless em iframes para incorporar conteúdo de terceiros que não define uma política de incorporador entre origens
  • E tem muito mais.

Meu nome é Adriana Jara. Vamos conferir as novidades para desenvolvedores no Chrome 110.

Pseudoclasse :picture-in-picture

Com a API Picture-in-Picture, os sites podem criar uma janela de vídeo flutuante, sempre na parte superior, para que os usuários continuem consumindo mídia enquanto interagem com outros conteúdos.

Agora, com a pseudoclasse :picture-in-picture css, você pode adicionar estilos aos elementos para melhorar a experiência.

O snippet abaixo mostra como usar a classe picture-in-picture para adicionar uma mensagem ao contêiner de vídeo que lembra o usuário de que o vídeo está sendo reproduzido em outro lugar.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

Use a pseudoclasse novamente no elemento de vídeo para torná-lo transparente e mostrar a mensagem corretamente.

Teste o exemplo e melhore suas experiências de vídeo picture-in-picture.

launch_handler do manifesto.

A API Launch Handler permite controlar como seu app da Web é iniciado. Por exemplo, se ele usa uma janela existente ou uma nova e se a janela escolhida será direcionada para o URL de início.

Vamos analisar um exemplo: em ambientes de computador, se você instalar um app e acessá-lo no navegador, haverá um botão para mover para a janela do app independente. Antes, o único comportamento possível era iniciar o app em uma nova janela.

Agora, usando o membro do manifesto launch_handler, os apps da Web podem personalizar o comportamento de inicialização.

Por exemplo, o snippet abaixo faz com que todas as inicializações deste app da Web se concentrem em uma janela do app existente e naveguem até ela (se existir), em vez de sempre abrirem uma nova janela.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

iframes credentialless.

Um dos maiores desafios do isolamento entre origens é que todos os iframes entre origens precisam implantar COEP e CORP . Um iframe sem esses cabeçalhos não será carregado pelo navegador.

O atributo credentialless ajuda a incorporar iframes de terceiros que não definem esses cabeçalhos.

Com credentialless, o iframe é carregado de um contexto diferente e vazio. Em particular, ele é carregado sem cookies. O iframe começa com um cookie jar vazio.

Da mesma forma, APIs de armazenamento, como LocalStorage, CacheStorage e assim por diante, carregam e armazenam dados na nova partição temporária. Todo esse armazenamento é limpo quando o documento de nível superior é descarregado. Isso permite remover a restrição do COEP.

Confira mais informações neste artigo sobre como usar credentialless com segurança para carregar conteúdo de terceiros nos seus iframes.

E muito mais.

E, claro, há muito mais.

O Web SQL foi removido em contextos não seguros.

A propriedade CSS initial-letter oferece uma maneira de definir o número de linhas em que uma letra inicial precisa ser inserida nas linhas de texto seguintes.

O FileSystemHandle agora inclui um método remove().

Leitura adicional

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

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.

Meu nome é Adriana Jara, e assim que o Chrome 111 for lançado, vou falar sobre as novidades do Chrome.