`<system-color>` CSS-Typ

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Der <system-color> CSS Datentyp spiegelt normalerweise die Standardfarbenauswahl wider, die für die verschiedenen Teile einer Webseite verwendet wird.

Benutzeragenten können jedoch eine Barrierefreiheitsfunktion namens erzwungener Farbmodus bereitstellen, in welchem die Farben auf eine vom Benutzer und Benutzeragenten definierte Palette beschränkt werden und die Farbauswahl des Autors bei bestimmten Eigenschaften überschreiben. Im erzwungenen Farbmodus gibt <system-color> die ausgewählten Farben an, damit der Rest der Seite sich anpassen kann. Ein Beispiel für den erzwungenen Farbmodus ist der hohe Kontrastmodus in Windows.

Im erzwungenen Farbmodus sollten Autoren Farben vom Typ <system-color> für alle Eigenschaften verwenden, die nicht zu den Eigenschaften gehören, deren Farben überschrieben werden. Dies stellt sicher, dass die Seite konsistent die gleiche Farbpalette über alle Eigenschaften hinweg verwendet.

Autoren können den erzwungenen Farbmodus mit dem forced-colors Medienmerkmal erkennen.

Ein <system-color> Wert kann überall verwendet werden, wo ein <color> verwendet werden kann.

Syntax

Beachten Sie, dass diese Schlüsselwörter nicht zwischen Groß- und Kleinschreibung unterscheiden, hier jedoch zur besseren Lesbarkeit in gemischter Schreibweise aufgeführt sind.

Je nach Ihren Einstellungen können sich die in der Tabelle angezeigten Beispiel- farben ändern. Sie können diese Seite auch in verschiedenen Browsern, Betriebssystemen und Systemeinstellungen anzeigen, um die Unterschiede zu überprüfen.

Schlüsselwort	Beschreibung	Beispiel
`AccentColor`	Hintergrund von hervorgehobenen Benutzeroberflächen-Steuerelementen.
`AccentColorText`	Text von hervorgehobenen Benutzeroberflächen-Steuerelementen.
`ActiveText`	Text von aktiven Links.
`ButtonBorder`	Grundfarbe der Rahmen von Steuerelementen.
`ButtonFace`	Hintergrundfarbe der Steuerelemente.
`ButtonText`	Textfarbe der Steuerelemente.
`Canvas`	Hintergrund von Anwendungsinhalten oder Dokumenten.
`CanvasText`	Textfarbe in Anwendungsinhalten oder Dokumenten.
`Field`	Hintergrund von Eingabefeldern.
`FieldText`	Text in Eingabefeldern.
`GrayText`	Textfarbe für deaktivierte Elemente (zum Beispiel ein deaktiviertes Steuerelement).
`Highlight`	Hintergrund von ausgewählten Elementen.
`HighlightText`	Textfarbe von ausgewählten Elementen.
`LinkText`	Text von nicht-aktiven, nicht-besuchten Links.
`Mark`	Hintergrund von speziell markiertem Text (wie durch das HTML-Element `mark`).
`MarkText`	Speziell markierter Text (wie durch das HTML-Element `mark`).
`SelectedItem`	Hintergrund von ausgewählten Elementen, zum Beispiel ein ausgewähltes Kontrollkästchen.
`SelectedItemText`	Text von ausgewählten Elementen.
`VisitedText`	Text von besuchten Links.

Hinweis: Um das Risiko von Fingerprinting zu reduzieren, geben einige Browser einen festen Wert für AccentColor und AccentColorText zurück, es sei denn, sie werden in bestimmten eingeschränkten Umständen verwendet. Siehe Browser-Kompatibilität für Details.

Veraltete Systemfarbenschlüsselwörter

Die folgenden Schlüsselwörter wurden in früheren Versionen des CSS-Farbmoduls definiert. Sie sind nun für die Verwendung auf öffentlichen Webseiten veraltet.

Schlüsselwort	Beschreibung	Ersatz
`ActiveBorder`	Aktiver Fensterrahmen	`ButtonBorder`
`ActiveCaption`	Aktive Fensterüberschrift. Sollte mit `CaptionText` als Vordergrundfarbe verwendet werden.	`Canvas`
`AppWorkspace`	Hintergrundfarbe der Mehrdokumenten-Oberfläche.	`Canvas`
`Background`	Hintergrund des Desktops.	`Canvas`
`ButtonHighlight`	Die Farbe des Randes, der zur Lichtquelle ausgerichtet ist, bei 3D-Elementen, die durch diese Umrandschicht 3D erscheinen.	`ButtonFace`
`ButtonShadow`	Die Farbe des Randes, der von der Lichtquelle weg ausgerichtet ist, bei 3D-Elementen, die durch diese Umrandschicht 3D erscheinen.	`ButtonFace`
`CaptionText`	Text in der Überschrift, Größenbox und Pfeilbox der Bildlaufleiste. Sollte mit der `ActiveCaption` Hintergrundfarbe verwendet werden.	`CanvasText`
`InactiveBorder`	Inaktiver Fensterrahmen.	`ButtonBorder`
`InactiveCaption`	Inaktive Fensterüberschrift. Sollte mit der `InactiveCaptionText` Vordergrundfarbe verwendet werden.	`Canvas`
`InactiveCaptionText`	Farbe des Textes in einer inaktiven Überschrift. Sollte mit der `InactiveCaption` Hintergrundfarbe verwendet werden.	`GrayText`
`InfoBackground`	Hintergrundfarbe für Tooltip-Steuerelemente. Sollte mit der `InfoText` Vordergrundfarbe verwendet werden.	`Canvas`
`InfoText`	Textfarbe für Tooltip-Steuerelemente. Sollte mit der `InfoBackground` Hintergrundfarbe verwendet werden.	`CanvasText`
`Menu`	Menühintergrund. Sollte mit der `MenuText` oder `-moz-MenuBarText` Vordergrundfarbe verwendet werden.	`Canvas`
`MenuText`	Text in Menüs. Sollte mit der `Menu` Hintergrundfarbe verwendet werden.	`CanvasText`
`Scrollbar`	Hintergrundfarbe der Bildlaufleisten.	`Canvas`
`ThreeDDarkShadow`	Die Farbe des dunkleren (allgemein äußeren) der zwei Ränder, die von der Lichtquelle weggerichtet sind, bei 3D-Elementen, die durch zwei konzentrische Umrandschichten 3D erscheinen.	`ButtonBorder`
`ThreeDFace`	Die Vordergrund-Farbe für 3D-Elemente, die durch zwei konzentrische Umrandschichten 3D erscheinen. Sollte mit der `ButtonText` Vordergrundfarbe verwendet werden.	`ButtonFace`
`ThreeDHighlight`	Die Farbe des helleren (allgemein äußeren) der zwei Ränder, die zur Lichtquelle ausgerichtet sind, bei 3D-Elementen, die durch zwei konzentrische Umrandschichten 3D erscheinen.	`ButtonBorder`
`ThreeDLightShadow`	Die Farbe des dunkleren (allgemein inneren) der zwei Ränder, die zur Lichtquelle ausgerichtet sind, bei 3D-Elementen, die durch zwei konzentrische Umrandschichten 3D erscheinen.	`ButtonBorder`
`ThreeDShadow`	Die Farbe des helleren (allgemein inneren) der zwei Ränder, die von der Lichtquelle weggerichtet sind, bei 3D-Elementen, die durch zwei konzentrische Umrandschichten 3D erscheinen.	`ButtonBorder`
`Window`	Fensterhintergrund. Sollte mit der `WindowText` Vordergrundfarbe verwendet werden.	`Canvas`
`WindowFrame`	Fensterrahmen.	`ButtonBorder`
`WindowText`	Text in Fenstern. Sollte mit der `Window` Hintergrundfarbe verwendet werden.	`CanvasText`

Beispiele

Verwendung von Systemfarben

In diesem Beispiel haben wir einen Button, der normalerweise seinen Kontrast mithilfe der box-shadow Eigenschaft erhält. Im erzwungenen Farbmodus wird box-shadow erzwungenermaßen auf none gesetzt, daher verwendet das Beispiel das forced-colors Medienmerkmal, um sicherzustellen, dass es eine Umrandung der entsprechenden Farbe gibt (in diesem Fall ButtonBorder).

HTML

html

<button class="button">Press me!</button>

CSS

css

.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow
    is forced to 'none' in forced-colors mode */
    border: 2px ButtonBorder solid;
  }
}