Esta página foi traduzida pela API Cloud Translation.

Novidades no Chrome 104

Pete LePage

Veja o que é necessário saber:

Agora é possível especificar uma área de corte usando a captura de região ao usar getDisplayMedia() para capturar a guia atual.
A sintaxe de consulta de mídia pode ser escrita usando operadores de comparação matemática.
Transições de elementos compartilhados iniciam um teste de origem.
E há muito mais.

Meu nome é Pete LePage. Vamos conhecer as novidades para desenvolvedores no Chrome 104.

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

O getDisplayMedia() possibilita a criação de um stream de vídeo a partir da guia atual. No entanto, 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 de 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 Apresentações Google pode permitir que você permaneça 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 de origem cruzada. — A área de conteúdo principal 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 nesse elemento. Em seguida, inicie o compartilhamento de tela chamando getDisplayMedia(). Isso solicitará permissão ao usuário 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 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. Mas, a menos que você as use todos os dias, a sintaxe pode ser um pouco confusa.

O Chrome 104 adiciona suporte para Consultas de mídia: nível 4: sintaxe e avaliação, permitindo que você crie consultas de mídia usando operadores matemáticos comuns de comparação.

Em vez de algo assim, 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. */
}

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 testes para 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á é compatível com o Firefox e há um plug-in PostCSS que reescreverá a nova sintaxe para a antiga, garantindo a compatibilidade com o navegador.

Confira o artigo de 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

Em geral, os apps específicos da plataforma têm transições suaves entre diferentes visualizações, ficam bonitos, mantêm o usuário no contexto e melhoram a experiência. Já na Web, uma navegação completa pode ser difícil e, às vezes, pode resultar em uma tela em branco momentaneamente. Para um app de página única, pode ser melhor, mas as transições ainda são difíceis.

As transições de elementos compartilhados, iniciando um novo teste de origem no Chrome 104, permitem que você ofereça transições suaves, independentemente de as transições serem entre documentos (por exemplo, em um app de várias páginas) ou intradocumentos (por exemplo, em um app de página única).

Veja um exemplo aproximado de como as transições funcionam para um app de página única. Na função de navegação, acesse o novo conteúdo da página e verifique se há suporte para as transições. 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 estiver 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));
}

Internamente, as transições de elementos compartilhados usam animações CSS para que você possa mudar de um efeito de esmaecimento para o deslize ou o que quiser.

Então, confira o vídeo do Jake Bringing Page Transitions to the Web (em inglês) ou a explicação (links em inglês).

E muito mais.

Claro, há muito mais.

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

Novidades no Chrome 104

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

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

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

E muito mais.

Leia mais

Fazer inscrição