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.
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.
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
- O cliente faz uma solicitação inicial ao servidor.
bash GET / HTTP/2 Host: example.com
- O servidor responde, informando ao cliente por meio de
Accept-CH
que aceita as dicas de clienteSec-CH-Prefers-Color-Scheme
eSec-CH-Prefers-Contrast
, das quais, de acordo comCritical-CH
, ele consideraSec-CH-Prefers-Color-Scheme
como uma dica de cliente crítica que também variava a resposta conforme transmitida porVary
.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
- 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"
- 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
- Especificação do rascunho
- Explicação
- Sec-CH-Prefers-Color-Scheme: entrada do Status do Chrome
- Sec-CH-Prefers-Color-Scheme: bug do Chromium
- Sec-CH-Prefers-Reduced-Motion: entrada de status do Chrome
- Sec-CH-Prefers-Reduced-Motion: bug do Chromium
- Filamento do WebKit
- Posição da Mozilla sobre padrões
- Dicas de cliente
- Confiabilidade de sugestão do cliente
- Consultas de mídia: nível 5
- Cabeçalhos estruturados para HTTP
Agradecimentos
Agradecemos o feedback e os conselhos valiosos de Yoav Weiss. Imagem principal de Tdadamemd no Wikimedia Commons.