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”でこんな色々使い分けができるとは知らなかった…