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().
Diagnostice a capacidade de resposta no seu site com a API Long Animation Frames.
Evite penalidades de desempenho na inicialização do service worker com a API de roteamento estático do Service Worker.
E tem muito mais.

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

Função CSS `light-dark()`.

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

O navegador vai escolher automaticamente a cor adequada com base no valor 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 tiver selecionado um tema claro, o elemento terá um plano de 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 a encontrar as causas do congestionamento da linha de execução principal, que geralmente é a causa de um INP (Interaction to Next Paint) ruim, uma das Core Web Vitals que medem 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 próxima atualização de renderização e adiciona informações como scripts de execução longa, tempo de renderização e tempo gasto em layout e estilo forçados, conhecido como layout thrashing.

A coleta e a análise dessas informações permitem identificar e resolver 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 de roteamento estático do Service Worker.

Com os service workers, você pode fazer com que os sites funcionem off-line e criar estratégias de armazenamento em cache que podem melhorar a performance.

No entanto, pode haver um custo de desempenho quando uma página é carregada pela primeira vez em algum momento e o service worker de controle não está em execução nesse momento. Como todas as transferências precisam acontecer pelo service worker, o navegador precisa esperar que ele seja iniciado e executado para saber qual conteúdo carregar.

Com a API Service Worker Static Routing, no momento da instalação, é possível declarar caminhos a serem sempre disponibilizados pela rede. Quando um URL controlado é carregado mais tarde, o navegador pode começar a buscar recursos desses caminhos antes que o service worker termine de ser iniciado. Isso remove o service worker dos URLs que você sabe que não precisam.

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

E muito mais.

Claro que há muito mais.

É possível oferecer páginas personalizadas com base no local de onde o usuário navegou com a interface NavigationActivation.
O Chrome agora tem suporte para o Zstandard (zstd). Esse Content-Encoding ajuda a carregar páginas mais rapidamente, usar menos largura de banda e gastar menos tempo, CPU e energia com a compactação em servidores, resultando em custos reduzidos.
A API notRestoredReasons para bfcache está sendo lançada no Chrome 123. Isso permite que os proprietários de sites coletem 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, o que permite navegações mais rápidas no histórico.
O valor picture-in-picture para display-mode permite que você escreva regras CSS específicas que só se aplicam quando o app da Web é mostrado no modo Picture-in-Picture. Exemplo:

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

Leitura adicional

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

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 é Adriana Jara, e assim que o Chrome 124 for lançado, vou falar sobre as novidades do Chrome.