En-têtes des conseils client pour les fonctionnalités multimédias des préférences de l'utilisateur

Un ensemble d'en-têtes d'indices client permet aux sites d'obtenir les préférences multimédias de l'utilisateur de manière facultative au moment de la demande. Les serveurs peuvent ainsi intégrer le CSS approprié pour des raisons de performances.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

Les requêtes média CSS, et plus particulièrement les fonctionnalités multimédias de préférence de l'utilisateur comme prefers-color-scheme ou prefers-reduced-motion, peuvent avoir un impact potentiellement important sur la quantité de CSS à diffuser par une page et sur l'expérience de l'utilisateur lors de son chargement.

En se concentrant sur prefers-color-scheme (tout en soulignant que le raisonnement s'applique également à d'autres fonctionnalités multimédias de préférences de l'utilisateur), il est recommandé de ne pas charger le CSS pour le jeu de couleurs qui ne correspond pas dans le chemin critique du rendu, mais de ne charger qu'au départ le CSS actuellement pertinent. Vous pouvez le faire via <link media>.

Toutefois, les sites à fort trafic tels que la recherche Google qui souhaitent respecter les fonctionnalités multimédias des préférences de l'utilisateur telles que prefers-color-scheme et le CSS intégré pour des raisons de performances doivent idéalement connaître le jeu de couleurs préféré (ou d'autres fonctionnalités multimédias de préférence de l'utilisateur, respectivement) au moment de la demande. Ainsi, la charge utile HTML initiale inclut déjà le code CSS approprié.

De plus, et en particulier pour prefers-color-scheme, les sites veulent absolument éviter un flash de thème de couleurs inexact.

Les en-têtes d'indications client Sec-CH-Prefers-Color-Scheme et Sec-CH-Prefers-Reduced-Motion sont le premier d'une série d'en-têtes d'indications client de préférences utilisateur liées aux caractéristiques du client visant à résoudre ce problème.

Informations sur les conseils aux clients

Les indications 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 en vue d'une négociation de contenu proactive. Cette approche est désignée par le terme familière sous le nom d'indications client. La proposition User Preference Media Features Client Hints Headers définit un ensemble d'indicateurs client visant à transmettre les fonctionnalités multimédias de préférences de l'utilisateur. Ces indicateurs client sont nommés d'après la fonctionnalité multimédia de préférences utilisateur correspondante sur laquelle ils génèrent un rapport. Par exemple, le jeu de couleurs actuellement préféré conformément à prefers-color-scheme est indiqué via l'optimisation du client Sec-CH-Prefers-Color-Scheme, qui est bien nommée.

Informations générales sur les indications client critiques

Les optimisations client proposées dans les en-têtes des indicateurs client pour les fonctionnalités multimédias des préférences utilisateur seront vraisemblablement le plus souvent utilisées comme indications client critiques. Les indicateurs client critiques sont des indicateurs client qui modifient significativement la ressource obtenue. 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 tout basculement visible par l'utilisateur par erreur.

Syntaxe des indications client

Les fonctionnalités multimédias de préférences utilisateur se composent d'un nom (comme prefers-reduced-motion) et de valeurs autorisées (comme no-preference ou reduce). Chaque champ d'en-tête d'indications du 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 des mouvements réduits, les indications du 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 indications client ci-dessus est @media (prefers-color-scheme: dark) {} et @media (prefers-reduced-motion: reduce) {}, respectivement.

Liste complète des indications client

La liste des suggestions de client est modélisée d'après les fonctionnalités multimédias de préférences utilisateur dans les requêtes média de niveau 5.

Indice pour le client Valeurs autorisées Fonctionnalité Préférence des utilisateurs pour les médias
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'optimisation du client Sec-CH-Prefers-Color-Scheme est compatible avec Chromium 93. L'en-tête d'optimisation du 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émonstration dans Chromium 93 pour voir comment le CSS intégré change en fonction du jeu de couleurs préféré de l'utilisateur.

Sec-CH-preferreds-Color-Scheme: sombre

Sec-CH-Prefers-Color-Scheme: clair

Démonstration de Sec-CH-Prefers-Reduced-Motion

Essayez la démonstration dans Chromium 108 pour voir comment le CSS intégré change en fonction des préférences de mouvement de l'utilisateur.

Comment ça marche ?

  1. Le client envoie une requête initiale au serveur. bash GET / HTTP/2 Host: example.com
  2. Le serveur répond en indiquant au client via Accept-CH qu'il accepte les Sec-CH-Prefers-Color-Scheme et Sec-CH-Prefers-Contrast Client Hints. Conformément à Critical-CH, il considère Sec-CH-Prefers-Color-Scheme comme un Critical Client Hint (la variation de la réponse) telle qu'elle est transmise par 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. Le client relance ensuite la requête, en indiquant au serveur via Sec-CH-Prefers-Color-Scheme qu'il a une préférence utilisateur pour le contenu sombre. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. 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 populaire Express.js, montre à quoi pourrait ressembler concrètement l'utilisation de l'en-tête d'optimisation du client Sec-CH-Prefers-Color-Scheme. C'est ce code qui alimente la démonstration 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 mis en œuvre les en-têtes des conseils client des fonctionnalités multimédias pour les préférences utilisateur en s'appuyant sur les principes fondamentaux définis dans la section 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 indicateurs client HTTP et les considérations de sécurité relatives à la fiabilité des indicateurs client s'appliquent également à cette proposition.

Références

Remerciements

Merci beaucoup pour les précieux commentaires et conseils de Yoav Weiss. Image héros de Tdadamemd sur Wikimedia Commons.