Veja o que é necessário saber:
- Adapte seu esquema de cores com a nova função
light-dark()
. - Diagnosticar 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 há 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 à preferência do usuário por 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 selecionar 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 de congestionamento da linha de execução principal, que geralmente é a causa de uma INP ruim (Interaction to Next Paint), uma das 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 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 abaixo.
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 um tempo e o service worker de controle não está em execução. 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 de roteamento estático, é possível declarar caminhos para sempre serem atendidos pela rede no momento da instalação. 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 worker dos URLs que você sabe que não precisam de um worker.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/articles/*",
runningStatus: "running"
},
source: "fetch-event"
});
});
E muito mais.
Claro que há muito mais.
Você pode 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
). EsseContent-Encoding
ajuda a carregar páginas mais rapidamente, usar menos largura de banda e gastar menos tempo, CPU e energia na compactação em servidores, resultando em custos reduzidos de servidores.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
paradisplay-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 abrange apenas alguns destaques importantes. Confira os links a seguir para ver outras mudanças no Chrome 123.
- Novidades do Chrome DevTools (123)
- Remoção e descontinuação de recursos do Chrome 123
- Atualizações do ChromeStatus.com para o Chrome 123
- Lista de mudanças do repositório de origem do Chromium
- Calendário de lançamentos do Chrome
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 é Adriana Jara, e assim que o Chrome 124 for lançado, vou falar sobre as novidades do Chrome.