`monochrome` CSS-Media-Feature

Baseline Weitgehend verfÃ¼gbar

Diese Funktion ist gut etabliert und funktioniert auf vielen GerÃ¤ten und in vielen Browserversionen. Sie ist seit Januar 2020 browserÃ¼bergreifend verfÃ¼gbar.

Mehr erfahren
VollstÃ¤ndige KompatibilitÃ¤t anzeigen
Feedback geben

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

Syntax

Das monochrome-Feature wird als ein <integer> angegeben, der die Anzahl der Bits pro Pixel im monochromen Frame-Puffer darstellt. Wenn das GerÃ¤t kein monochromes GerÃ¤t ist, ist der Wert null. Es ist ein Bereichsfeature, was bedeutet, dass Sie auch die vorangestellten Varianten min-monochrome und max-monochrome verwenden kÃ¶nnen, um minimale bzw. maximale Werte 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: #333333;
  }
}

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