CSSハック
CSSコーディングを行う際、ブラウザごとの表示の違いを調整するために、ブラウザが持っている「バグ」を逆手に取って利用する方法があります。俗にCSSハックと呼ばれているもので、中には本来CSSの書き方として適切なものでないものもありますし、何よりソースが長く複雑になるのであまり使いたくない。
しかし最もシェアが高く最もバグが多いブラウザが、ご存知Internet Fucking Explorer。使いたくないと言いつつもCSSハックの利用が必須とならざるを得ないという、皮肉な現状があります。
仕事で利用する機会も多いことですので、備忘録としてまとめてみました。
厳密には「ハック」と言えないものがあるのかもしれませんが、目的としてはブラウザ間の表示を統一する為の技術、ということでご理解ください。
IE 7ハック
7
Windows IE 7のみにスタイルを適用するハック。適用したいセレクタの前に「*:first-child+html」を付ける。CSS Validatorに通る。
スターハック
4〜6, Mac 4〜5
Windows IE 4〜6、Mac IE 4〜5のみにスタイルを適用する場合に用いる。スターつまり*を利用することからこのネーミングになったものと思われる。利用法としては、適用したいセレクタの前に「* html」を付ける。書式上は正しいのでCSS Validatorに通るが、それにマッチする要素はHTML文書には出現し得ない。
スター7ハック
5.5〜6, Mac 5 
Windows IE 5.5〜6、Mac IE 5、Safariのみにスタイルを適用する。適用したいセレクタの前に「html*」を付けるのだが、空白を含めないように注意したい。書式としては不正で、CSS Validatorに通らない。
Hollyハック
Mac 5
Mac IE 5のみにスタイルを適用、あるいはMac IE 5のみ除外したい場合に用いる。適用したいスタイルを、それぞれ以下のコメント形式で囲めばよい。CSS Validatorに通る。
なお、Hollyハックは別名バックスラッシュ（＼）ハックとも言われている。文字コードがShift JISのときにはバックスラッシュの代わりに「￥」を利用すればよい。
/* これ以降Mac IE 5のみに適用される \*//*/
p { color:#FF0000; }
/* これ以降Mac IE 5以外にも適用される */
/* これ以降Mac IE 5には適用されない \*/
p { color:#FF0000; }
/* これ以降Mac IE 5にも適用される */
ハッシュハック
4〜6, Mac 5 
7
Windows IE 4〜6、Mac IE 5、Firefox、Opera 7のみにスタイルを適用する場合に用いる。適用したいプロパティの前に「#」を付けて使う。CSSの書式としては不正で、CSS Validatorに通らない。
アンダースコアハック
4〜6
Windows IE 4〜6のみにスタイルを適用する場合に用いる。適用したいプロパティの前に「_（アンダースコア）」を付けるだけだが、CSSの書式としては不正で、CSS Validatorに通らない。
もし同様の処理をCSS Validatorに通るかたちで実現したいのなら、スターハックとHollyハックを用いて
* html p { color:#FF0000; }
/* */
とすればいい。
Caioハック
4
Netscape 4のみを排除する。CSS Validatorに通る。
p { color:#FF0000; }
/* これ以降Netscape 4にも適用される */
Fabriceインバージョン
4 4〜5
Netscape 4、Opera 4〜5のみにスタイルを適用する場合に用いる。CSS Validatorに通る。
p { color:#FF0000; }
/* これ以降全てのブラウザに適用される */
xmlns属性ハック
属性セレクタをサポートするFirefox、Mozilla、Safari、Operaにのみスタイルが適用される。CSS Validatorにも問題なく通る。
:root疑似クラスハック
Mac 5
:root疑似クラスをサポートするFirefox、Mozilla、Safari、Mac IE 5にのみスタイルが適用される。:root疑似クラスは策定中のCSS 3.0でサポートされる予定で、CSS 2.0では定義されおらずCSS Validatorではエラーとなる。
Safariハック
Safariにのみスタイルを適用させる。前者はスターハックとスター7ハックの複合技で、それぞれのハックの適用ブラウザの差を利用したものです。また後者はSafari用のハックとして単独で利用が可能です。いずれのハックもCSS Varidatorを通過しません。
他のブラウザについてもまったく同じことが言えますが、Safariのバージョンアップによりいずれのハックも崩壊する可能性があることを念頭に置いておくべきです。またSafariハックというネーミングはこちらで勝手に付けたものです。あしからず。
html*p { Safari用のスタイル }
* html p { その他のブラウザ用のスタイル }
2〜
Top 10 Related Entries
-
謎解きウェブInternet Explorerの条件分岐コメント
-
-
-
Addicted to MacFirebugを使えばJavascriptで動的出力されたソースコードを見られる
-
謎解きウェブメイリオのレンダリングはSafariが美しい
-
Crazy for GadgetsiPhoneついに登場
-
謎解きウェブZEBRA EFFECT
-
ネットをめぐる冒険Styleboost™がリブート
-
-
謎解きウェブ仮想ディスクドライブのデザインをカスタマイズする
2007.04.27 IE 7ハックを追記
このブログのアクセスログを見る限りでもそうなのですが、そろそろIE 7の利用者数も増えてきましたのでIE 7用のハックを追記いたしました。決まったネーミングがあるようでしたら情報頂けると助かります。
2007.04.30 Safariハックに別の方法を追記
これまでのスターハックとスター7ハックの複合技に加え、単独で利用できるものを追記。
2007.07.13 SafariハックのCSS Validation情報を修正
コメントにてSafariハックのCSS Validation情報に誤りがあることをご指摘いただきました。後者の:last-childを使ったハックではCSS Validatorに通ると書きましたが、検証したところ「通りません」でした。上書きにて修正。
2007.07.17 Safariハックの対応バージョンを追記
Safariの:last-childを使ったハックはバージョン2以降のみに適用されることが判明。追記いたしました。
2008.05.13 スターハックの解説を修正
コメント欄にて誤りをご指摘いただいたのを受け、修正。可読性を保つため上書きとさせていただきました。
2008.11.10 :root疑似クラスハックの解説を修正
コメントにてCSS Validation情報に誤りがあることをご指摘いただきました。上書きにて修正いたしました。
Comments
html[xmlns]
なのですが、html[xmlns]>/**/body
まで記述しないと、IE7にもスタイルが適用されるのではないでしょうか？以前この記事にはhtml[xmlns]>/**/bodyについても説明があったような気がするのですが、勘違いだったらすいません。
＞ミキ・オキタさん
レスが非常に遅れてしまいまして申し訳ありません。:root疑似クラスハックの件ですが、私の方でもエラーを確認いたしましたので修正させていただきました。ご指摘ありがとうございます。
:root疑似クラスハックですが、CSS Validatorに通りますか？ 私が試したところ、エラー扱いになってしまったのですが・・・。
＞シマダ様
貴重な情報ありがとうございます。なるほど、書式が正しいのでValidatorに通るのですね。勉強になりました。追記にも書きました通り、上書きにて修正済みです。
スターハックが ｢CSSの書式上は正しくない｣ というのは間違いです｡
スターハックは正しい書式だが､ それにマッチする要素はHTML文書には出現し得ない｡
これが正しい説明です｡
いつもとても勉強させていただいております。
私はバリバリの初心者で日々CSSと戦う日々です。
IE8はいったいどうなってしまうのでしょうか。
＞torisugariさん
情報のご提供ありがとうございます。さっそく試してみたのですが、残念ながら僕の環境（Mac OS X 10.5.1 + Safari 3.0）では確認できませんでした。torisugariさんの環境はSafari 2.0でしょうか？
/* safari only \*/
html:\66irst-chile div{
color: #cccccc;
}
/**/
これでもsafariのみに適用させる事ができるようです。
最近此処を知って、とても詳しく書いてあるので凄く勉強になっています。
Internet Fucking Explorerには吹きました。
IEとIE以外で表示が違う問題で悩んでいたので助かりました。有用な情報ありがとうございました。
＞nokiaさん
情報ありがとうございます。なるほどー、バージョン違いによる差ですか…。Safari単体にCSSハックを利用する機会自体多いとは思えませんが、これを利用すればバージョン別に異なるスタイルを適用させることもできそうですね。またまた修正させていただきました。
ついでに
「html[xmlns*=""] body:last-child」のハックはSafari2以降と思われます。
Safari1.3.2で検証してて変化ないなぁ～と…… orz
上の単独で使えない方は対応してました。
:last-childを使ったSafariハックですが、あらためて検証したところ確かに通らないようですね。上書きにて修正をさせていただきました。情報をお寄せいただきありがとうございます。
『:last-childは未知の疑似要素または疑似クラスです』
Safariハックの後者もCSS Varidator通りませんでした。
残念…。
＞Sizukenさん
自分でも何度も見ているエントリーなのに気づいていませんでした…。ご指摘ありがとうございます！上書き訂正いたしました。
「:root疑似クラスハック」の例示が「xmlns属性ハック」と同じものになっていますよー。