Novidades no Chrome 104

Pete LePage

Veja o que é necessário saber:

Meu nome é Pete LePage. Vamos nos aprofundar e ver as novidades para desenvolvedores no Chrome 104.

Especificar uma área de corte com captura de região

getDisplayMedia() permite criar um stream de vídeo na guia atual. Porém, há momentos em que você não quer a guia inteira, apenas uma pequena parte dela. Até agora, a única maneira de fazer isso era cortar manualmente cada frame do vídeo.

Com a captura de região, um app da Web pode definir a área específica da tela que quer compartilhar. Por exemplo, o Google Apresentações pode permitir que você fique na visualização de edição padrão e compartilhe o slide atual.

Captura de tela de uma janela de navegador com um app da Web destacando a área de conteúdo principal e um iframe entre origens.
A área principal do conteúdo está em azul, e o iframe de origem cruzada está em vermelho.

Para usá-lo, selecione o elemento a ser compartilhado e crie um novo CropTarget com base nele. Em seguida, inicie o compartilhamento de tela chamando getDisplayMedia(). Isso solicita que o usuário tenha permissão para compartilhar a tela. Em seguida, chame track.cropTo() e transmita o cropTarget criado anteriormente.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Confira Melhor compartilhamento de guias com a captura de região para mais detalhes.

Consultas de mídia mais fáceis com sintaxe e avaliação de nível 4

As consultas de mídia são essenciais para o design responsivo, permitindo que você defina estilos específicos para diferentes tamanhos de janela de visualização. No entanto, a menos que você use todos os dias, a sintaxe pode ser um pouco confusa.

O Chrome 104 adiciona suporte a Media Queries - Level 4 - Syntax and Evaluation, permitindo que você escreva consultas de mídia usando operadores de comparação matemática comuns.

Em vez de fazer isso para indicar uma janela de visualização entre 400 e 600 pixels:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Ela pode ser escrita assim:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Além de tornar as consultas de mídia menos detalhadas, a nova sintaxe pode ser mais precisa. As consultas min- e max- são inclusivas. Por exemplo: min-width: 400px testa uma largura de 400 px ou mais. A nova sintaxe permite que você seja mais explícito sobre o que quer dizer.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Ela já tem suporte no Firefox, e há um plug-in do PostCSS que reescreve a nova sintaxe na antiga, garantindo a compatibilidade do navegador.

Confira o artigo da Rachel Nova sintaxe para consultas de mídia de intervalo no Chrome 104 para mais detalhes.

As transições de elementos compartilhados iniciam um novo teste de origem

Os apps específicos da plataforma geralmente têm transições suaves entre visualizações diferentes, têm uma aparência bonita, mantêm o usuário no contexto e ajudam a experiência a ter mais desempenho. Já na Web, uma navegação completa pode ser áspera e, às vezes, significa uma tela em branco momentaneamente. Para um app de página única, ele pode ser melhor, mas as transições ainda são difíceis.

Com as transições de elementos compartilhados, que iniciam um novo teste de origem no Chrome 104, é possível oferecer transições suaves, não importa se elas são entre documentos (por exemplo, em um app de várias páginas) ou intradocumentos (por exemplo, em um app de página única).

Confira um exemplo aproximado de como as transições funcionam em um app de página única. Na função de navegação, receba o conteúdo da nova página e verifique se as transições são compatíveis. Caso contrário, atualize a página sem uma transição. Se estiverem, crie um transition() e chame start() nele, informando à API quando a mudança do DOM for concluída.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

Por trás das transições de elementos compartilhados, as animações CSS são usadas para que você possa mudar de um efeito de esmaecimento para um deslizamento ou o que quiser.

Eu apenas toquei na superfície. Confira o vídeo do Jake sobre como trazer transições de página para a Web ou leia o texto explicativo.

E muito mais.

Claro que há muito mais.

  • Quando os cookies são definidos com um atributo Expires ou Max-Age explícito, o valor agora é limitado a no máximo 400 dias.
  • Fizemos melhorias na API de posicionamento de janelas para várias telas.
  • E a propriedade CSS overflow-clip-margin especifica até onde o conteúdo de um elemento pode ser pintado antes de ser cortado.

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 104.

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 105 for lançado, estarei aqui para contar as novidades do Chrome.