スクリーン向けスタイルシートと印刷向けスタイルシートを分けるように戻そうかと考えてた。過去ログ検索すると何度か切り替えてることがわかる。最近印刷向けとかに注意を向けてなかったので忘れてたけど、media=printとしてもHTTPリクエストは常に書いたところで走る。ので、別ファイルにするとHTTPリクエストがほぼ無駄な形で増えてしまう。
HTTPリクエストを無駄に増やさず印刷向けスタイルシートを別にするには、印刷前にJavaScriptでスタイルシート読んでやれば良さそう。スタイルシートの読み込みを待ってからprint()するボタンを用意するみたいのなら簡単そうだけど、印刷はブラウザーの機能を使ってもらいたい。となるとbeforeprintイベントを使うのが王道のようだ。
<link id="print-css" media="only print" href="/css/print.css">
<script>
window.addEventListner('beforeprint', function () {
document.getElementById('print-css').rel = 'stylesheet';
});
</script>Internet Explorer 11では期待通り動いた。しかしFirefox 28では印刷向けスタイルシートのリクエストは走るもののスタイルは反映されない。またbeforeprintにはChrome 34とSafari 7が対応してないので、これらではこのやり方ではどうにもならない。
単純な解はなさそうなので、問題を見つめ直してからアプローチ方法を練る必要があるようだ。