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

Un insieme di intestazioni di suggerimenti client consente ai siti di ottenere le preferenze multimediali dell'utente, se necessario, al momento della richiesta, consentendo ai server di inserire in linea il CSS corretto per motivi di prestazioni.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

Le query supporti CSS e, in particolare, le funzionalità dei media 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 ad alto traffico come la Ricerca Google che vogliono rispettare le funzionalità dei contenuti multimediali delle preferenze degli utenti come prefers-color-scheme e che inseriscono il CSS in linea per motivi di rendimento devono conoscere la combinazione di colori preferita (o altre funzionalità dei contenuti multimediali delle preferenze degli utenti, rispettivamente) idealmente al momento della richiesta, in modo che il payload HTML iniziale contenga già il CSS corretto in linea.

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

HTTP Client Hints definisce un'intestazione di risposta Accept-CH che i server possono utilizzare per pubblicizzare il proprio utilizzo delle intestazioni di richiesta per la negoziazione proattiva dei contenuti, colloquialmente nota come 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 il suggerimento client Sec-CH-Prefers-Color-Scheme, che ha un nome appropriato.

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 Hints critici sono Client Hints 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 delle preferenze utente sono costituite da un nome (ad esempio prefers-reduced-motion) e da valori consentiti (ad esempio no-preference o reduce). Ogni campo dell'intestazione dell'apposito indizio del client è rappresentato come oggetto Intestazioni strutturate per HTTP contenente un elemento il cui valore è una stringa. Ad esempio, per comunicare che l'utente preferisce un tema scuro e una riduzione dei movimenti, i suggerimenti del cliente sono come nell'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 è @media (prefers-color-scheme: dark) {} e @media (prefers-reduced-motion: reduce) {} rispettivamente.

Elenco completo dei suggerimenti per i clienti

L'elenco dei suggerimenti del client è modellato in base alle funzionalità dei contenuti multimediali per le preferenze dell'utente in Livello 5 delle query sui contenuti multimediali.

Suggerimento client Valori consentiti Funzionalità multimediale corrispondente per le 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 la gestione dell'intestazione dell'indicazione client Sec-CH-Prefers-Color-Scheme in pratica. Questo codice è ciò che alimenta 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 su privacy e 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.

Anche a questa proposta si applicano le considerazioni sulla sicurezza degli indicatori client HTTP e le considerazioni sulla sicurezza dell'affidabilità degli indicatori client.

Riferimenti

Ringraziamenti

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