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


20100226-01
CSSは印刷用に別途用意する場合が多いのですが、一つのファイルにまとめてhttpアクセスを少なくし高速化を目指す「CSS efficiency tip: use a single stylesheet file for multiple media」というエントリーのご紹介。

微妙な違いですが、少しでもチューニングしたい場合に使えるかもしれません。

詳しくは以下

IT/WEB業界への転職なら求人サイトGreen

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で動作しないとの事なので、注意です。
興味のある方はぜひ使ってみてください!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly