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
). EsteContent-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
paradisplay-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;
}
}
Leia mais
Isso aborda apenas alguns destaques importantes. Acesse os links a seguir para ver outras mudanças no Chrome 123.
- Novidades no Chrome DevTools (123)
- Descontinuações e remoções do Chrome 123
- Atualizações do ChromeStatus.com para o Chrome 123
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
Fazer inscrição
Para ficar por dentro, inscreva-se no canal do YouTube para desenvolvedores do Chrome. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.
Adriana Jara, Soja! Assim que o Chrome 124 for lançado, estarei aqui para contar as novidades do Chrome.