cssハックについて質問です。

質問

IE6～IE8以外のcssハックが

:root *> #help_me { color: red; }

この様になっていたのですがどのように使えばいいのでしょうか。

現在適用しているcss
.hoge {
margin:15px 0 0 0;
}

このhogeにIEのみ
margin:20px 0 0 0;
にしたいのですが
:root *> #help_me { color: red; }
hogeに対するこれの使い方が全く分かりません。

使い方を教えて下さい。

もしくは、
#help_me { color: blue\9; }
（※この場合はcolor:blueは分かるのですが9とは一体何でしょうか）
こちらでも大丈夫です。

よろしくお願いします。

回答No.3

DrFell · ベストアンサー

現在適用しているcss
.hoge {margin:15px 0 0 0;}
より後ろに

#help_meを普通のセレクタに変えるだけ
:root *> .hoge {margin:20px 0 0 0;}/*IE6～IE8以外用*/

#help_meを普通のセレクタに変え、いつものプロパティ:値の後ろに「\9」をいれ、;を続ける。
\9がハックです。
.hoge {margin:20px 0 0 0\9; }/*IE8以下用*/

ハックは通常表記より詳細度を上げるため、後ろに書くことが必要です。

お礼

回答ありがとうございます。

\9
これがハックだったんですね。
だからIE6～IE8以外は
:root *> .hoge {margin:20px 0 0 0;}/*IE6～IE8以外用*/
このような表記なんですね。

とても分かりやすい説明をしていただきありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

>このhogeにIEのみ
>margin:20px 0 0 0;
>にしたいのですが

逆に考えてください。
全部のブラウザに"IEに適用したいスタイル"を指定した後、IE以外に"IE以外のスタイル"を指定してください。

.hoge {
margin:20px 0 0 0;
}
:root *> .hoge { margin:15px 0 0 0; }

>もしくは、
考え方は同じですので割愛します。

お礼

回答ありがとうございます。

#help_meを普通のセレクタに変えればよかったのですね。
ということは、他の記述されてたcssハックも#help_meを変えればいいのですね。
ずっと分からなかった謎が解けてすっきりしました。

回答していただきありがとうございました。

回答No.1

ORUKA1951

:root *> #help_me { color: red; }
1):rootは、root擬似クラスで、CSS3から導入されたもので、CSS3に対応していないブラウザには適用されません。[詳細度0010]
2) ←半角スペースは子孫セレクタ
3)*は全称セレクタで、すべての要素セレクタに当てはまります。[詳細度0000]
4)>は子供セレクタで直接の子孫(いわゆる子供)にのみ当てはまります。
　IE6以前は対応していません。
5) ←この半角は無視されます。
6)#一意セレクタで、HTML内ではIDに該当します。CSS2では、*(全称セレクタ)が省略されているとみなします。[詳細度0100]
7){}宣言ブロックを意味します。

　よって、
「CSS3未対応のブラウザにはエラーで解釈されない、HTML文書のルートの子孫であるすべての要素の子孫であるすべての要素のうちIDの値に"help_me"を持つ要素に対する宣言で詳細度は、[0110]の宣言である」と読みます。

　他の場所で
#help_me{color:green;} /* 詳細度[0100] */
と指定してあっても、モダンブラウザは、
:root *> #help_me { color: red; } /* 詳細度[0101] */
の宣言で上書きします。

　もし、これが理解できなければ、説明しても無意味でしょうから、

\9;は、IE8以降のブラウザは文法エラーと解釈することを利用しています。

★ただ、CSSハックは使わないほうが良いです。私は一切使っていません。
・今は有効でも将来にわたって有効とは限らない、さらに将来別の指定として登場したとき、破綻してしまう・
　このようなブラウザのバグを逆手に取るCSSハックは、あくまでテスト用とかに限定しましょう。限定すべきです。

<!--[if lte IE 7]>
Make IE7 happy.
<![endif]-->
のような方法を使うほうがましです。

　たくさんのサイトを見て、この様なハックや、コメントによる振り分けも見ますが、HTMLがきちんと文書構造にしたがってマークアップされていなかったり、そもそもそのような振り分けが必要ない書き方があるものがたくさんあります。
　たとえばIE6は、親コンテナブロックの内寸をパディングへの内側ではなくボーダー辺の内側を参照するバグがありますが、それならパディングを指定せず、マージンを使えば済みます。

[例]
.hoge {margin:15px 0 0 0;}
のような書き方も、本来はしませんね。p.hoge span{/*詳細度22*/}のように要素セレクタと組み合わせて使います。そうすることで、div.hoge{}やp.strongには適用されませんから、先でHTMLを書き換えてdiv.hogeやdd.hogeが加わっても障害とはなりませんね。

＞このhogeにIEのみ
＞margin:20px 0 0 0;
にしたいのですが
＞:root *> #help_me { color: red; }
＞hogeに対するこれの使い方が全く分かりません。
　これを先の説明と照らし合わせるとわかるでしょう。

　しかし、それではMacIE5やIE9以降には・・？
　その親要素のpaddingを0にして、すべてのブラウザにmarginを指定するほうが安心ですが・・

お礼

回答していただいてありがとうございます。

今まで
:root *> #help_me { color: red; }
この文法で１つの塊ぐらいにしか考えていませんでしたが、
: にも root にも 半角スペース にもちゃんと意味があったのですね。

ハックでの調整ばかり考えていたら、確かにMacIE5やIE9以降に対して困りますね。
IEのみ縦のmarginが変わっていたのでcssハックで調整しようかと思ったのですが、使わずに調整する方向も考えたいと思います。

回答していただきありがとうございました。