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

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

François Beaufort
François Beaufort
GitHub
Thomas Steiner

Le query multimediali CSS, in particolare le funzionalità multimediali con preferenze degli utenti come prefers-color-scheme o prefers-reduced-motion, hanno un impatto potenzialmente significativo sulla quantità di CSS che deve essere pubblicata da una pagina e sull'esperienza che l'utente avrà al caricamento della pagina.

Concentrando l'attenzione su prefers-color-scheme, ma evidenziando che il ragionamento si applica anche ad altre funzionalità multimediali di preferenza degli utenti, una best practice consiste nel non caricare CSS per la particolare combinazione di colori non corrispondente nel percorso di rendering critico, bensì 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à multimediali preferite dagli utenti come prefers-color-scheme e questo CSS in linea per motivi legati alle prestazioni, devono conoscere la combinazione di colori preferita (o altre funzionalità multimediali preferite dall'utente rispettivamente) idealmente al momento della richiesta, in modo che il payload HTML iniziale abbia già il CSS in linea giusto.

Inoltre, e in particolare per prefers-color-scheme, i siti vogliono assolutamente evitare un tema a colori impreciso.

Le intestazioni dei suggerimenti client Sec-CH-Prefers-Color-Scheme e Sec-CH-Prefers-Reduced-Motion sono le prime di una serie di intestazioni dei suggerimenti dei client con funzionalità multimediali relative alle preferenze degli utenti che mira a risolvere questo problema.

Informazioni sui suggerimenti per i clienti

HTTP Client Hints definisce un'intestazione della risposta Accept-CH che i server possono utilizzare per pubblicizzare l'uso delle intestazioni delle richieste per la negoziazione proattiva di contenuti, il nome colloquiale viene chiamato "hint client". La proposta Intestazioni dei suggerimenti dei client per le funzionalità multimediali preferenze dell'utente definisce un insieme di suggerimenti dei clienti mirati a trasmettere le funzionalità multimediali relative alle preferenze degli utenti. Questi suggerimenti per i clienti prendono il nome dalla corrispondente funzionalità dei contenuti multimediali con le preferenze degli utenti su cui generano il report. Ad esempio, la combinazione di colori attualmente preferita secondo prefers-color-scheme viene riportata tramite il suggerimento del client Sec-CH-Prefers-Color-Scheme con il nome appropriato.

Informazioni di base sui suggerimenti critici per i clienti

I client hint proposti nelle pagine User Preference Media Features Client Hints Headers verranno presumibilmente utilizzati più di frequente come client client hint critici. I client hint critici sono client hint che modificano in modo significativo la risorsa risultante. Una risorsa di questo tipo deve essere recuperata in modo coerente tra i caricamenti pagina (compreso il caricamento initial della pagina) per evitare opzioni fastidiose visibili agli utenti.

Sintassi del suggerimento client

Le funzionalità multimediali con preferenze dell'utente sono composte 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 Intestazioni strutturate per l'oggetto HTTP contenente un elemento il cui valore è una stringa. Ad esempio, per indicare che l'utente preferisce un tema scuro e un movimento ridotto, i suggerimenti del client 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 fornite nei suggerimenti del client sopra riportati è rispettivamente @media (prefers-color-scheme: dark) {} e @media (prefers-reduced-motion: reduce) {}.

Elenco completo dei suggerimenti per i clienti

L'elenco dei client hint è modellato sulla base delle funzionalità multimediali con preferenze dell'utente in Media Queries Level 5.

Suggerimento client Valori consentiti Funzionalità multimediale per le preferenze degli utenti corrispondente
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 del browser

L'intestazione del suggerimento client Sec-CH-Prefers-Color-Scheme è supportata su Chromium 93. L'intestazione del suggerimento client Sec-CH-Prefers-Reduced-Motion è supportata su Chromium 108. Il feedback di altri fornitori, ossia WebKit e Mozilla, è in sospeso.

Demo di Sec-CH-Prefers-Color-Scheme

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

Sec-CH-Prefers-Color-Scheme: scuro

Sec-CH-Prefers-Color-Scheme: chiaro

Demo di Sec-CH-Prefers-Reduced-Motion

Prova la demo in Chromium 108 e nota come il CSS incorporato 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 client Sec-CH-Prefers-Color-Scheme e Sec-CH-Prefers-Contrast, in base ai quali, in base a Critical-CH, considera Sec-CH-Prefers-Color-Scheme un messaggio critico per il client, su cui varia anche la risposta in base a quanto 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 a effettuare la richiesta, comunicando al server tramite Sec-CH-Prefers-Color-Scheme che ha una preferenza dell'utente per i contenuti con pianificazione oscura. 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 client di conseguenza e, ad esempio, incorporare il CSS responsabile del tema scuro nel corpo della risposta.

Esempio Node.js

L'esempio Node.js riportato di seguito, scritto per il popolare framework Express.js, mostra come potrebbe essere nella pratica la gestione dell'intestazione del suggerimento client Sec-CH-Prefers-Color-Scheme. Questo codice è alla base della demo di cui 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 funzionalità Client Hints per le funzionalità relative ai contenuti multimediali utilizzando i principi fondamentali definiti nella sezione Controllo dell'accesso alle funzionalità avanzate della piattaforma web, tra cui controllo dell'utente, trasparenza ed ergonomia.

Anche le Considerazioni sulla sicurezza dei client HTTP hint e le considerazioni sulla sicurezza dell'affidabilità dei client hint si applicano anche a questa proposta.

Riferimenti

Ringraziamenti

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