一つのCSSでWEB用と印刷用を使い分ける方法

CSSは印刷用に別途用意する場合が多いのですが、一つのファイルにまとめてhttpアクセスを少なくし高速化を目指す「CSS efficiency tip: use a single stylesheet file for multiple media」というエントリーのご紹介。
微妙な違いですが、少しでもチューニングしたい場合に使えるかもしれません。
詳しくは以下
CSS内に@media属性を追加する
一つのCSSでメディアタイプを指定するには@media属性を使用します。
すべてのメディアに指定する場合は@mediaの外側に記述します。
以下のようなサンプルで動作するようです。
body {
color:#ffff00;
background-color:#fff;
}
@media screen, projection {
body { background-image:url(background.png); }
}
@media print {
body { color:#000; }
}
@media handheld {
body { color:#0f6517; }
}
複数のファイルを保守しなくても良い分、作業の効率化にもつながるのではないでしょうか。
ただしMac IEで動作しないとの事なので、注意です。
興味のある方はぜひ使ってみてください!
最新情報をお届けします
