CSS3 から導入される Media Type を大幅に拡張する仕様です。
Media Type とはCSS 2 系に元々ある仕様でCSS を適用するメディア(パソコンの画面、テレビ、プリンタ用紙など)を指定するときに使います。
以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。
<linkrel="stylesheet"type="text/css"href="共通の.css"media="all" /><linkrel="stylesheet"type="text/css"href="パソコンの画面の.css"media="screen" /><linkrel="stylesheet"type="text/css"href="プリンタ用紙の.css"media="print" />
以下のようにカンマで区切って複数指定することもできます。
<linkrel="stylesheet"type="text/css"href="テレビとパソコンの画面の.css"media="tv, screen" />
見たことありますよね!
他にも @media ルールや @import ルールでも使うことができます。
@importurl("unko.css")tv,print;/* ← これこれ! */@mediatv,screen{/* ← これこれ! */}
というわけで、 Media Type の復習でした!
もっと Media Type の細かい仕様を知りたい人は以下をどうぞ
Media types
で、 Media Query の話にもどります。 Media Query は Media Type の拡張です。
書ける場所も、 Media Type と同じで、
です。
Media Type と下位互換性があるので、 Media Type は Media Query の一つと考えることもできます。
簡単にいうと、CSS を適用するメディアを Media Type よりも細かく指定できるようになります。
抽象的に言っても分かりにくいので、実際に見てみましょう。
<linkrel="stylesheet"type="text/css"href="おっきいウィンドウ用.css"media="screen and (min-height: 600px)" /><linkrel="stylesheet"type="text/css"href="ちっちゃいウィンドウ用.css"media="screen and (max-height: 599px)" /><linkrel="stylesheet"type="text/css"href="カラーディスプレイ.css"media="screen and (color)" /><linkrel="stylesheet"type="text/css"href="白黒ディスプレイ.css"media="screen and (monochrome)" />
こんな感じです。なんとなく、わかりますね^^
and と 括弧の中 が Media Type から Media Query への新しい部分です。
では、 Media Query の文法を見てみましょう
まず、 Media Query も Media Type と同じようにカンマ区切りで複数指定できます。
screen and (min-height: 600px) and (min-width: 300px), screen and (min-width: 400px), print
こうすると screen and (min-height: 600px) and (min-width: 300px) と screen and (min-width: 400px) と print の、「どれかの条件を満たすメディア」という意味になります。
つまり or のような働きをする訳ですね。(Media Query には or はありません)
次に、 and で区切られます。
screen and (min-height: 600px) and (min-width: 300px)
これは、さっきの例でも出てきましたが screen で (min-height: 600px) と (min-width: 300px) の、「すべての条件を満たすメディア」という意味になります。
ここまで、カンマと and の区切りを紹介しましたが、これはあくまでも区切りです。
以下のように、ネストさせることはできません。
((A and B), ((C, D) and E))
カンマで区切られた条件には、 not と only というプリフィックスを付けることができます。
not screen and (min-height: 600px) and (min-width: 300px)
not はその名の通り、それ以降の条件の意味を逆にします。
only screen and (min-height: 600px) and (min-width: 300px)
また、 only は何もしません。ただ単に、Media Query を理解できないUA (ブラウザ)に条件判定を失敗させるためにあります。
カンマと and で区切られた条件は、以下の二つの種類があります。
Media Type は、CSS2.1 の時代からあった screen や tv や print や all などです。
Media Type は必ず最初に一つ必要です。つまり、 and で区切られた条件の最初は絶対 Media Type です。
以下に Media Type の一覧を示します。
Media Expression はさきほどから出てきている (min-height: 600px) などです。
Media Expression は必ず丸括弧で囲まれています。
Media Expression の丸括弧の中身は、 Media Feature と値がコロンで区切られて一個ずつです。
Media Feature は min-height とかで、値が 600px とかですね。
Media Feature が決まれば、 値がとるべき値の単位や型が決まります。
また、値を省略すると 0 ではない値という意味になります。(つまり、 (color) と書くと「(color:0) 以外」という意味)
以下に Media Feature の一覧を示します。
ちなみに、 min- max- は以上、以下という意味です。たとえば、 (min-height: 300px) だと「ウィンドウの高さが 300px 以上」という意味。
現在、 Media Query は以下の環境で、使うことができます。
JavaScript では、 Media Type は MediaListオブジェクトで扱いますが、 Media Query はどのようになっているのでしょうか。
少し調べてみたところ、DOM 2 Style の次期仕様である CSSOM の Editor's Draft に書きかけの項がありました。
CSS Object Model (CSSOM)
ここを見る限りでは、文字列にシリアライズ する方法はかなり細かく決まっているみたいですね。
今のところは、データ構造としては扱えなくて、MediaList の appendMediumメソッドで文字列を突っ込んだり、itemメソッドでシリアライズされた文字列を取得したりする感じになるのかな。
ちょっと残念
詳しい仕様はこちら、
Media Queries
Media Query についてまとめてみました。
引用をストックしました
引用するにはまずログインしてください
引用をストックできませんでした。再度お試しください
限定公開記事のため引用できません。