<system-color>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

Jedoch können Benutzeragenten eine Barrierefreiheitseinstellung namens erzwungener Farbmodus bereitstellen, bei dem Farben auf eine vom Benutzer und Benutzeragenten definierte Palette beschränkt werden und die vom Autor gewählten Farben in bestimmten Eigenschaften überschrieben werden. Im erzwungenen Farbmodus gibt <system-color> die gewählten Farben an, sodass der Rest der Seite sich anpassen kann. Ein Beispiel für einen erzwungenen Farbmodus ist der hochkontrastige Modus auf Windows.

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

Autoren können den erzwungenen Farbmodus mithilfe des forced-colors Media-Features erkennen.

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

Syntax

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

AccentColor: Hintergrund von hervorgehobenen Benutzeroberflächenelementen.
AccentColorText: Text von hervorgehobenen Benutzeroberflächenelementen.
ActiveText: Text aktiver Links.
ButtonBorder: Grundfarbe der Rahmen 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 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 (zum Beispiel durch das HTML-mark Element).
MarkText: Text, der speziell markiert wurde (zum Beispiel durch das HTML-mark Element).
SelectedItem: Hintergrund von ausgewählten Elementen, zum Beispiel eines ausgewählten Kontrollkästchens.
SelectedItemText: Text von ausgewählten Elementen.
VisitedText: Text besuchter Links.

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.

ActiveBorder Veraltet: Aktiver Fensterrahmen. Dasselbe wie ButtonBorder.
ActiveCaption Veraltet: Aktive Fensterbeschriftung. Sollte mit CaptionText als Vordergrundfarbe verwendet werden. Dasselbe wie Canvas.
AppWorkspace Veraltet: Hintergrundfarbe einer Mehrdokumentenschnittstelle. Dasselbe wie Canvas.
Background Veraltet: Desktop-Hintergrund. Dasselbe wie Canvas.
ButtonHighlight Veraltet: Die Farbe des Rahmen, der zur Lichtquelle gerichtet ist, für 3D-Elemente, die aufgrund dieser Rahmenschicht in 3D erscheinen. Dasselbe wie ButtonFace.
ButtonShadow Veraltet: Die Farbe des Rahmens, der von der Lichtquelle abgewandt ist, für 3D-Elemente, die aufgrund dieser Rahmenschicht in 3D erscheinen. Dasselbe wie ButtonFace.
CaptionText Veraltet: Text in Beschriftungen, Größenfeldern und Scrollleistenpfeilen. Sollte mit der ActiveCaption Hintergrundfarbe verwendet werden. Dasselbe wie CanvasText.
InactiveBorder Veraltet: Inaktiver Fensterrahmen. Dasselbe wie ButtonBorder.
InactiveCaption Veraltet: Inaktive Fensterbeschriftung. Sollte mit der InactiveCaptionText Vordergrundfarbe verwendet werden. Dasselbe wie Canvas.
InactiveCaptionText Veraltet: Farbe des Textes in einer inaktiven Beschriftung. Sollte mit der InactiveCaption Hintergrundfarbe verwendet werden. Dasselbe wie GrayText.
InfoBackground Veraltet: Hintergrundfarbe für Tooltip-Steuerelemente. Sollte mit der InfoText Vordergrundfarbe verwendet werden. Dasselbe wie Canvas.
InfoText Veraltet: Textfarbe für Tooltip-Steuerelemente. Sollte mit der InfoBackground Hintergrundfarbe verwendet werden. Dasselbe wie CanvasText.
Menu Veraltet: Menü-Hintergrund. Sollte mit der MenuText oder -moz-MenuBarText Vordergrundfarbe verwendet werden. Dasselbe wie Canvas.
MenuText Veraltet: Text in Menüs. Sollte mit der Menu Hintergrundfarbe verwendet werden. Dasselbe wie CanvasText.
Scrollbar Veraltet: Hintergrundfarbe von Scrollleisten. Dasselbe wie Canvas.
ThreeDDarkShadow Veraltet: Die Farbe des dunkleren (in der Regel äußeren) der beiden Rahmen von der Lichtquelle weg für 3D-Elemente, die aufgrund zweier konzentrischer Rahmenschichten in 3D erscheinen. Dasselbe wie ButtonBorder.
ThreeDFace Veraltet: Die Gesichts-Hintergrundfarbe für 3D-Elemente, die aufgrund zweier konzentrischer Rahmenschichten in 3D erscheinen. Sollte mit der ButtonText Vordergrundfarbe verwendet werden. Dasselbe wie ButtonFace.
ThreeDHighlight Veraltet: Die Farbe des helleren (in der Regel äußeren) der beiden Rahmen zur Lichtquelle hin für 3D-Elemente, die aufgrund zweier konzentrischer Rahmenschichten in 3D erscheinen. Dasselbe wie ButtonBorder.
ThreeDLightShadow Veraltet: Die Farbe des dunkleren (in der Regel inneren) der beiden Rahmen zur Lichtquelle hin für 3D-Elemente, die aufgrund zweier konzentrischer Rahmenschichten in 3D erscheinen. Dasselbe wie ButtonBorder.
ThreeDShadow Veraltet: Die Farbe des helleren (in der Regel inneren) der beiden Rahmen von der Lichtquelle weg für 3D-Elemente, die aufgrund zweier konzentrischer Rahmenschichten in 3D erscheinen. Dasselbe wie ButtonBorder.
Window Veraltet: Fensterhintergrund. Sollte mit der WindowText Vordergrundfarbe verwendet werden. Dasselbe wie Canvas.
WindowFrame Veraltet: Fensterrahmen. Dasselbe wie ButtonBorder.
WindowText Veraltet: Text in Fenstern. Sollte mit der Window Hintergrundfarbe verwendet werden. Dasselbe wie CanvasText.

Beispiele

Verwendung von Systemfarben

In diesem Beispiel haben wir eine Schaltfläche, die normalerweise durch die Eigenschaft box-shadow ihren Kontrast erhält. Im erzwungenen Farbmodus wird box-shadow auf none gesetzt, sodass das Beispiel das forced-colors Media-Feature verwendet, um sicherzustellen, dass es einen Rahmen der entsprechenden Farbe (ButtonBorder in diesem Fall) gibt.

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;
  }
}

Ergebnis

Spezifikationen

Specification
CSS Color Module Level 4 # css-system-colors

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

<color>: Der Datentyp, zu dem diese Schlüsselwörter gehören