<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 in der Regel die Standardfarbwahl wider, die für die verschiedenen Teile einer Webseite verwendet wird.

Jedoch können User-Agents eine Barrierefreiheitsfunktion namens Forced Colors Mode bereitstellen. In diesem Modus werden die Farben auf eine vom Benutzer und User-Agent definierte Palette beschränkt und überschreiben die Farbauswahl des Autors in bestimmten Eigenschaften. Im Forced Colors Mode gibt <system-color> die gewählten Farben an, damit der restliche Seiteninhalt damit integriert werden kann. Ein Beispiel für den Forced Colors Mode ist der Kontrastmodus auf Windows.

Im Forced Colors Mode 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 Forced Colors Mode mit der forced-colors Media-Abfrage erkennen.

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

Syntax

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

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

Schlüsselwort Beschreibung Beispiel
AccentColor Hintergrund von akzentuierten Benutzeroberflächen-Steuerelementen.
AccentColorText Text von akzentuierten Benutzeroberflächen-Steuerelementen.
ActiveText Text von aktiven Links.
ButtonBorder Basisrandfarbe 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 Speziell markierter Text (zum Beispiel durch das HTML-mark-Element).
SelectedItem Hintergrund von ausgewählten Elementen, zum Beispiel ein ausgewähltes Kontrollkästchen.
SelectedItemText Text von ausgewählten Elementen.
VisitedText Text von besuchten Links.

Veraltete Systemfarb-Schlü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 Beispiel
ActiveBorder Rand des aktiven Fensters ButtonBorder
ActiveCaption Unterschrift des aktiven Fensters. Sollte mit CaptionText als Vordergrundfarbe verwendet werden. Canvas
AppWorkspace Hintergrundfarbe der Mehrfachdokumentschnittstelle. Canvas
Background Desktop-Hintergrund. Canvas
ButtonHighlight Die Farbe des Randes, der zur Lichtquelle hin zeigt, für 3-D-Elemente, die aufgrund dieser Randumgebung 3-D erscheinen. ButtonFace
ButtonShadow Die Farbe des Randes, die von der Lichtquelle weg zeigt, für 3-D-Elemente, die aufgrund dieser Randumgebung 3-D erscheinen. ButtonFace
CaptionText Text in Unterschrift, Größenfeld und Scrollbar-Pfeilbox. Sollte mit der ActiveCaption-Hintergrundfarbe verwendet werden. CanvasText
InactiveBorder Rand des inaktiven Fensters. ButtonBorder
InactiveCaption Unterschrift des inaktiven Fensters. Sollte mit der InactiveCaptionText-Vordergrundfarbe verwendet werden. Canvas
InactiveCaptionText Farbe des Textes in einer inaktiven Unterschrift. 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 Scrollleisten. Canvas
ThreeDDarkShadow Die Farbe des dunkleren (meist äußeren) Randes, der von der Lichtquelle weg zeigt, für 3-D-Elemente, die aufgrund von zwei konzentrischen Schichten der umgebenden Grenze 3-D erscheinen. ButtonBorder
ThreeDFace Die Vordergrundfarbe für 3-D-Elemente, die aufgrund von zwei konzentrischen Schichten der umgebenden Grenze 3-D erscheinen. Sollte mit der ButtonText-Vordergrundfarbe verwendet werden. ButtonFace
ThreeDHighlight Die Farbe des helleren (meist äußeren) Randes, der zur Lichtquelle hin zeigt, für 3-D-Elemente, die aufgrund von zwei konzentrischen Schichten der umgebenden Grenze 3-D erscheinen. ButtonBorder
ThreeDLightShadow Die Farbe des dunkleren (meist inneren) Randes, der zur Lichtquelle hin zeigt, für 3-D-Elemente, die aufgrund von zwei konzentrischen Schichten der umgebenden Grenze 3-D erscheinen. ButtonBorder
ThreeDShadow Die Farbe des helleren (meist inneren) Randes, der von der Lichtquelle weg zeigt, für 3-D-Elemente, die aufgrund von zwei konzentrischen Schichten der umgebenden Grenze 3-D 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 mit der box-shadow-Eigenschaft erhält. Im Forced Colors Mode wird box-shadow auf none gesetzt, daher verwendet das Beispiel die forced-colors Media-Abfrage, um sicherzustellen, dass ein Rand der entsprechenden Farbe (ButtonBorder in diesem Fall) vorhanden ist.

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

Siehe auch

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