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

構文

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

HTML

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

CSS

p {
  display: none;
}

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

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

結果

仕様書

仕様書 状態 備考
Media Queries Level 4
monochrome の定義
勧告候補 値に負の数が取れるようになり、この場合は false と計算される。
Media Queries
monochrome の定義
勧告 初回定義。負の値は使用不可。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
monochrome media featureChrome 完全対応 1Edge 未対応 なしFirefox 完全対応 2IE 未対応 なしOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,