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

Um conjunto de cabeçalhos de dicas 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 alinhem o CSS correto por motivos de desempenho.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

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

Ao se concentrar em prefers-color-scheme, mas destacar 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 CSS para o esquema de cores não correspondente específico no caminho crítico de renderização e, em vez disso, carregar inicialmente apenas o CSS relevante no momento. Uma maneira de fazer isso é usando <link media>.

No entanto, sites com muito tráfego, como a Pesquisa Google, que querem respeitar recursos de mídia de preferência do usuário, como prefers-color-scheme e esse CSS inline 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 HTML inicial já tenha o CSS correto inline.

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

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

Contexto das dicas do cliente

Dicas de cliente HTTP define 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 proativa de conteúdo, coloquialmente chamado de dicas do cliente. A proposta Cabeçalhos de dicas do cliente para recursos de preferência de mídia do usuário define um conjunto de dicas do cliente destinadas a transmitir recursos de mídia de preferência do usuário. Essas dicas de cliente são nomeadas de acordo com o recurso de mídia de preferência do usuário correspondente a que elas se informam. Por exemplo, o esquema de cores preferencial no momento, de acordo com prefers-color-scheme, é informado pela dica de cliente Sec-CH-Prefers-Color-Scheme adequadamente nomeada.

Contexto sobre dicas importantes para o cliente

As dicas de cliente propostas nos Cabeçalhos de dicas do cliente de recursos de preferência de mídia do usuário (em inglês) provavelmente serão usadas com mais frequência como dicas essenciais de cliente. Dicas de cliente críticas são dicas de cliente que alteram significativamente o recurso resultante. Esse recurso precisa ser buscado de forma consistente nos carregamentos de página (incluindo o carregamento initial) para evitar chaves visíveis ao usuário.

Sintaxe da dica 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 dica do cliente é representado como objeto de cabeçalhos estruturados para HTTP contendo um item em que o valor é uma string. Por exemplo, para informar que o usuário prefere um tema escuro e movimento reduzido, as dicas do cliente são semelhantes ao exemplo abaixo.

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

O CSS equivalente às informações transmitidas nas dicas do 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 de acordo com os recursos de mídia de preferência do usuário no nível 5 de consultas de mídia.

Dica do cliente Valores permitidos Recurso de mídia de preferência do usuário correspondente
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 dica do cliente Sec-CH-Prefers-Color-Scheme é compatível com o Chromium 93. O cabeçalho de dica do cliente Sec-CH-Prefers-Reduced-Motion é compatível com o Chromium 108. O feedback de outros fornecedores, ou seja, o WebKit's 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: claro

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 pelo Accept-CH que ele aceita as Sec-CH-Prefers-Color-Scheme e as dicas de cliente Sec-CH-Prefers-Contrast. Dessas, de acordo com Critical-CH, ele considera Sec-CH-Prefers-Color-Scheme uma dica crítica de cliente que também varia a resposta conforme transmitido 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. Em seguida, o cliente tenta fazer a solicitação novamente, informando ao servidor via Sec-CH-Prefers-Color-Scheme que ele tem preferência do usuário por conteúdo com esquema escuro. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. O servidor pode personalizar a resposta de acordo com as preferências do cliente e, por exemplo, in-line do CSS responsável pelo tema escuro no corpo da resposta.

Exemplo em Node.js

O exemplo de Node.js abaixo, escrito para o conhecido framework Express.js, mostra como lidar com o cabeçalho de dica de cliente Sec-CH-Prefers-Color-Scheme na prática. Esse é o código que realmente alimenta 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 do cliente para recursos de mídia de preferência do usuário usando os princípios básicos definidos em Como controlar o acesso a recursos avançados da plataforma da Web, incluindo controle do usuário, transparência e ergonomia.

As Considerações de segurança das Dicas de cliente HTTP e das Considerações de segurança da Confiabilidade da dica de cliente também se aplicam a esta proposta.

Referências

Agradecimentos

Agradecemos muito pelo feedback e conselhos valiosos de Yoav Weiss. Imagem principal de Tdadamemd no Wikimedia Commons.