Novidades no Chrome 116

Adriana Jara
Adriana Jara

Veja o que é necessário saber:

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

API Document Picture-in-Picture.

A API Document Picture-in-Picture possibilita abrir uma janela sempre ativa que pode ser preenchida com conteúdo HTML arbitrário.

Janela picture-in-picture reproduzindo o vídeo do trailer da Sintel.
Janela Picture-in-Picture criada com a API Document Picture-in-Picture (demonstração).

A janela Picture-in-Picture na API Document Picture-in-Picture é semelhante a uma janela em branco de mesma origem aberta usando window.open(), com algumas diferenças:

  • A janela picture-in-picture flutua sobre outras janelas.
  • A janela picture-in-picture nunca tem vida mais longa do que a janela de abertura.
  • Não é possível navegar pela janela picture-in-picture.
  • A posição da janela picture-in-picture não pode ser definida pelo site.

O HTML a seguir configura um player de vídeo personalizado e um elemento de botão para abrir o player de vídeo em uma janela Picture-in-Picture.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

O JavaScript a seguir chama documentPictureInPicture.requestWindow() quando o usuário clica no botão para abrir uma janela picture-in-picture em branco. A promessa retornada é resolvida com um objeto JavaScript de janela Picture-in-Picture. O player de vídeo é movido para essa janela usando append().

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Confira mais detalhes e exemplos em Picture-in-picture de qualquer elemento.

O DevTools não tem melhorias na depuração das folhas de estilo.

O DevTools recebeu uma série de melhorias para identificar e depurar problemas com folhas de estilo ausentes.

Primeiro: a árvore Origens > Página agora mostra apenas as folhas de estilo implantadas e carregadas com êxito para minimizar a confusão.

Além disso, Sources > Editor agora sublinha e mostra dicas de erro inline ao lado das instruções com falha,@import, url() e href.

Instruções sublinhadas com dicas no painel Sources.

  • O Console, além dos links para solicitações com falha, agora fornece links para a linha exata que faz referência a uma folha de estilo que não foi carregada.

O console tem links para as linhas exatas com declarações problemáticas.

O painel Network preenche de maneira consistente a coluna Initiator com links para a linha exata que faz referência a uma folha de estilo que não foi carregada.

O painel "Problemas" lista todos os problemas de carregamento das folhas de estilo, incluindo URLs corrompidos, solicitações com falha e instruções @import incorretas.

O painel &quot;Issues&quot; com links para origens e solicitações.

Confira as novidades do DevTools para conhecer todos os detalhes e mais informações sobre o DevTools no Chrome 116.

E muito mais.

Claro, há muito mais.

  • A trajetória de animação permite que os autores posicionem qualquer objeto gráfico e o animem ao longo de um caminho especificado pelo desenvolvedor.
  • As propriedades display e content-visibility agora são compatíveis com animações de frame-chave, o que permite que as animações de saída sejam adicionadas exclusivamente em CSS.
  • A API de busca agora pode ser usada com leitores Bring Your Own Buffer, reduzindo a sobrecarga de coleta de lixo e as cópias, além de melhorar a capacidade de resposta para os usuários.

Leia mais

Isso abrange apenas alguns destaques importantes. Acesse os links abaixo para ver outras mudanças no Chrome 116.

Inscrever-se

Para ficar por dentro de tudo, inscreva-se no canal Chrome Developers no YouTube. Você vai receber uma notificação por e-mail sempre que um novo vídeo for lançado.

Olá, Adriana Jara. Assim que o Chrome 117 for lançado, estarei aqui para informar as novidades do Chrome.