Sec-CH-Prefers-Color-Scheme header
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Der HTTP Sec-CH-Prefers-Color-Scheme Request-Header ist ein Medien-Feature-Client-Hint, der die Benutzerpräferenz für helle oder dunkle Farbthemen bereitstellt.
Ein Benutzer gibt seine Präferenz über eine Betriebssystemeinstellung (zum Beispiel heller oder dunkler Modus) oder eine Benutzereinstellung des User-Agents an.
Wenn ein Server einem Client über den Accept-CH-Header signalisiert, dass er Sec-CH-Prefers-Color-Scheme akzeptiert, kann der Client mit diesem Header antworten, um die Benutzerpräferenz für ein bestimmtes Farbthema zu kennzeichnen. Der Server kann dem Client entsprechend angepasste Inhalte senden, einschließlich Bilder oder CSS, um einen hellen oder dunklen Modus für nachfolgende gerenderte Inhalte darzustellen.
Dieser Header basiert auf der prefers-color-scheme Media Query.
| Header-Typ | Request-Header, Client-Hint |
|---|---|
| Verbotener Request-Header | Ja (Sec--Präfix) |
Verwendungshinweise
Der Sec-CH-Prefers-Color-Scheme Header ermöglicht es Websites, die Farbpräferenz eines Benutzers zur Anforderungszeit zu erhalten; sie könnten dann das relevante CSS für die Präferenz des Benutzers inline bereitstellen, um aus Leistungsgründen zu agieren. Wenn der Server das CSS inline einfügt, möchte er möglicherweise einen Vary-Response-Header einschließen, der Sec-CH-Prefers-Color-Scheme spezifiziert, um anzuzeigen, dass die Antwort für ein bestimmtes Farbthema maßgeschneidert ist.
Wenn die Leistung in diesem Kontext keine kritische Rolle spielt, könnten Sie stattdessen die Farbpräferenz des Benutzers mit der prefers-color-scheme Media Query und/oder der Window.matchMedia() API handhaben.
Sec-CH-Prefers-Color-Scheme ist ein High-Entropy-Hint, sodass die Website durch das Senden eines entsprechenden Accept-CH Response-Headers optieren muss, um diesen zu erhalten. Ein User-Agent kann absichtlich den Sec-CH-Prefers-Color-Scheme-Header weglassen, um die Privatsphäre des Benutzers zu schützen, da die Präferenz theoretisch für das Fingerprinting genutzt werden könnte.
Syntax
Sec-CH-Prefers-Color-Scheme: <preference>
Direktiven
<preference>-
Ein String, der die Präferenz des User-Agents für dunklen oder hellen Inhalt angibt:
"light"oder"dark". Der Wert kann von einer entsprechenden Einstellung im zugrunde liegenden Betriebssystem stammen.
Beispiele
Verwendung von Sec-CH-Prefers-Color-Scheme
Der Client stellt eine anfängliche Anfrage an den Server:
GET / HTTP/1.1
Host: example.com
Der Server antwortet und teilt dem Client über Accept-CH mit, dass er Sec-CH-Prefers-Color-Scheme akzeptiert. In diesem Beispiel wird auch Critical-CH verwendet, was darauf hinweist, dass Sec-CH-Prefers-Color-Scheme als ein kritischer Client-Hint betrachtet wird.
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
Hinweis:
Wir haben auch Sec-CH-Prefers-Color-Scheme im Vary-Header spezifiziert, um anzuzeigen, dass Antworten basierend auf dem Wert dieses Headers separat zwischengespeichert werden sollten (auch wenn die URL unverändert bleibt).
Jeder im Critical-CH-Header aufgeführte Header sollte auch in den Accept-CH- und Vary-Headern vorhanden sein.
Der Client wiederholt automatisch die Anfrage (aufgrund des oben spezifizierten Critical-CH) und teilt dem Server über Sec-CH-Prefers-Color-Scheme mit, dass eine Benutzerpräferenz für dunklen Inhalt vorliegt:
GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Der Client wird den Header in nachfolgenden Anfragen in der aktuellen Sitzung beibehalten, es sei denn, das Accept-CH in den Antworten ändert sich und zeigt an, dass er von dem Server nicht mehr unterstützt wird.
Spezifikationen
| Specification |
|---|
| User Preference Media Features Client Hints Headers # sec-ch-prefers-color-scheme |
Browser-Kompatibilität
Siehe auch
- Client-Hints
- User-Agent Client Hints API
Accept-CH- HTTP-Caching von variierenden Antworten und
Vary-Header prefers-color-schemeCSS-Media-Query- Verbesserung der Benutzerprivatsphäre und Entwicklererfahrung mit User-Agent Client Hints (developer.chrome.com)