CSSハック〜モダンブラウザ（IE、Safari）編

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。maiです。

web標準化の波のおかげで、時代はcssレイアウト。

でもcssってブラウザごとにズレたりするのが困りものですよね。

そんなときにブラウザを限定してcssを適用するハックをご紹介します。

ちなみに、Firefoxが一番仕様に近い動作をするので、

cssを書くときはまずFirefoxで確認しながら書きます。

そのためFirefox向けのハックは基本やりません。

■ Safari向け

html*セレクタ { /* for safari */ プロパティ:値; }

Safari 2.x系

html:first-child セレクタ { /* for safari2.0 */ プロパティ:値; }

■ IE向け

IE6

* html セレクタ { /* for ie6 */ プロパティ:値; }

IE7

*:first-child+html セレクタ { /* for ie7 */ プロパティ:値; }

記述する順番は以下の通り。

1.Firefoxに適用するデフォルトの指定

2.Safariに適用する指定→Safari2に適用する指定

3.IEに適用する指定（順番はどっちでも）

IE系はどっちも同じ指定をすることが多いですが、

* html セレクタ, *:first-child+html セレクタ { /* for ie */ プロパティ:値; }

という書き方はできないので注意です。