Un ensemble d'en-têtes d'indice client permet aux sites d'obtenir les préférences multimédias de l'utilisateur au moment de la requête, ce qui permet aux serveurs d'intégrer le CSS approprié pour des raisons de performances.
Les requêtes médias CSS, et plus particulièrement les fonctionnalités multimédias basées sur les préférences de l'utilisateur telles que prefers-color-scheme ou prefers-reduced-motion, ont un impact potentiel sur la quantité de CSS à diffuser par une page et sur l'expérience que l'utilisateur aura lorsque la page se chargera.
En se concentrant sur prefers-color-scheme, mais en soulignant que le raisonnement s'applique également aux autres fonctionnalités multimédias de préférence utilisateur, il est recommandé de ne pas charger de CSS pour le jeu de couleurs particulier qui ne correspond pas dans le chemin de rendu critique, et de ne charger initialement que le CSS actuellement pertinent. Pour ce faire, vous pouvez utiliser <link media>.
Toutefois, les sites à fort trafic comme la recherche Google qui souhaitent respecter les fonctionnalités multimédias de préférence de l'utilisateur telles que prefers-color-scheme et qui insèrent du CSS en ligne pour des raisons de performances doivent connaître le jeu de couleurs préféré (ou d'autres fonctionnalités multimédias de préférence de l'utilisateur, respectivement) idéalement au moment de la requête, afin que la charge utile HTML initiale contienne déjà le CSS approprié en ligne.
De plus, et en particulier pour prefers-color-scheme, les sites doivent à tout prix éviter un flash de thème de couleur inexact.
Les en-têtes d'indice client Sec-CH-Prefers-Color-Scheme et Sec-CH-Prefers-Reduced-Motion sont les premiers d'une série d'en-têtes d'indice client pour les fonctionnalités multimédias en fonction des préférences utilisateur visant à résoudre ce problème.
Informations sur les indices client
Les indices client HTTP définissent un en-tête de réponse Accept-CH que les serveurs peuvent utiliser pour annoncer leur utilisation d'en-têtes de requête pour la négociation proactive du contenu, communément appelées indices client. La proposition En-têtes d'indicateurs client pour les fonctionnalités multimédias des préférences utilisateur définit un ensemble d'indicateurs client destinés à transmettre les fonctionnalités multimédias des préférences utilisateur. Ces indices client sont nommés d'après la fonctionnalité multimédia de préférences utilisateur correspondante sur laquelle ils font état.
Par exemple, le jeu de couleurs actuellement préféré selon prefers-color-scheme est signalé via l'indice client Sec-CH-Prefers-Color-Scheme, qui porte bien son nom.
Informations sur les indices client critiques
Les indications client proposées dans la section En-têtes d'indications client pour les fonctionnalités multimédias en fonction des préférences utilisateur seront probablement les plus couramment utilisées en tant qu'indications client critiques. Les hints client critiques sont des hints client qui modifient de manière significative la ressource générée. Une telle ressource doit être récupérée de manière cohérente lors des chargements de page (y compris le chargement de page initial) pour éviter les bascules visibles par l'utilisateur.
Syntaxe des indices client
Les fonctionnalités multimédias des préférences utilisateur se composent d'un nom (par exemple, prefers-reduced-motion) et de valeurs autorisées (par exemple, no-preference ou reduce). Chaque champ d'en-tête d'indice client est représenté par un objet En-têtes structurés pour HTTP contenant un élément dont la valeur est une chaîne. Par exemple, pour indiquer que l'utilisateur préfère un thème sombre et une réduction des mouvements, les indices client ressemblent à l'exemple ci-dessous.
GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Sec-CH-Prefers-Reduced-Motion: "reduce"
L'équivalent CSS des informations transmises dans les indices client ci-dessus est @media (prefers-color-scheme: dark) {} et @media (prefers-reduced-motion: reduce) {}, respectivement.
Liste complète des indices client
La liste des indices client est modélisée d'après les fonctionnalités multimédias des préférences utilisateur dans les requêtes multimédias de niveau 5.
| Indice client | Valeurs autorisées | Fonctionnalité multimédia correspondant aux préférences de l'utilisateur |
|---|---|---|
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 |
Prise en charge des navigateurs
L'en-tête d'indice client Sec-CH-Prefers-Color-Scheme est compatible avec Chromium 93.
L'en-tête d'indice client Sec-CH-Prefers-Reduced-Motion est compatible avec Chromium 108.
Les commentaires d'autres fournisseurs, à savoir WebKit et Mozilla, sont en attente.
Démonstration de Sec-CH-Prefers-Color-Scheme
Essayez la démo dans Chromium 93 et observez comment le CSS intégré change en fonction du jeu de couleurs préféré de l'utilisateur.
Démonstration de Sec-CH-Prefers-Reduced-Motion
Essayez la démo dans Chromium 108 et observez comment le CSS intégré change en fonction des préférences de mouvement de l'utilisateur.
Fonctionnement
- Le client envoie une requête initiale au serveur.
bash GET / HTTP/2 Host: example.com - Le serveur répond, indiquant au client via
Accept-CHqu'il accepte les hints clientSec-CH-Prefers-Color-SchemeetSec-CH-Prefers-Contrast, parmi lesquels, conformément àCritical-CH, il considèreSec-CH-Prefers-Color-Schemecomme un hint client critique sur lequel il modifie également la réponse, comme indiqué parVary.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 - Le client réessaie ensuite la requête, indiquant au serveur via
Sec-CH-Prefers-Color-Schemequ'il a une préférence utilisateur pour le contenu en mode sombre.bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark" - Le serveur peut ensuite adapter la réponse aux préférences du client en conséquence et, par exemple, intégrer le CSS responsable du thème sombre dans le corps de la réponse.
Exemple Node.js
L'exemple Node.js ci-dessous, écrit pour le framework Express.js populaire, montre à quoi peut ressembler la gestion de l'en-tête d'indice client Sec-CH-Prefers-Color-Scheme en pratique.
C'est ce code qui alimente la démo ci-dessus.
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));
});
Points à prendre en compte concernant la confidentialité et la sécurité
L'équipe Chromium a conçu et implémenté les en-têtes d'indicateurs client des fonctionnalités multimédias en fonction des préférences utilisateur en utilisant les principes fondamentaux définis dans Contrôler l'accès aux fonctionnalités puissantes de la plate-forme Web, y compris le contrôle utilisateur, la transparence et l'ergonomie.
Les considérations de sécurité des indications client HTTP et les considérations de sécurité de la fiabilité des indications client s'appliquent également à cette proposition.
Références
- Brouillon de spécifications
- Explication
- Sec-CH-Prefers-Color-Scheme - Chrome Status entry
- Sec-CH-Prefers-Color-Scheme : bug Chromium
- Sec-CH-Prefers-Reduced-Motion : entrée d'état Chrome
- Sec-CH-Prefers-Reduced-Motion : bug Chromium
- Thread WebKit
- Position de Mozilla sur les normes
- Hints client
- Fiabilité des indices client
- Niveau 5 des requêtes multimédias
- En-têtes structurés pour HTTP
Remerciements
Merci beaucoup pour les précieux commentaires et conseils de Yoav Weiss. Image principale par Tdadamemd sur Wikimedia Commons.
.jpg%3E?authuser=9&hl=fr){kind=link}