Intestazioni dei client hint delle funzionalità multimediali preferenze dell'utente

Un insieme di intestazioni di suggerimenti del client consente ai siti di ottenere le preferenze multimediali dell'utente, facoltativamente, al momento della richiesta, consentendo ai server di incorporare il CSS corretto per motivi legati alle prestazioni.

Le query supporti CSS e, in particolare, le funzionalità dei supporti per le preferenze dell'utente come prefers-color-scheme o prefers-reduced-motion, hanno un potenziale impatto significativo sulla quantità di CSS che deve essere inviata da una pagina e sull'esperienza che l'utente avrà al caricamento della pagina.

Se ci concentriamo su prefers-color-scheme, ma evidenziando che il ragionamento vale anche per altre funzionalità dei contenuti multimediali per le preferenze dell'utente, è buona prassi non caricare il CSS per la particolare combinazione di colori non corrispondente nel percorso di rendering critico, ma caricare inizialmente solo il CSS attualmente pertinente. Un modo per farlo è tramite <link media>.

Tuttavia, i siti con traffico elevato, come la Ricerca Google, che vogliono rispettare le funzionalità multimediali preferite dell'utente come prefers-color-scheme e il CSS incorporato per motivi legati alle prestazioni, idealmente devono conoscere la combinazione di colori preferita (o altre funzionalità multimediali preferite dall'utente) al momento della richiesta, in modo che il payload HTML iniziale abbia già il codice CSS corretto.

Inoltre, in particolare per prefers-color-scheme, i siti vogliono evitare un lampo di tema cromatico impreciso.

Le intestazioni degli indicatori client Sec-CH-Prefers-Color-Scheme e Sec-CH-Prefers-Reduced-Motion sono le prime di una serie di intestazioni degli indicatori client per le funzionalità dei contenuti multimediali in base alle preferenze dell'utente che mirano a risolvere questo problema.

Informazioni di base sui suggerimenti client

I client hint HTTP definiscono un'intestazione di risposta Accept-CH che i server possono utilizzare per pubblicizzare l'uso delle intestazioni delle richieste per la negoziazione proattiva dei contenuti, chiamata colloquialmente client hint. La proposta di intestazioni degli indicatori client per le funzionalità multimediali delle preferenze utente definisce un insieme di indicatori client finalizzati a trasmettere le funzionalità multimediali delle preferenze utente. Questi suggerimenti per i client sono denominati in base alla funzionalità multimediale delle preferenze dell'utente a cui si riferiscono. Ad esempio, la combinazione di colori attualmente preferita in base a prefers-color-scheme viene segnalata tramite l'apposito Sec-CH-Prefers-Color-Scheme client hint.

Informazioni sui suggerimenti client critici

È probabile che gli indicatori client proposti in Intestazioni degli indicatori client per le funzionalità multimediali delle preferenze utente siano utilizzati più comunemente come Indicatori client critici. I client hint critici sono hint client che modificano in modo significativo la risorsa risultante. Questa risorsa deve essere recuperata in modo coerente durante i caricamenti di pagina (incluso il caricamento iniziale della pagina) per evitare transizioni visibili agli utenti.

Sintassi del suggerimento client

Le funzionalità multimediali preferite dell'utente sono costituite da un nome (come prefers-reduced-motion) e da valori consentiti (come no-preference o reduce). Ogni campo di intestazione del suggerimento client è rappresentato come oggetto Intestazioni strutturate per HTTP contenente un elemento il cui valore è una stringa. Ad esempio, per indicare che l'utente preferisce un tema scuro e una riduzione dei movimenti, i client hint sono simili all'esempio riportato di seguito.

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

L'equivalente CSS delle informazioni trasmesse nei suggerimenti per i clienti riportati sopra è rispettivamente @media (prefers-color-scheme: dark) {} e @media (prefers-reduced-motion: reduce) {}.

Elenco completo dei suggerimenti per i clienti

L'elenco dei suggerimenti client è modellato in base alle funzionalità multimediali preferenze utente nel livello 5 delle query supporti.

Suggerimento client Valori consentiti Funzionalità multimediale corrispondente preferenze utente
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

Supporto browser

L'intestazione dell'indicazione client Sec-CH-Prefers-Color-Scheme è supportata in Chromium 93. L'intestazione dell'indicazione client Sec-CH-Prefers-Reduced-Motion è supportata in Chromium 108. I feedback di altri fornitori, ovvero di WebKit e Mozilla, sono in attesa.

Demo di Sec-CH-Prefers-Color-Scheme

Prova la demo in Chromium 93 e osserva come il CSS in linea cambia in base alla combinazione di colori preferita dall'utente.

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

Demo di Sec-CH-Prefers-Reduced-Motion

Prova la demo in Chromium 108 e osserva come il CSS in linea cambia in base alle preferenze di movimento dell'utente.

Come funziona

  1. Il client invia una richiesta iniziale al server. bash GET / HTTP/2 Host: example.com
  2. Il server risponde, comunicando al client tramite Accept-CH che accetta i Sec-CH-Prefers-Color-Scheme e i Sec-CH-Prefers-Contrast Client Hints, di cui, come da Critical-CH, considera Sec-CH-Prefers-Color-Scheme un Client Hint critico in base al quale varia anche la risposta, come indicato da 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. Il client riprova quindi a inviare la richiesta, comunicando al server tramite Sec-CH-Prefers-Color-Scheme di avere una preferenza dell'utente per i contenuti con tema scuro. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. Il server può quindi personalizzare la risposta in base alle preferenze del cliente e, ad esempio, inserire il CSS responsabile del tema scuro nel corpo della risposta.

Esempio di Node.js

L'esempio di Node.js riportato di seguito, scritto per il popolare framework Express.js, mostra come potrebbe essere nella pratica gestione con l'intestazione del client hint Sec-CH-Prefers-Color-Scheme. Questo codice è ciò che alimenta effettivamente la demo qui sopra.

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));
});

Considerazioni sulla privacy e sulla sicurezza

Il team di Chromium ha progettato e implementato le intestazioni Client Hints per le funzionalità multimediali delle preferenze utente utilizzando i principi fondamentali definiti in Controllo dell'accesso alle funzionalità di piattaforme web efficaci, tra cui il controllo utente, la trasparenza e l'ergonomia.

Alla proposta si applicano allo stesso modo le considerazioni sulla sicurezza dei client hint HTTP e le considerazioni sulla sicurezza dell'affidabilità dei client hint.

Riferimenti

Ringraziamenti

Grazie mille per il prezioso feedback e i consigli di Yoav Weiss. Immagine hero di Tdadamemd su Wikimedia Commons.