IE6/IE7/IE8/IE9/IE10/&モダンブラウザ CSSハックまとめ
2013/10/24
以前にもIE6～9とモダンブラウザによるCSSハックの記事を書きましたが、単体で使う分にはハックが効いても、同時に数種類ハックをかけると機能しない場合がありました。
通常、ハックを使うコーディングは極力避けているのですが、あるASPカート内である一か所に必要に迫られて1px単位のしゅうせいが必要だった案件で出くわした摩訶不思議な体験をメモしておきます。
尚、IE9/IE10に関しては実機、IE6～8に関してはIETesterでの検証となっています。
Macでの検証はしておりません。
以前のコラム↓↓↓
IE6/IE7/IE8/IE9 CSSハックまとめ →
モダンブラウザ CSSハックまとめ →
IE10 CSSハック →
これは単体ではほとんど動作するようです。（※モダンブラウザに関してはIEと違って半強制的にバージョンアップされてしまうので、当時のバージョンとかなり違い最新バージョンだとうまく動作しないものもあるようでした。）
今回問題となったのは、これらを複数同時に使用した場合に相殺されて機能しないハックがあったと言う事です。
特にIEですが、ハックを掛ける順番にどうやら問題があるようでした。
IEに関してだけ言えば、CSSファイルの上から順番にIE6からIE10へと書き込んで行くと、IE8～IE10がデフォルトのままになっていました。
/*通常▼*/
body
{
color: #cccccc;
}
/*以下WindowsIEハック：記述順番注意▼▼*/
/*IE8▼*/
html>/**/body {
color/***/: #cccccc¥9;
}
/*IE7▼*/
*+html body {
color: #cccccc;
}
/*IE6▼*/
body {
_color: #cccccc;
}
/*IE9▼*/
body:not(:target) {
color: #cccccc¥9;
}
/*IE10▼*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
body {
color: #cccccc !important; /*上記と同時に使う場合!importantが必要*/
}
}
/*以上WindowsIEハック：記述順番注意▲▲*/
IE10に関しては、私の環境でのIETesterではIE9と同じ動きをしましたが、実機では動作していました。 また、IE9あたり？から実装されている互換モードと標準モードの切り替えがありますが、それによっても挙動が違いました。ここは注意が必要のようです！
/*以下モダンブラウザハック▼▼*/
/*Firefoxバージョン24で検証▼*/
body, x:-moz-any-link {
color: #cccccc;
}
/*Safari3以上＆GoogleChrome(webkit系の為別々は難しい）▼*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #cccccc;
}
}
/*以上モダンブラウザハック▲▲*/
Opera に関しては他にどうしても影響するため、同時に使う場合は無視と言う判断。
他に方法が見つかりましたらまた書かせていただきますが、Operaユーザーさんはごく少数のようでしたので今回は見送りました。
また、IE8以下等の複数のバージョンをまとめてハックする記述は使用頻度も少ないと判断し、今回の検証から外しました。