2012年2月17日(金曜日)

!importantという名の地雷

公開: 2012年2月26日16時20分頃

!importantを使ってしまおうかどうしようか迷ったという話がありましたが、まさか、わずか数日後にこんなことが起きるとは。

とあるテンプレートがおおよそ完成し、検証フェイズに入ったところ、IE7とIE9で印刷時に不具合が起きることが報告されました。

で、私が原因を調べることになったわけですが、これが厳しい。

最近のIEには「F12開発者ツール」というものが搭載されていて、これでDOMの状態を見たり、どういうスタイルが適用されているのかを調べたりすることができます。しかし、印刷プレビュー時にF12を押しても、開発者ツールは出てきてくれません。当然、出力された紙を開発者ツールで調べることもできません。いきおい、印刷時にしか再現しない問題は手探りの調査になります。

しかし手探り調査も難航。いろいろなスタイルを上書きで指定してみたり、ルールセットを一つずつ消していったりしながら調べていっても、なかなか答えにたどり着かず。かなりの時間をかけてようやくたどり着いた答えが、これ……!

@media print {
* {
background: transparent !important;
color: black !important;
box-shadow:none !important;
text-shadow: none !important;
filter:none !important;
-ms-filter: none !important;
}
}

IE専用のfilterが打ち消されているのですが、どうもこれが影響してfloatまわりがうまく行かなくなる場合があるようです。そして!importantが指定されているため、普通のスタイル指定では上書きできないという。

このコードを書いたやつは誰だ!と海原雄山ばりに怒ってみたところ、なんのことはない、HTML5 Boilerplate (html5boilerplate.com)のstyle.css (github.com)に由来するものでした。

単にBoilerplate由来のコードをざっくり消したら問題は解消し、ほかの問題も起きていないようなので、使わない方向で解決。

※大規模サイトの開発をやっていると、こういう荒っぽいスタイルでは問題が起きる、という予感が自然にわいてくると思うのですが……まあ、そもそも大規模サイト向けではないのかもしれないですね。

「!importantという名の地雷」にコメントを書く