monochrome

Baseline Widely available

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

Die monochrome CSS Media-Feature kann verwendet werden, um die Anzahl der Bits pro Pixel im monochromen Frame-Buffer des Ausgabegeräts zu testen.

Syntax

Das monochrome-Feature wird als eine <integer> angegeben, die die Anzahl der Bits pro Pixel im monochromen Frame-Buffer darstellt. Wenn das Gerät kein monochromes Gerät ist, ist der Wert null. Es handelt sich um ein Bereichs-Feature, was bedeutet, dass Sie auch die mit Präfix versehenen Varianten min-monochrome und max-monochrome verwenden können, um entsprechend Mindest- und Höchstwerte abzufragen.

Beispiele

HTML

html
<p class="mono">Your device supports monochrome pixels!</p>
<p class="no-mono">Your device doesn't support monochrome pixels.</p>

CSS

css
p {
  display: none;
}

/* Any monochrome device */
@media (monochrome) {
  p.mono {
    display: block;
    color: #333;
  }
}

/* Any non-monochrome device */
@media (monochrome: 0) {
  p.no-mono {
    display: block;
    color: #ee3636;
  }
}

Ergebnis

Spezifikationen

Specification
Media Queries Level 4
# monochrome

Browser-Kompatibilität