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 Client-Hint für Medienmerkmale, der die Benutzerpräferenz für helle oder dunkle Farbthemen angibt. Ein Benutzer zeigt seine Präferenz durch eine Betriebssystemeinstellung (zum Beispiel Licht- oder Dunkelmodus) oder eine Benutzereinstellung des User-Agents an.
Wenn ein Server dem 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 Farbschema anzugeben. Der Server kann dem Client entsprechend angepasste Inhalte, einschließlich Bildern oder CSS, senden, um einen Licht- oder Dunkelmodus für anschließend gerenderte Inhalte anzuzeigen.
Dieser Header ist an das prefers-color-scheme-Medienabfrage angelehnt.
| Header-Typ | Request-Header, Client-Hint |
|---|---|
| Verbotener Request-Header | Ja (Sec--Präfix) |
Nutzungshinweise
Der Sec-CH-Prefers-Color-Scheme-Header ermöglicht es Websites, die Farbpräferenz des Benutzers zur Anforderungszeit zu erhalten; sie könnten dann aus Leistungsgründen wählen, das relevante CSS für die Benutzerpräferenz inline bereitzustellen. Wenn der Server das CSS inline einfügt, könnte es sinnvoll sein, einen Vary-Response-Header einzufügen, der Sec-CH-Prefers-Color-Scheme spezifiziert, um anzuzeigen, dass die Antwort für ein bestimmtes Farbschema zugeschnitten ist.
Wenn die Leistung in diesem Kontext keine kritische Überlegung ist, könnten Sie stattdessen die Farbpräferenz des Benutzers mithilfe der prefers-color-scheme-Medienabfrage und/oder der Window.matchMedia()-API handhaben.
Sec-CH-Prefers-Color-Scheme ist ein High Entropy Hint, sodass die Seite sich freiwillig dafür entscheiden muss, ihn zu erhalten, indem sie einen entsprechenden Accept-CH-Response-Header sendet. Ein User-Agent kann den Sec-CH-Prefers-Color-Scheme-Header absichtlich weglassen, um die Privatsphäre des Benutzers zu schützen, da die Benutzerpräferenz theoretisch für das Fingerprinting verwendet werden könnte.
Syntax
Sec-CH-Prefers-Color-Scheme: <preference>
Direktiven
<preference>-
Ein String, der die Präferenz des User-Agents für dunkle oder helle Inhalte 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 erste 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, um anzuzeigen, dass Sec-CH-Prefers-Color-Scheme als ein kritischer Client-Hint behandelt 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 getrennt zwischengespeichert werden sollten (selbst wenn die URL gleich bleibt).
Jeder Header, der im Critical-CH-Header aufgelistet ist, sollte auch in den Accept-CH- und Vary-Headern vorhanden sein.
Der Client versucht automatisch erneut die Anfrage (aufgrund des oben spezifizierten Critical-CH), teilt dem Server über Sec-CH-Prefers-Color-Scheme mit, dass er eine Benutzerpräferenz für dunkle Inhalte hat:
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 einfügen, es sei denn, Accept-CH ändert sich in den Antworten, um anzuzeigen, dass er vom Server nicht mehr unterstützt wird.
Spezifikationen
| Specification |
|---|
| User Preference Media Features Client Hints Headers # sec-ch-prefers-color-scheme |