Novidades no Chrome 116

Veja o que é necessário saber:

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

a API Document Picture-in-Picture.

A API Document Picture-in-Picture torna possível abrir uma janela sempre ativada que pode ser preenchida com conteúdo HTML arbitrário.

Uma janela picture-in-picture que reproduz o vídeo de trailer do Sintel.
Uma 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 as outras janelas.
  • A janela picture-in-picture nunca passa da 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 da 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 a opção Picture-in-picture de qualquer elemento para mais detalhes e exemplos.

No DevTools, faltam melhorias na depuração das folhas de estilo.

O DevTools recebeu várias melhorias para identificar e depurar problemas com folhas de estilo ausentes.

Primeiro: o menu Fontes > A árvore de páginas agora mostra apenas as folhas de estilo implantadas e carregadas com êxito, para minimizar a confusão.

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

Instruções sublinhadas com dicas no painel Origens.

  • 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 fornece links para as linhas exatas com declarações problemáticas.

O painel Rede preenche consistentemente a coluna Iniciador com links para a linha exata que faz referência a uma folha de estilo que falhou ao carregar.

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

O painel &quot;Problemas&quot; com links para fontes e solicitações.

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

E muito mais.

É claro que há muito mais.

  • Com a demarcação de animação, os autores podem posicionar qualquer objeto gráfico e animá-lo 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 animações de saída sejam adicionadas exclusivamente em CSS.
  • A API Fetch agora pode ser usada com leitores do Bring Your Own Buffer (em inglês), reduzindo a sobrecarga da coleta de lixo e as cópias, além de melhorar a capacidade de resposta dos usuários.
.

Leitura adicional

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

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no Canal Chrome Developers no YouTube, e você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

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