Novidades no Chrome 130

Pete LePage

Veja o que é necessário saber:

• O documento picture-in-picture oferece mais controle sobre as janelas picture-in-picture.
• As declarações aninhadas do CSS corrigem alguns casos extremos complicados.
• É possível especificar o comportamento de decorações em elementos que são divididos em várias linhas.
• E há muito mais.

Sou Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 130.

Document Picture-in-Picture

A API picture-in-picture é ótima quando você quer abrir um vídeo em uma guia do navegador para poder acompanhar o conteúdo enquanto interage com outros sites ou aplicativos. Mas ele só faz vídeos.

A API Picture-in-picture de documentos elimina essa restrição, permitindo criar uma janela picture-in-picture em que você tem controle sobre o conteúdo. Ele é ótimo para coisas como players de vídeo personalizados, videoconferências e apps de produtividade. Adoro o que o Spotify fez com ele no player da Web. Uma janela com a arte da música atual, controles de reprodução e a possibilidade de adicionar a música aos favoritos.

Para usar, solicite uma nova janela de imagem em imagem do documento. O promise retornado é resolvido com um objeto JavaScript de janela Picture-in-Picture. Em seguida, use essa opção 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, é possível pedir para o Chrome 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 para mais detalhes.

Declarações aninhadas do CSS

O aninhamento de CSS permite seletores mais curtos, leitura mais fácil e mais modularidade ao aninhar regras dentro de outras. O aninhamento CSS está disponível na versão de referência, e está disponível há quase um ano.

Alguns casos extremos não funcionaram como esperado. Por exemplo, com o bloco de CSS a seguir, você esperaria que a cor de plano de fundo fosse verde, já que ela vem por último, mas ela é 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 anexadas, que é implementada no Chrome 130. Agora, esse 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 precisam ser 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 plano de fundo, sombra de caixa, borda e assim por diante são cortadas, criando um visual drástico.

Ao adicionar box-decoration-break: clone, cada fragmento é renderizado de forma independente, criando uma aparência muito mais agradável.

Embora não seja exatamente a Padrão, ela está disponível no Chrome e no Firefox e tem o prefixo do fornecedor no Safari.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Confira os documentos box-decoration-break no 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 algumas tentativas, os contêineres de rolagem com foco no teclado finalmente estão sendo lançados.
• A WebGPU recebe mesclagem de duas fontes.
• E o serial da Web recebe um atributo conectado.

Leitura adicional

Isso abrange apenas alguns destaques importantes. Confira os links a seguir para ver outras mudanças no Chrome 130.

• Notas da versão do Chrome 130.
• Novidades do Chrome DevTools (130)
• Atualizações do ChromeStatus.com para o Chrome 130
• Lista de mudanças do repositório de origem do Chromium
• Calendário de lançamentos do Chrome

Inscrever-se

Para ficar por dentro das novidades, 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.

Meu nome é Pete LePage, e assim que o Chrome 131 for lançado, vamos informar as novidades do Chrome.