Veja o que é necessário saber:
- Use a API Document Picture in Picture para aumentar a produtividade do usuário.
- Agora ficou mais fácil depurar folhas de estilo ausentes no DevTools.
- E há muito mais.
Meu nome é Adriana Jara. Vamos conhecer as novidades para os desenvolvedores no Chrome 116.
API Document Picture-in-Picture.
A API Document Picture-in-Picture permite abrir uma janela sempre ativa que pode ser preenchida com conteúdo HTML arbitrário.
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 tem duração maior 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 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);
});
Acesse Picture-in-picture de qualquer elemento para ver mais detalhes e exemplos.
O DevTools não tem melhorias de 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 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.
- 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 painel Network preenche consistentemente a coluna Initiator com links para a linha exata que faz referência a uma folha de estilo que falhou ao ser carregada.
O painel "Issues" lista todos os problemas de carregamento das folhas de estilo, incluindo URLs corrompidos, solicitações com falha e instruções @import no lugar errado.
Confira o que há de novo no DevTools para conhecer todos os detalhes e mais informações sobre o DevTools no Chrome 116.
E muito mais.
Claro, há muito mais.
- A demarcação 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
displayecontent-visibilityagora têm suporte em animações de frame-chave, o que permite que as animações de saída sejam adicionadas exclusivamente em CSS. - A API Fetch agora pode ser usada com leitores de buffer próprio, 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 aborda apenas alguns destaques importantes. Verifique os links abaixo para ver outras mudanças no Chrome 116.
- Novidades no Chrome DevTools (116)
- Descontinuações e remoções do Chrome 116
- Atualizações do ChromeStatus.com para o Chrome 116
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
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.
Adriana Jara, Soja! Assim que o Chrome 117 for lançado, estarei aqui para contar as novidades do Chrome.