続編
続編(?)を投稿しました。
はじめに
IT業界に従事しているわけでもない素人ながら、
Web制作のテクニックを紹介しているサイトなどを見るのが最近の趣味?なのですが、
その中でも pure css なテクニックを興味深く拝見させてもらっています。
しかし、それらの多くはcss3を利用していることが多く、
IEを以下で条件分けしたいことが多々あります。
(css3の対応未対応の表現が正確ではないかもしれませんが…)
IE8:css3未対応
IE9:css3一部未対応（Animation,Transitionsなどが未対応）
IE10:css3対応
javascript等でIEのhackはできますが pure css なのでcssで行ないたい!!
ということで、今さらながらの css hacks for IE です。
注意事項
注意事項1
下記内容は2014年時点のものです。
IE11が最新の状況でのhackです。
注意事項2
当方の作業環境は Win8.1+IE11,Firefox,Chrome ( & Vista+IE9 ) です。
その他のブラウザでの動作は確認していません。
IE10以下に関してはIE11のF12開発者ツールの
ドキュメントモードの切り替えで確認しましたが、
実機できちんと想定通りの動作をするかは分かりません...
サンプル
demo
demo(ソース付き)
IEのバージョン(IEのドキュメントモードの切り替え)で各hack箇所が色付けされます。
IE以外のブラウザは反応しません。
Web検索
2014年時点で css hack や ie css hack などを、
Web検索すると割とすぐ見つかるのが以下のhackです。
※1 同条件のhackは他にもありますが、とりあえずこれで。
※2 IE6およびIE7に関しては、とりあえずの記載です（サンプル内のみに記載）
IE10以下
.IE10orLess { background:greenyellow\9; }
IE8以上
.IE8orOver { background:greenyellow\0; }
IE10以上
@media all and (-ms-high-contrast:none){
.IE10orOver { background:greenyellow\0; }
}
IE11のみ
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .IE11only { background:greenyellow\0; }
}
[IE10以上]と[IE11のみ]の条件の後部の\0は、
IE以外のブラウザを確実に除外する理由で付けました。
論理積なhack
(論理積)
IE9に関しては疑似クラスの:rootを利用したものがWebで見つかりますが、
IE9以上のIEに効くだけでなく、IE以外のブラウザにも効いてしまいます。
そこで、[IE8以上]のhackと組み合わせてみたところ、
両方の条件を満たしたブラウザのみに効くようになりました。
まず:rootでIE8以下が脱落、次に\0でIE以外が脱落、結果IE9以上のみが残る、
という寸法です。
IE9以上
:root .IE9orOver { background:greenyellow\0; }
以降、同様に、今までのhackを組み合わせて作っていきます。
論理和なhack
(論理和)
複数の条件を併記すれば、いずれかの条件を満たしたブラウザに効くようになるので、
[IE8以上]と[IE10以下]の条件を併記すれば、IE全てに効くhackになります。
[IE8以上]に適用、次に[IE10以下]に適用、結果、IE全てが適用、という具合です。
IE全て
.IEall { background:greenyellow\0; }
.IEall { background:greenyellow\9; }
差集合なhack(非含意なhack)
以降のhackに関しては、
適用させたいIEが含むものを書いた後、
適用させないIEをIE以外のブラウザと同じ内容で上書きすることで、条件に合うようにします。
例えば、[IE9以下]のhackであれば、
まず[IE10以下]に適用するものを書き、
次に[IE10以上]をIE以外のブラウザと同じ値にすることで、
結果[IE9以下]のhackが出来上がる、という算段です。
IE以外のブラウザは初期値(transparent)としているとすると、
hackさせないIEもtransparentで上書きすることによって、条件に合うhackにしていきます。
ちなみに、以降のhackも、
\9と\0を使用したものを組み合わせているので、
IE以外には影響を及ぼさないはずです。
IE8以下
.IE8orLess { background:greenyellow\9; }
:root .IE8orLess { background:transparent\0; }
IE9以下
.IE9orLess { background:greenyellow\9; }
@media all and (-ms-high-contrast:none){
.IE9orLess { background:transparent\0; }
}
IE10のみ
@media all and (-ms-high-contrast:none){
.IE10only { background:greenyellow\0; }
*::-ms-backdrop, .IE10only { background:transparent\0; }
}
IE9のみ
:root .IE9only { background:greenyellow\0; }
@media all and (-ms-high-contrast:none){
:root .IE9only { background:transparent\0; }
}
IE8のみ
.IE8only { background:greenyellow\0; }
:root .IE8only { background:transparent\0; }
※何らかの変更を加える場合は、
スタイルの詳細度(優先度?優先順位?)にご注意ください。
特に疑似クラスである:rootを利用したhack。