monochrome
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。
monochrome は 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: #333333;
}
}
/* 任意のモノクロでない機器 */
@media (monochrome: 0) {
p.no-mono {
display: block;
color: #ee3636;
}
}
結果
仕様書
| 仕様書 |
|---|
| Media Queries Level 4 # monochrome |