2009年6月16日火曜日

CSSハック

XHTMLソースのh1要素などのフォントサイズ、マージン、パディングの初期設定は、ブラウザによって異なります。
回り込みによる段組の設定が段落ちしてしまったりするのは、ブラウザのデフォルトCSSのためです。
このような問題を回避するために、次のような対策を講じておきます。

1)最初にすべてのデフォルトCSSの設定を無効にしておきます。

* {
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6, p, address {
font-size: 100%;
font-weight: normal;
font-style: normal;
}

このようにブラウザのもつバグや特有の解釈を利用して、特定のブラウザのトラブルを回避するための対応策をCSSハックといいます。
CSSハックは他に回避手段がない暫定措置、最終手段として用います。

2)バージョン4世代のブラウザはCSSハックでは解決できない問題が多く、アプリケーションを強制終了してしまうこともあるので、外部CSSを読み込ませないようにします。
IE4とNN4に外部CSSを読み込ませないようにするには次のように記述します。

@import “styles.css”

しかしこれでもNN4の初期バージョンではブラウザがフリーズすることもあるので、回避策としてmedia属性の値を「all」あるいは「screen, tv」としておきます。

3) バージョン5世代のブラウザ対策としては、IE5.0、IE5.5、MacIE5.X用のバグ修正専用CSSを用意しておきます。

4)バージョン6世代対策としては、IE用とそれ以外に分けられます。次のように指定すると、IE6.0、 IE5.0、MacIE5.xだけにCSSが適用される。「*html」を使うので、スターハックとよばれる。スターハックの他に、「アンダースコアハック」「ボックスモデルハック」があります。

#contents p {
font-size: 1em;
}

*html #contents p {
font-size: 90%;
}

5)また、IE6.0の配置に関する問題を解決するには、次のように問題のあるボックスごとに「width:100%」あるいは「height: 1%」を適用します。
幅に「100%」、高さに「1%」を指定しても、実際の内容の高さに合わせて表示するので実害はありません。。

*htmlセレクタ {
height:1%;
}

6) IE6.0以外のブラウザにだけ適用するには次のような要素をセレクタの先頭に指定する。

CSS-only Filters SummaryさまざまなCSSハック