`<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.

Der <system-color> CSS Datentyp spiegelt in der Regel die Standardfarbwahl wider, die für die verschiedenen Teile einer Webseite verwendet wird.

Browser können jedoch eine Barrierefreiheitsfunktion namens gedrängter Farbenmodus bereitstellen, bei dem Farben in eine vom Benutzer und Browser definierte Palette eingeschränkt werden, um die Farbwahl des Autors in bestimmten Eigenschaften zu überschreiben. Im gedrängten Farbenmodus legt <system-color> die gewählten Farben offen, sodass der Rest der Seite sich damit integrieren kann. Ein Beispiel für den gedrängten Farbenmodus ist der Hoher Kontrast-Modus in Windows.

Im gedrängten Farbenmodus sollten Autoren Farben aus dem <system-color>-Typ für alle Eigenschaften verwenden, die nicht zu der Gruppe von Eigenschaften gehören, deren Farben überschrieben werden. Dies stellt sicher, dass die Seite durchgängig dieselbe Farbpalette für alle Eigenschaften verwendet.

Autoren können den gedrängten Farbenmodus mit dem forced-colors Media-Feature erfassen.

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, aber der Lesbarkeit halber hier in gemischter Schreibweise aufgelistet sind.

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

Schlüsselwort	Beschreibung	Beispiel
`AccentColor`	Hintergrund von hervorgehobenen Benutzeroberflächenelementen.
`AccentColorText`	Text von hervorgehobenen Benutzeroberflächenelementen.
`ActiveText`	Text von aktiven Links.
`ButtonBorder`	Standardgrenzenfarbe von Steuerelementen.
`ButtonFace`	Hintergrundfarbe von Steuerelementen.
`ButtonText`	Textfarbe von Steuerelementen.
`Canvas`	Hintergrund von Anwendungsinhalten oder Dokumenten.
`CanvasText`	Textfarbe in Anwendungsinhalten oder Dokumenten.
`Field`	Hintergrund von Eingabefeldern.
`FieldText`	Text in Eingabefeldern.
`GrayText`	Textfarbe für inaktive Elemente (z. B. ein inaktives 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 (z. B. mit dem HTML-`mark`-Element).
`MarkText`	Text, der speziell markiert wurde (z. B. mit dem HTML-`mark`-Element).
`SelectedItem`	Hintergrund von ausgewählten Elementen, z. B. ein ausgewähltes Kontrollkästchen.
`SelectedItemText`	Text von ausgewählten Elementen.
`VisitedText`	Text von besuchten Links.

Veraltete Systemfarbschlüsselwörter

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

Schlüsselwort	Beschreibung	Ersatz
`ActiveBorder`	Aktiver Fensterrahmen	`ButtonBorder`
`ActiveCaption`	Aktive Fensterbeschriftung. Sollte mit `CaptionText` als Vordergrundfarbe verwendet werden.	`Canvas`
`AppWorkspace`	Hintergrundfarbe der mehreren Dokumenten-Oberfläche.	`Canvas`
`Background`	Desktop-Hintergrund.	`Canvas`
`ButtonHighlight`	Die Farbe der Begrenzung, die der Lichtquelle zugewandt ist, für 3D-Elemente, die durch diese Umrandungsschicht dreidimensional erscheinen.	`ButtonFace`
`ButtonShadow`	Die Farbe der Begrenzung, die von der Lichtquelle abgewandt ist, für 3D-Elemente, die durch diese Umrandungsschicht dreidimensional erscheinen.	`ButtonFace`
`CaptionText`	Text in Beschriftung, Größenbox und Rollbalken-Pfeilbox. Sollte mit der `ActiveCaption`-Hintergrundfarbe verwendet werden.	`CanvasText`
`InactiveBorder`	Inaktiver Fensterrahmen.	`ButtonBorder`
`InactiveCaption`	Inaktive Fensterbeschriftung. Sollte mit der `InactiveCaptionText`-Vordergrundfarbe verwendet werden.	`Canvas`
`InactiveCaptionText`	Farbe des Textes in einer inaktiven Beschriftung. 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 von Rollbalken.	`Canvas`
`ThreeDDarkShadow`	Die Farbe der dunkleren (meist äußeren) der zwei Begrenzungen, die von der Lichtquelle für 3-D-Elemente abgewandt sind, die durch zwei konzentrische Schichten von Umrandungen dreidimensional erscheinen.	`ButtonBorder`
`ThreeDFace`	Die Vordergrund-Hintergrundfarbe für 3-D-Elemente, die durch zwei konzentrische Schichten von Umrandungen dreidimensional erscheinen. Sollte mit der `ButtonText` Vordergrundfarbe verwendet werden.	`ButtonFace`
`ThreeDHighlight`	Die Farbe der helleren (meist äußeren) der zwei Begrenzungen, die der Lichtquelle zugewandt sind, für 3-D-Elemente, die durch zwei konzentrische Schichten von Umrandungen dreidimensional erscheinen.	`ButtonBorder`
`ThreeDLightShadow`	Die Farbe der dunkleren (meist inneren) der zwei Begrenzungen, die der Lichtquelle zugewandt sind, für 3-D-Elemente, die durch zwei konzentrische Schichten von Umrandungen dreidimensional erscheinen.	`ButtonBorder`
`ThreeDShadow`	Die Farbe der helleren (meist inneren) der zwei Begrenzungen, die von der Lichtquelle für 3-D-Elemente abgewandt sind, die durch zwei konzentrische Schichten von Umrandungen dreidimensional 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 gedrängten Farbenmodus wird box-shadow auf none gesetzt, daher wird das forced-colors-Media-Feature verwendet, um sicherzustellen, dass es einen Rand 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;
  }
}