Esta página foi traduzida pela API Cloud Translation.

Novidades no Chrome 123

Adriana Jara

Veja o que é necessário saber:

Adapte seu esquema de cores com a nova função light-dark().
Diagnostique a capacidade de resposta no site com a API Long Animation Frames.
Evite penalidades de desempenho na inicialização do service worker com a API Service Worker Static Routing.
E há muito mais.

Meu nome é Adriana Jara. Vamos conhecer as novidades para os desenvolvedores no Chrome 123.

`light-dark()`.

A função light-dark() no CSS permite criar cores que se adaptam à preferência do usuário pelo modo claro ou escuro. Use a função light-dark() para especificar dois valores de cor diferentes em uma única propriedade CSS.

O navegador escolherá automaticamente a cor adequada com base no valor de color-scheme calculado do elemento. Por exemplo, com o seguinte CSS:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

Se o usuário selecionar um tema claro, o elemento terá um fundo verde-limão.
Se o usuário tiver selecionado um tema escuro, o elemento terá um plano de fundo verde.

API Long Animation Frames.

A API Long Animation Frames está disponível para ajudar você a encontrar as causas de congestionamento da linha de execução principal, que geralmente é a causa do erro INP (Interaction to Next Paint), uma métrica Core Web Vitals que mede a capacidade de resposta de um site.

A nova API é uma versão aprimorada da API Long Tasks, que oferece uma melhor compreensão das atualizações lentas da interface do usuário. A API Long Animation Frames permite medir o trabalho de bloqueio. Ele mede as tarefas com a atualização de renderização a seguir e adiciona informações, como scripts de longa duração, tempo de renderização e tempo gasto no layout e estilo forçados, conhecido como troca de layouts.

A coleta e a análise dessas informações permite identificar e solucionar gargalos de desempenho. É possível capturar frames longos com o código a seguir.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

API Service Worker Static Routing.

Com os service workers, é possível fazer os sites funcionarem off-line e criar estratégias de armazenamento em cache que podem melhorar o desempenho.

No entanto, pode haver um custo de desempenho quando uma página é carregada pela primeira vez após um período de tempo e o service worker de controle não está em execução nesse momento. Como todas as buscas precisam acontecer com o service worker, o navegador precisa esperar que ele seja iniciado e executado para saber qual conteúdo deve ser carregado.

Com a API Service Worker Static Routing, no momento da instalação, você pode declarar que os caminhos são sempre veiculados pela rede. Quando um URL controlado é carregado posteriormente, o navegador pode começar a buscar recursos desses caminhos antes que o service worker termine de iniciar. Isso remove o service worker dos URLs que você sabe que não precisam dele.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

E muito mais.

Claro, há muito mais.

Você pode oferecer páginas personalizadas com base no local de onde o usuário navegou com a interface do NavigationActivation.
O Chrome agora é compatível com Zstandard (zstd). Este Content-Encoding ajuda a carregar páginas mais rapidamente e usar menos largura de banda, gastando menos tempo, CPU e energia na compactação de servidores, resultando na redução dos custos de servidor.
A API notRestoredReasons para bfcache foi lançada no Chrome 123. Isso permite que os proprietários coletem os motivos no campo sobre por que o bfcache não pôde ser usado. Os proprietários de sites podem usar isso para melhorar o uso do bfcache, permitindo navegações mais rápidas no histórico.
Com o valor picture-in-picture para display-mode, é possível criar regras CSS específicas que se aplicam somente quando o app da Web é exibido no modo picture-in-picture. Exemplo:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Novidades no Chrome 123

light-dark().

API Long Animation Frames.

API Service Worker Static Routing.

E muito mais.

Leia mais

Fazer inscrição

`light-dark()`.