O que você precisa saber:
- O picture-in-picture de documentos oferece mais controle sobre janelas picture-in-picture.
- As declarações aninhadas do CSS corrigem alguns casos extremos complicados.
- É possível especificar o comportamento das decorações em elementos que se dividem em várias linhas.
- E há muito mais.
Sou Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 130.
Picture-in-picture de documentos
A API picture-in-picture é ótima quando você quer abrir um vídeo em uma guia do navegador para ficar de olho nele enquanto interage com outros sites ou aplicativos. Mas ele só faz vídeo.
A API Picture-in-Picture de documentos elimina essa restrição, permitindo que você crie uma janela picture-in-picture em que você tem controle sobre o conteúdo. É ótimo para coisas como players de vídeo personalizados, videoconferências e apps de produtividade. Adoro o que o Spotify fez com ele no web player. Uma janela aparece com a arte da música atual, controles do player e a opção de adicionar a música aos favoritos.
Para usar, peça uma nova janela picture-in-picture de documentos. O promise retornado é resolvido com um objeto JavaScript de janela picture-in-picture.
Em seguida, use isso para adicionar seu conteúdo à janela.
async function openDPiP() {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture
.requestWindow();
pipWindow.document.body.append(player);
}
pipButton.addEventListener('click', openDPiP);
Com a nova propriedade preferInitialWindowPlacement, você pode dizer ao Chrome para
sempre abrir a janela picture-in-picture na posição e no tamanho padrão,
em vez de reutilizar a posição ou o tamanho da janela anterior.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
Confira a postagem de François Picture-in-Picture para qualquer elemento (em inglês) para mais detalhes.
Declarações aninhadas do CSS
O encadeamento de CSS permite seletores mais curtos, leitura mais fácil e mais modularidade ao aninhar regras dentro de outras. O aninhamento de CSS é Baseline recém-disponibilizado e está disponível há quase um ano.
Houve alguns casos extremos que não funcionaram como esperado. Por exemplo, com o bloco CSS a seguir, você esperaria que a cor de fundo fosse verde, já que ela vem por último, mas é vermelha.
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
Para corrigir casos extremos como esse, o grupo de trabalho do CSS introduziu a regra de declarações aninhadas, que é implementada no Chrome 130. Agora, o mesmo bloco de CSS resulta em um plano de fundo verde, como esperado. Se você estava intercalando declarações simples com regras aninhadas, verifique seu código.
Confira o artigo de Bramus
O aninhamento de CSS melhora com CSSNestedDeclarations
para uma explicação mais detalhada.
box-decoration-break
A propriedade CSS box-decoration-break permite especificar como os fragmentos de um elemento
serão renderizados quando divididos em várias linhas, colunas ou
páginas.
Por exemplo, esse elemento fica ótimo quando tudo está em uma linha.
Quando o conteúdo é dividido em várias linhas, decorações como segundo plano, sombra de caixa, borda e assim por diante são cortadas, criando uma aparência drástica.
Ao adicionar box-decoration-break: clone, cada fragmento é renderizado
de forma independente, criando uma aparência muito melhor.
Embora não seja exatamente o Baseline, ele está disponível no Chrome e no Firefox e tem um prefixo de fornecedor no Safari.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Confira os
documentos box-decoration-break na MDN
e a postagem de Rachel A propriedade box-decoration-break no Chrome 130
para mais detalhes.
E muito mais.
É claro que há muito mais.
- Depois de alguns falsos inícios, os contêineres de rolagem com foco do teclado estão finalmente chegando.
- O WebGPU recebe fusão de origem dupla.
- E a serialização da Web recebe um atributo conectado.
Leitura adicional
Isso abrange apenas alguns destaques importantes. Confira os links a seguir para mais mudanças no Chrome 130.
- Notas da versão do Chrome 130.
- Novidades no Chrome DevTools (130)
- Atualizações do ChromeStatus.com para o Chrome 130
- Lista de mudanças no repositório de origem do Chromium
- Calendário de lançamentos do Chrome
Inscrever-se
Para ficar atualizado, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.
Eu sou Pete LePage, e assim que o Chrome 131 for lançado, vamos estar aqui para contar as novidades do Chrome!