@media規則について。

CSSにおける出力メディア別にプロパティ定義を行う@media規則に関して解説します。

CSSでの@media規則とは。

CSSにおける@media規則とは、特定の出力メディア型に対してのみ有効なプロパティ定義を行うための規則です。

@media規則の書式は、以下のようになります。

@media 出力メディア型 {
    (特定の出力メディア型でのみ有効なプロパティ定義)
    }

このとき、出力メディア型は「,」で区切って複数指定する事も出来ます。

例えば、携帯電話(出力メディア型はhandheldまたはtty)でのみ指定したいプロパティ定義については、

@media handheld, tty {
    (携帯電話専用のプロパティ定義)
    }

と記述します。

実装上の問題が多いため、<link>要素のmedia属性で振り分けた方が安全でしょう。

ネットスケープ 4.x，インターネットエクスプローラ4.x及びマッキントッシュ版5.xには@media規則は実装されておりません。

従って、@media規則を活用する事で、これらのユーザエージェントで問題が起こり得るプロパティ定義を回避する事が可能です。

また、インターネットエクスプローラのウィンドウズ版5.xでは、<link>要素でリンクしているスタイルシートに於いて、その<link>要素にmedia属性が与えられている場合は@media規則をscreen型対応であっても無視します。

オペラ 6.xでは、<link>要素で直接リンクしているスタイルシートに於いて、そのmedia属性で指定されているメディア型を全部含んでいない@media規則は、例え該当するメディアであっても無視されます。

例えば、HTMLで、

<link rel="stylesheet" type="text/css" media="screen, projection " href="style.css" />

と言う形でリンクされている「style.css」において、

@media screen {
    (screen型メディア専用のプロパティ定義)
    }

と記述されている場合、オペラ 6.xではscreen型(フルスクリーンモードで無い状態)でもこの@規則が無視されてしまいます。

WAP 2.0では@media規則の実装を必須としておりますが、オープンウェーヴ社のWAP 2.0ブラウザには実装されておりません。