CSS3

@規則

@media

→●、mdn

¶各メディア向けスタイルシートの指定。

媒体クエリ

＝媒体条件
| [only | not]? 媒体型? [ [not | and | or] 媒体条件]?

<stylesheet>

@media print,screen{
  BODY{
    margin:0;
    font-size:10pt;
  }
}

媒体条件

→媒体特能

[only | not]?

媒体クエリ改変子。

only

媒体クエリの結果には効果は無いが、旧来のユーザーエージェントにおいては、その媒体クエリに 未知な媒体型 "only" が指定されていたかのように構文解析され、無視されるようになる。媒体クエリを、旧来のユーザーエージェントからは見えなくさせる効果がある。

not

否定形になる ―［真／偽］に評価される媒体クエリは、［偽／真］に評価されるようになる。

媒体型

＝all | [print || screen]

all

すべての装置に合致する。

print

印刷機、あるいは印刷表示の再現に意図されている装置（文書を“印刷プレビュー”で表示する Web ブラウザなど）に合致する。

screen

print に合致しない、すべての装置に合致する

not | and | or

真偽値代数。複数個の媒体特能を組み合せて、一つの媒体条件にまとめることができる。

not

否定形にできる。例えば not (color) は、(color) の意味を反転する ― (color) は、任意の種類の有色ディスプレイ装置に合致するので、not (color) は、有色ディスプレイを除く任意の種類の装置に合致する。

and

複数個の媒体特能を、and を挟んでつなげることで一体化させれる。そうして得られたクエリは、各 媒体特能すべてが 真 になる場合に限り、真 になる。例えば (width < 600px) and (height < 600px) は、両次元とも 600px より狭いスクリーン装置にのみ合致する。

or

複数個の媒体特能を、or を挟んでつなげることで一体化させれる。そうして得られたクエリは、各 媒体特能のうちいずれかが 真 ならば、真 になる。

例えば (update: slow) or (hover: none) は、［スクリーンの更新が遅い（電子書籍リーダなど）］または［首ポインタ指示装置が hover 能力を有さない］ときに合致する ― おそらく、利用者が hover するまで小さくたたんでおくようなレイアウトに代えて、当初から より多く情報を表示するレイアウトを利用するべきであることを指示する。

複数個の媒体条件を丸括弧 ( ) で括ってグループ化すれば、単独の媒体クエリと同じように、条件の中に入れ子にできる。

例えば (not (color)) or (hover) は、単彩色または hover 能力を有する装置に対し、真 になる。
単彩色、かつ hover 能力を有さない装置をクエリしたいと求めるならば、代わりに not ((color) or (hover)) と記さなければならない（あるいは、(not (color)) and (not (hover))) でも等価になる）。

媒体特能 ●

@media screen, print {
  body { line-height: 1.2; }
}

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

テスト