CSSに関する覚え書き

メモ

CSSハッキングの手順を乗せておこう。（いわゆるCSSハック）です。ブラウザ毎に実装差違や不備（バグ）を利用して、CSSの適用を外したり、目的のブラウザだけに通用する設定をする事をさして言います。

Caioハック

コメントを/*/*/と記入することで、Netscape4だけを排除する形式

h1 { /*/*/ color: red; /* */}

Hollyハック

コメントを「/*\*/」の形式で書くことで、Mac IE5のみを排除する形式。

h1 { /*\*/ color: red; }

スターハック

セレクタ前に「* html」付けることによってWinIE4〜6、MacIE4〜5などでスタイルが適用されて、それ以外は適用されない形式。

 * html h1 { color: red; }

アンダースコアハック

プロパティ前に「＿（アンダースコア）」を入れることでWinIE4-6までスタイルが適用され、それ以外は適用されない形式。

h1 { _color: red; }

ハッシュハック

プロパティの先頭に「＃（シャープ）」を仕えることで、WinIE4-6、MacIE5、Opera7、Mozilla、Firefoxでスタイルが適用、それ以外は適用されない形式。

h1 {#color:red;}

スター７ハック

Operaだけに読ませるためのハック、全て続けて書かないとだめ。body、*(全称セレクタ)に適用対象要素と、空白類無しで連続したセレクタを持った声明を置きます。そこにNescapeやInternetExplorerに対する規則を書いてやり、それで上書きします。

body*h1{color:red;}

xmlns属性を利用したハッキング

ブラウザによってはxmlsを導入してないブラウザがあります。代表がIEになると思います。この方法を利用すると、Mozilla、Firefox、Opera7.5-、Safariでは適用されて他のブラウザでは適用されません。

html[xmlns]h1{color:red;}

:root疑似クラスハック

:rootを付けると、Mozilla、Firefox、Mac IE5、Safariなどの「:root疑似クラス」をサポートしてるブラウザでスタイルが適用されるもの。

:root h1 { color: red; }

Facriceインバージョン

珍しく、旧式のブラウザでのみ適用される形式。Netscape4、Opera4-5のみに適用される。

h1{ /*/*//*/ color:red;/* */}