“color”メディア・フィーチャー｜メディア・フィーチャー｜メディア・クエリ｜CSS－havin' a coffee break

＃

“color”メディア・フィーチャーについて

“color”メディア・フィーチャーは出力デバイスのカラーコンポーネントあたりのビット数を条件とするためのメディア・フィーチャーです。

一般的なカラーディスプレイは赤、緑、青の3色を混ぜて色を表現するRGBカラーモデルを使用しており、各色を表現するのがカラーコンポーネントです。

一般的な液晶ディスプレイは24ビットカラー(24bpp)で赤、緑、青の各色をそれぞれ8(=3×8)ビットで表現します。8ビットで256(=2⁸)階調を表現できるので画素1個では約1677(=2²⁴)万色を表現できます。

カラーコンポーネントごとにビット数が異なる場合は最も小さい値が、インデックスカラーを使用するデバイスはカラーテーブル内のカラーコンポーネントあたりのビット数の最小値が使用されます。

インデックスカラーについては後述しています。

値は範囲コンテキスト、もしくは“min-”接頭辞と“max-”接頭辞で範囲指定できます。

モノクロデバイスのビット数を条件とする場合は“monochrome”メディア・フィーチャーを使用します。

＃

指定できる値

値	説明
<integer>	出力デバイスのカラーコンポーネントあたりのビット数
0	出力デバイスはカラーデバイスではない
(省略)	出力デバイスはカラーデバイスである

＃

サンプルコード



@media (min-color: 8) {


.sample {



/* 24ビットカラー以上のデバイスに適用されるスタイル。 */



}


}




@media (color) {


.sample {



/* カラーデバイスに適用されるスタイル。 */



}


}

メディア・クエリ~“color”メディア・フィーチャー

“color”メディア・フィーチャーについて

指定できる値

サンプルコード