link要素やstyle要素のmedia属性をJavaScriptで変更する場合のIEの挙動

投稿

HTML5に関してこんな記事が。

IE8以下はHTML5で登場した新要素を認識しないため、そのままでは新要素にスタイルを充てることができません。そのため、html5shiv (html5.js)(code.google.com)などJavaScriptを使う方法がありますが、スクリプトを無効にしているユーザーには意味がありません。

そこでIE8以下がMedia Queriesに対応していないことを利用して、あえて認識しないようなmedia属性を記述し、JavaScriptで改めて認識する形に書き換える手法が紹介されています。このようにすることで、スクリプトが有効な環境であれば、html5.jsなども読み込まれるのでHTML5の新要素が認識され、またスクリプト無効な場合はlink要素やstyle要素で指定したスタイルが一切適用されなくなります。

  • style属性で個々に指定したスタイルは適用されますが。

中途半端にスタイルが適用されるくらいならいっそブラウザのデフォルトスタイルとユーザースタイルシートのみで、という方針の場合は導入を検討してもよいかもしれません。

ところが、実施に試してみると特定の場合においてうまくいかないことが分かりました。たとえば次のHTML。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>style要素のmedia属性をJavaScriptで書き換えてみる</title>
<style media="all">
p {
  color: #00f; /* 文字色青 */
  background: #fff; /* 背景白 */
}

@media print {
  p {
    color: #f00; /* 文字色赤 */
  }
}
</style>
<script>
document.getElementsByTagName("style")[0].media = "all";
</script>
</head>
<body>
<p>この文字は何色になるでしょう?</p>
</body>
</html>

style要素にmedia属性が指定してあり、これをスクリプトで書き換えています。テストのため書き換え前後の値はどちらも"all"で、実用上の意味はありません。スタイルの中身はp要素の文字色を青にするものですが、印刷時（@media print）のみ赤色になるようにしています。

ほとんどのブラウザではスクリプトの有効・無効にかかわらず、ディスプレイに表示される文字色は青になりますが、IE8以下でスクリプト有効な場合のみ、なぜか赤色になります。link要素で外部スタイルファイルを読み込む場合や、media属性の書き換えを setAttribute() で行った場合も同様の結果でした。

一方で、@media print を @media screen と変えて印刷を行うと青色になります。つまり、このおかしな挙動はディスプレイ表示時において、Media typesの指定が無視される事象に思えます。