Novidades do Chrome 110

Adriana Jara

Veja o que é necessário saber:

  • Adicione estilo personalizado aos seus elementos picture-in-picture com a nova pseudoclasse :picture-in-picture.
  • Defina o comportamento de inicialização do seu app da Web com launch_handler no seu manifesto.
  • usar o atributo credentialless em iframes para incorporar conteúdo de terceiros que não defina uma política de incorporação de origem cruzada;
  • E há muito mais.

Meu nome é Adriana Jara. Vamos conhecer as novidades para os 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 de cima, para que os usuários continuem consumindo mídia enquanto interagem com outros conteúdos.

Agora, com a pseudoclasse CSS :picture-in-picture (link em inglês), é possível 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 tornar o elemento transparente e exibir a mensagem corretamente.

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

launch_handler.

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 é navegada até o URL de inicialização.

Vamos conferir um exemplo: em ambientes de computador, quando você instala um app e o acessa no navegador, há um botão para ir para a janela do app independente. Antes, o único comportamento possível era iniciar o app em uma nova janela.

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

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

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

credentialless de iframes.

Um dos maiores desafios do isolamento de origem cruzada é que todos os iframes de origem cruzada 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 usando um contexto vazio diferente. Mais especificamente, 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 é liberado quando o documento de nível superior é descarregado. Isso permite remover a restrição de COEP.

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

E muito mais.

E, claro, há muito mais.

O Web SQL agora é removido em contextos não seguros.

A propriedade initial-letter (link em inglês) do CSS fornece uma maneira de definir o número de linhas que uma letra inicial precisa encaixar nas linhas de texto seguintes.

FileSystemHandle agora inclui um método remove().

Leia mais

Isso aborda apenas alguns destaques importantes. Verifique os links abaixo para ver outras mudanças no Chrome 110.

Fazer inscrição

Para ficar por dentro, inscreva-se no canal do YouTube para desenvolvedores do Chrome. Você receberá 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, estarei aqui para contar as novidades do Chrome.