monochrome

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.

light-level は CSS のメディア特性で、出力機器のモノクロフレームバッファのピクセルあたりのビット数を調べるために使用することができます。

構文

monochrome 特性は <integer> 値で指定し、モノクロフレームバッファのピクセルあたりのビット数を表します。機器がモノクロ機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた min-monochrome および max-monochrome の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例

HTML

html

<p class="mono">この機器はモノクロピクセルに対応しています。</p>
<p class="no-mono">この機器はモノクロピクセルに対応していません。</p>

CSS

css

p {
  display: none;
}

/* 任意のモノクロ機器 */
@media (monochrome) {
  p.mono {
    display: block;
    color: #333;
  }
}

/* 任意のモノクロでない機器 */
@media (monochrome: 0) {
  p.no-mono {
    display: block;
    color: #ee3636;
  }
}

結果

仕様書

Specification
Media Queries Level 4 # monochrome

ブラウザーの互換性

BCD tables only load in the browser