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.

Die color CSS Medienfunktion kann verwendet werden, um die Anzahl der Bits pro Farbkomponente (rot, grün, blau) des Ausgabegeräts zu testen.

Syntax

Die color-Eigenschaft wird als ein <integer>-Wert angegeben, der die Anzahl der Bits pro Farbkomponente (rot, grün, blau) des Ausgabegeräts repräsentiert. Wenn das Gerät kein Farbgerät ist, ist der Wert null. Es handelt sich um eine Bereichseigenschaft, was bedeutet, dass Sie auch die vorangestellten min-color und max-color Varianten verwenden können, um Mindest- bzw. Höchstwerte abzufragen.

Hinweis: Wenn die verschiedenen Farbkomponenten durch unterschiedliche Bitanzahlen dargestellt werden, wird die kleinste Zahl verwendet. Zum Beispiel, wenn ein Display 5 Bits für Blau und Rot und 6 Bits für Grün verwendet, wird angenommen, dass das Gerät 5 Bits pro Farbkomponente verwendet. Wenn das Gerät indizierte Farben verwendet, wird die minimale Anzahl von Bits pro Farbkomponente in der Farbpalette verwendet.

Siehe Anwendung von Farbe auf HTML-Elemente mit CSS, um mehr darüber zu erfahren, wie Sie CSS verwenden, um Farbe auf HTML anzuwenden.

Beispiele

HTML

html
<p>
  This text should be black on non-color devices, red on devices with a low
  number of colors, and greenish on devices with a high number of colors.
</p>

CSS

css
p {
  color: black;
}

/* Any color device */
@media (color) {
  p {
    color: red;
  }
}

/* Any color device with at least 8 bits per color component */
@media (min-color: 8) {
  p {
    color: #24ba13;
  }
}

Ergebnis

Spezifikationen

Specification
Media Queries Level 4
# color

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
color media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch