水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > !importantという名の地雷

!importantという名の地雷

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由来のコードをざっくり消したら問題は解消し、ほかの問題も起きていないようなので、使わない方向で解決。

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

関連する話題: Web / HTML / CSS

最近の日記

関わった本など

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターンデザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーションウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)

その他サイト