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

Jedoch können Benutzeragenten eine Barrierefreiheit-Funktion namens Forced Colors Mode bereitstellen, bei der die Farben auf eine vom Benutzer und Benutzeragenten definierte Palette begrenzt werden, wodurch die Farbauswahl des Autors in bestimmten Eigenschaften überschrieben wird. Im Forced Colors Mode zeigt <system-color> die ausgewählten Farben an, sodass der Rest der Seite sich mit ihnen integrieren kann. Ein Beispiel für den Forced Colors Mode ist der Hoher-Kontrast-Modus in Windows.

Im Forced Colors Mode sollten Autoren Farben aus dem <system-color>-Typ für alle Eigenschaften verwenden, die nicht in der Menge der Eigenschaften sind, deren Farben überschrieben werden. Dies stellt sicher, dass die Seite konsistent dieselbe Farbpalette für alle Eigenschaften verwendet.

Autoren können den Forced Colors Mode mithilfe der forced-colors Medienfunktion 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, aber hier zur besseren Lesbarkeit in gemischter Groß- und Kleinschreibung aufgeführt sind.

Je nach Ihren Einstellungen können sich die Beispiel-Farben in der Tabelle ändern. Sie können diese Seite auch mit verschiedenen Browsern, Betriebssystemen und Systemeinstellungen ansehen, 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 Basisrahmenfarbe 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 Text, der speziell markiert wurde (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 einem ausgewählten 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-Farbmoduls definiert. Sie sind jetzt für die Verwendung auf öffentlichen Webseiten veraltet.

Schlüsselwort Beschreibung Ersetzung Beispiel
ActiveBorder Aktiver Fensterrahmen ButtonBorder
ActiveCaption Titel eines aktiven Fensters. Sollte mit CaptionText als Vordergrundfarbe verwendet werden. Canvas
AppWorkspace Hintergrundfarbe einer Mehrfach-Dokument-Ansicht. Canvas
Background Desktop-Hintergrund. Canvas
ButtonHighlight Die Farbe der dem Licht zugewandten Rahmen für 3D-Elemente, die 3D erscheinen, aufgrund dieser Umrandungsschicht. ButtonFace
ButtonShadow Die Farbe der vom Licht abgewandten Rahmen für 3D-Elemente, die 3D erscheinen, aufgrund dieser Umrandungsschicht. ButtonFace
CaptionText Text in Titel, Größenfeld und Scrollbar-Pfeilfeld. Sollte mit der Hintergrundfarbe ActiveCaption verwendet werden. CanvasText
InactiveBorder Rahmen eines inaktiven Fensters. ButtonBorder
InactiveCaption Titel eines inaktiven Fensters. Sollte mit der Vordergrundfarbe InactiveCaptionText verwendet werden. Canvas
InactiveCaptionText Farbe des Textes in einem inaktiven Titel. Sollte mit der Hintergrundfarbe InactiveCaption verwendet werden. GrayText
InfoBackground Hintergrundfarbe für Tooltip-Steuerelemente. Sollte mit der Vordergrundfarbe InfoText verwendet werden. Canvas
InfoText Textfarbe für Tooltip-Steuerelemente. Sollte mit der Hintergrundfarbe InfoBackground verwendet werden. CanvasText
Menu Menü-Hintergrund. Sollte mit der Vordergrundfarbe MenuText oder -moz-MenuBarText verwendet werden. Canvas
MenuText Text in Menüs. Sollte mit der Hintergrundfarbe Menu verwendet werden. CanvasText
Scrollbar Hintergrundfarbe der Scrollbars. Canvas
ThreeDDarkShadow Die Farbe des dunkleren (im Allgemeinen äußeren) der beiden Rahmen, die von der Lichtquelle weg zeigen, für 3D-Elemente, die 3D erscheinen, aufgrund von zwei konzentrischen Schichten umgebenden Rahmens. ButtonBorder
ThreeDFace Die Hintergrundfarbe der Oberfläche für 3D-Elemente, die 3D erscheinen, aufgrund von zwei konzentrischen Schichten umgebenden Rahmens. Sollte mit der Vordergrundfarbe ButtonText verwendet werden. ButtonFace
ThreeDHighlight Die Farbe des helleren (im Allgemeinen äußeren) der beiden Rahmen, die zur Lichtquelle zeigen, für 3D-Elemente, die 3D erscheinen, aufgrund von zwei konzentrischen Schichten umgebenden Rahmens. ButtonBorder
ThreeDLightShadow Die Farbe des dunkleren (im Allgemeinen inneren) der beiden Rahmen, die zur Lichtquelle zeigen, für 3D-Elemente, die 3D erscheinen, aufgrund von zwei konzentrischen Schichten umgebenden Rahmens. ButtonBorder
ThreeDShadow Die Farbe des helleren (im Allgemeinen inneren) der beiden Rahmen, die von der Lichtquelle weg zeigen, für 3D-Elemente, die 3D erscheinen, aufgrund von zwei konzentrischen Schichten umgebenden Rahmens. ButtonBorder
Window Fensterhintergrund. Sollte mit der Vordergrundfarbe WindowText verwendet werden. Canvas
WindowFrame Fensterrahmen. ButtonBorder
WindowText Text in Fenstern. Sollte mit der Hintergrundfarbe Window verwendet werden. CanvasText

Beispiele

Verwendung von Systemfarben

In diesem Beispiel haben wir eine Schaltfläche, die normalerweise ihren Kontrast mithilfe der box-shadow-Eigenschaft erhält. Im Forced Colors Mode wird box-shadow auf none gesetzt, daher verwendet das Beispiel die forced-colors-Medienfunktion, um sicherzustellen, dass ein Rahmen der entsprechenden Farbe verwendet wird (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;
  }
}

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