>

Home Design Archives CSS & xhtml cssハック

cssハック

  • 2010年2月20日

CSSハック一覧(via CSSハック一覧:HTML│CSSタグ辞書

IE6以下用

スターハック

* html #hack { color:#000000; }
対応ブラウザ:IE4~6、MacIE4~5

セレクタの前に【* html 】をつける。

アンダースコアハック

#hack { _color:#000000; }
対応ブラウザ:IE4~6

プロパティの前に【_】アンダースコアをつける。

IE7用

*:first-child+html #hack { color:#000000; }
対応ブラウザ:IE7

セレクタの前に【*:first-child+html】をつける。

IE6、IE7用

#hack { /color:#000000; }
対応ブラウザ:IE6、IE7

プロパティの前に【/】をつける。

IE6のみ除外

#hack { color /**/:#000000; }
対応ブラウザ:IE7、IE8、Firefox、Safari、Opera、Chrome

プロパティの後ろに【/**/】をつける。

Firefox用

#hack { color:#000000; }
#hack, x:-moz-any-link { color:#333333; /* Fx 1.0 以降に適用される */}
#hack, x:-moz-read-only { color:#666666; /* Fx 1.5, 2.0 以降に適用される */}
#hack, x:-moz-broken { color:#999999; /* Fx 3.0 以降に適用される */}
#hack, x:x{ color:#000000; }
対応ブラウザ:Firefox

「グループ化されたセレクタの中に、対応していないものがあるとすべてが無効化される」という性質を利用したハックです。 一番最後の指定(x:x)では、一部ブラウザが未対応セレクタが含まれているグループを無視しないことがあるため、一番最初のデフォルト指定と同じ指定をします。

参考サイト:「Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット」
http://www.yomotsu.net/lab/css/csshack_firefox

IE7以外のモダンブラウザ用

html>/**/body #hack { color:#000000; }
対応ブラウザ:Firefox、Safari、Opera、Chrome、IE8

セレクタの前に【html>/**/body】をつける。

html[xmlns] #hack { color:#000000; }
対応ブラウザ:Firefox、Safari、Opera、Chrome、IE8

セレクタの前に【html[xmlns]】をつける。

Safari3用

body:first-of-type #hack { color:#000000; }
対応ブラウザ:Safari3

セレクタの前に【body:first-of-type】をつける。

Safari2用

/* hogehoge \*/
html:\66irst-child #hack { color:#000000; }
対応ブラウザ:Safari2

【/* hogehoge \*/】でコメントアウトをした後、セレクタの前に【html:\66irst-child】をつける。

XHTML側の指定(条件分岐コメント)


IEの特定のバージョンにのみ、そのCSSを適用させることができる。
↑は、「IE7未満(IE5~6)にだけ外部CSSを読み込ませる」という指定。

clearfix

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
} /*IE7以外のモダンブラウザ向け*/

.clearfix{display:inline-block;} /*IE7およびMacIE5向け*/

/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/ /*IE6以前向け*/
もはや説明不要な「clearfix」。 使わないでもなんとかなりますが、便利なことには変わりない。

カテゴリ

このブログ記事について

このページは、101が2010年2月20日 07:49に書いたブログ記事です。

ひとつ前のブログ記事は「リンク」です。

次のブログ記事は「IE-winで透過PNGを利用する方法」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 4.261

ページの先頭に戻る