Veja o que é necessário saber:
- Use a API Document Picture in Picture para aumentar a produtividade do usuário.
- Ficou mais fácil depurar folhas de estilo ausentes no DevTools
- E tem muito mais.
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.
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.
- 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 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.
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
displayecontent-visibilityagora 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.
- Novidades no Chrome DevTools (116)
- Descontinuação 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
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.