Cabeçalhos de dicas do cliente de recursos de mídia de preferências do usuário

Um conjunto de cabeçalhos de sugestão do cliente permite que os sites obtenham as preferências de mídia do usuário opcionalmente no momento da solicitação, permitindo que os servidores inlinem o CSS correto por motivos de desempenho.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

As consultas de mídia CSS, e especificamente recursos de preferência de mídia do usuário, como prefers-color-scheme ou prefers-reduced-motion, têm um potencial impacto significativo na quantidade de CSS que precisa ser entregue por uma página e na experiência que o usuário vai ter quando a página for carregada.

Focando em prefers-color-scheme, mas destacando que o raciocínio também se aplica a outros recursos de mídia de preferência do usuário, é uma prática recomendada não carregar o CSS para o esquema de cores não correspondente específico no caminho de renderização crítico e, em vez disso, carregar inicialmente apenas o CSS relevante no momento. Uma maneira de fazer isso é usando <link media>.

No entanto, sites de alto tráfego, como a Pesquisa Google, que querem respeitar os recursos de mídia de preferência do usuário, como prefers-color-scheme, e que inline CSS por motivos de desempenho precisam saber sobre o esquema de cores preferido (ou outros recursos de mídia de preferência do usuário, respectivamente) no momento da solicitação, para que o payload inicial de HTML já tenha o CSS inline correto.

Além disso, especificamente para prefers-color-scheme, os sites querem evitar um flash de tema de cores impreciso.

Os cabeçalhos de sugestão do cliente Sec-CH-Prefers-Color-Scheme e Sec-CH-Prefers-Reduced-Motion são os primeiros de uma série de cabeçalhos de sugestão do cliente de recursos de preferência de mídia do usuário que visa resolver esse problema.

Informações gerais sobre dicas de cliente

As dicas de cliente HTTP definem um cabeçalho de resposta Accept-CH que os servidores podem usar para anunciar o uso de cabeçalhos de solicitação para negociação de conteúdo proativa, coloquialmente chamadas de dicas de cliente. A proposta User Preference Media Features Client Hints Headers define um conjunto de dicas de cliente com o objetivo de transmitir recursos de mídia de preferência do usuário. Essas dicas do cliente são nomeadas com base no recurso de mídia de preferência do usuário correspondente que elas mencionam. Por exemplo, o esquema de cores preferido atualmente conforme prefers-color-scheme é informado pela dica de cliente Sec-CH-Prefers-Color-Scheme.

Informações gerais sobre dicas de cliente críticas

É provável que as dicas do cliente propostas em Cabeçalhos de dicas do cliente de recursos de mídia de preferência do usuário sejam usadas com mais frequência como dicas críticas de cliente. Dicas críticas do cliente são dicas do cliente que alteram significativamente o recurso resultante. Esse recurso precisa ser buscado de forma consistente em todos os carregamentos de página (incluindo o inicial) para evitar mudanças visíveis para o usuário.

Sintaxe de dicas do cliente

Os recursos de mídia de preferência do usuário consistem em um nome (como prefers-reduced-motion) e valores permitidos (como no-preference ou reduce). Cada campo de cabeçalho de sugestão do cliente é representado como cabeçalhos estruturados para HTTP (link em inglês) (link em inglês) contendo um item cujo valor é uma string. Por exemplo, para transmitir que o usuário prefere um tema escuro e movimentos reduzidos, as dicas do cliente são como no exemplo abaixo.

GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Sec-CH-Prefers-Reduced-Motion: "reduce"

O equivalente em CSS das informações transmitidas nas dicas de cliente acima é @media (prefers-color-scheme: dark) {} e @media (prefers-reduced-motion: reduce) {}, respectivamente.

Lista completa de dicas do cliente

A lista de dicas do cliente é modelada com base nos recursos de mídia de preferência do usuário em Consultas de mídia de nível 5.

Dica do cliente Valores permitidos Recurso de mídia correspondente à preferência do usuário
Sec-CH-Prefers-Reduced-Motion no-preference, reduce prefers-reduced-motion
Sec-CH-Prefers-Reduced-Transparency no-preference, reduce prefers-reduced-transparency
Sec-CH-Prefers-Contrast no-preference, less, more, custom prefers-contrast
Sec-CH-Forced-Colors active, none forced-colors
Sec-CH-Prefers-Color-Scheme light, dark prefers-color-scheme
Sec-CH-Prefers-Reduced-Data no-preference, reduce prefers-reduced-data

Suporte ao navegador

O cabeçalho de sugestão de cliente Sec-CH-Prefers-Color-Scheme tem suporte no Chromium 93. O cabeçalho de sugestão de cliente Sec-CH-Prefers-Reduced-Motion tem suporte no Chromium 108. O feedback de outros fornecedores, como o WebKit e o Mozilla, está pendente.

Demonstração de Sec-CH-Prefers-Color-Scheme

Teste a demonstração no Chromium 93 e observe como o CSS inline muda de acordo com o esquema de cores preferido do usuário.

Sec-CH-Prefers-Color-Scheme: escuro

Sec-CH-Prefers-Color-Scheme: light

Demonstração de Sec-CH-Prefers-Reduced-Motion

Teste a demonstração no Chromium 108 e observe como o CSS inline muda de acordo com as preferências de movimento do usuário.

Como funciona

  1. O cliente faz uma solicitação inicial ao servidor. bash GET / HTTP/2 Host: example.com
  2. O servidor responde, informando ao cliente por meio de Accept-CH que aceita as dicas de cliente Sec-CH-Prefers-Color-Scheme e Sec-CH-Prefers-Contrast, das quais, de acordo com Critical-CH, ele considera Sec-CH-Prefers-Color-Scheme como uma dica de cliente crítica que também variava a resposta conforme transmitida por Vary. bash HTTP/2 200 OK Content-Type: text/html Accept-CH: Sec-CH-Prefers-Color-Scheme, Sec-CH-Prefers-Contrast Vary: Sec-CH-Prefers-Color-Scheme Critical-CH: Sec-CH-Prefers-Color-Scheme
  3. O cliente tenta novamente a solicitação, informando ao servidor por Sec-CH-Prefers-Color-Scheme que ele tem uma preferência do usuário para conteúdo com esquema escuro. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. O servidor pode adaptar a resposta às preferências do cliente e, por exemplo, inlinear o CSS responsável pelo tema escuro no corpo da resposta.

Exemplo de Node.js

O exemplo do Node.js abaixo, escrito para o popular framework Express.js, mostra como lidamos com o cabeçalho de sugestão de cliente Sec-CH-Prefers-Color-Scheme na prática. Esse código é o que realmente gera a demonstração acima.

app.get("/", (req, res) => {
  // Tell the client the server accepts the `Sec-CH-Prefers-Color-Scheme` client hint…
  res.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server's response will vary based on its value…
  res.set("Vary", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server considers this client hint a _critical_ client hint.
  res.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
  // Read the user's preferred color scheme from the headers…
  const prefersColorScheme = req.get("sec-ch-prefers-color-scheme");
  // …and send the adequate HTML response with the right CSS inlined.
  res.send(getHTML(prefersColorScheme));
});

Considerações sobre privacidade e segurança

A equipe do Chromium projetou e implementou cabeçalhos de dicas de cliente de recursos de mídia de preferência do usuário usando os princípios básicos definidos em Como controlar o acesso a recursos poderosos da plataforma da Web, incluindo controle do usuário, transparência e ergonomia.

As considerações de segurança das dicas do cliente HTTP e as considerações de segurança da confiabilidade da dica de cliente também se aplicam a esta proposta.

Referências

Agradecimentos

Agradecemos o feedback e os conselhos valiosos de Yoav Weiss. Imagem principal de Tdadamemd no Wikimedia Commons.