CSSをHTML上に読み込ませる際のmedia属性とCSSファイルをインポートする際の@importについて本日知ったこと。。。

今まではブラウザでの表示用CSSと印刷用CSSの読み込み指定する際、

<link rel=”stylesheet” type=”text/css” href=”common.css” media=”all” />
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />

といった具合に<head>タグ内でmedia属性の切り替えをしていましたが、CSS内でそれらを判別させる記述方法がありました。

記述の仕方は

@media print { セレクタなどを記述 }

こんな感じで。

例えば
@media screen { font-size: 12px; }
@media print { font-size: 10px; }

という風に記述をすると、ブラウザ(モニター)上ではフォントが12px、印刷時には10pxとなります。

今まではmediaの判別は上記に書いたソースの様に記述して判別させ、screen.css(CSSファイルインポート用CSSファイル)を用意して、その中で@importを使って、

@import url(“common.css”);

といったかたちで読み込む指定で使っていましたが、

@media all { @import url(“common.css”); }
@media print { @import url(“print.css”); }

こんな書き方をすればソースでmediaを切り替えるのではなく、CSSファイル内で完結できそうです。

…とか思っていたらもっと簡単な記述が。。。

@import url(“common.css”) all;
@import url(“print.css”) print;

これでmedia属性の切り分けは済んでしまうもよう…
“@media” “@import”でこんな色々使い分けができるとは知らなかった…

参考サイト