En-tête Sec-CH-Prefers-Color-Scheme
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
Contexte sécurisé: Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.
L'en-tête de requête HTTP Sec-CH-Prefers-Color-Scheme est une indication du client pour les fonctionnalités multimédias qui fournit la préférence de l'utilisateur·ice pour les thèmes de couleur clairs ou sombres.
Un·e utilisateur·ice indique sa préférence avec un paramètre du système d'exploitation (par exemple, mode clair ou sombre) ou un paramètre de l'agent utilisateur.
Si un serveur indique à un client avec l'en-tête Accept-CH qu'il accepte Sec-CH-Prefers-Color-Scheme, le client peut alors répondre avec cet en-tête pour indiquer la préférence de l'utilisateur·ice pour un schéma de couleurs spécifique. Le serveur peut envoyer au client un contenu adapté, y compris des images ou du CSS, pour afficher un mode clair ou sombre pour le contenu rendu ultérieurement.
Cet en-tête est basé sur la requête média prefers-color-scheme.
| Type d'en-tête | En-tête de requête, Indication du client |
|---|---|
| En-tête de requête interdit | Oui (préfixe Sec-) |
Notes d'utilisation
L'en-tête Sec-CH-Prefers-Color-Scheme permet aux sites d'obtenir la préférence de l'utilisateur·ice pour le schéma de couleurs au moment de la requête ; ils peuvent ensuite choisir de fournir le CSS pertinent pour la préférence de l'utilisateur·ice en ligne, pour des raisons de performance. Si le serveur intègre le CSS en ligne, il peut vouloir inclure un en-tête de réponse Vary définissant Sec-CH-Prefers-Color-Scheme, pour indiquer que la réponse est adaptée à un schéma de couleurs particulier.
Si la performance n'est pas une considération critique dans ce contexte, vous pouvez plutôt gérer la préférence de l'utilisateur·ice pour le schéma de couleurs en utilisant la requête média prefers-color-scheme et/ou l'API Window.matchMedia().
Sec-CH-Prefers-Color-Scheme est une indication à haute entropie, donc le site doit s'inscrire pour la recevoir en envoyant un en-tête de réponse Accept-CH approprié. Un agent utilisateur peut intentionnellement omettre l'en-tête Sec-CH-Prefers-Color-Scheme pour préserver la vie privée de l'utilisateur·ice, car la préférence de l'utilisateur·ice pourrait, en théorie, être utilisée pour le fingerprinting.
Syntaxe
Sec-CH-Prefers-Color-Scheme: <preference>
Directives
<preference>-
Une chaîne de caractères indiquant la préférence de l'agent utilisateur pour un contenu clair ou sombre :
"light"ou"dark". La valeur peut provenir d'un paramètre correspondant dans le système d'exploitation sous-jacent.
Exemples
Utiliser Sec-CH-Prefers-Color-Scheme
Le client effectue une requête initiale au serveur :
GET / HTTP/1.1
Host: example.com
Le serveur répond, indiquant au client avec Accept-CH qu'il accepte Sec-CH-Prefers-Color-Scheme. Dans cet exemple, Critical-CH est également utilisé, indiquant que Sec-CH-Prefers-Color-Scheme est considéré comme une indication client critique.
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Color-Scheme
Vary: Sec-CH-Prefers-Color-Scheme
Critical-CH: Sec-CH-Prefers-Color-Scheme
Note :
Nous avons également défini Sec-CH-Prefers-Color-Scheme dans l'en-tête Vary pour indiquer que les réponses doivent être mises en cache séparément en fonction de la valeur de cet en-tête (même si l'URL reste la même).
Chaque en-tête répertorié dans l'en-tête Critical-CH doit également être présent dans les en-têtes Accept-CH et Vary.
Le client réessaie automatiquement la requête (en raison de la spécification de Critical-CH ci-dessus), indiquant au serveur avec Sec-CH-Prefers-Color-Scheme qu'il a une préférence utilisateur·ice pour un contenu sombre :
GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Le client inclut l'en-tête dans les requêtes suivantes de la session en cours, sauf si l'en-tête Accept-CH change dans les réponses pour indiquer qu'il n'est plus pris en charge par le serveur.
Spécifications
| Spécification |
|---|
| User Preference Media Features Client Hints Headers # sec-ch-prefers-color-scheme |
Compatibilité des navigateurs
Voir aussi
- Indications du client
- L'API d'indications de l'agent utilisateur du client
- L'en-tête
Accept-CH - HTTP Caching : Vary et l'en-tête
Vary - La requête média CSS
prefers-color-scheme - Améliorer la confidentialité des utilisateur·ice·s et l'expérience des développeur·euse·s avec les indications de l'agent utilisateur du client (angl.) sur developer.chrome.com