RIEMITSU

CSSハック

Web

別の事を調べていて、ハックという言葉に引っかかり、調べてみました。

CSSにたまに見かける、｢!important｣とか｢/*\*/｣、importantって重要なんだろうけど、
なんじゃこれ？と思っていつつも、通り過ごしていたのですが、ようやく判明！

CSSハック(css hack)とは、Webブラウザ間のCSSの解釈の違いやバグを振り分けの条件として、
特定のブラウザに対しスタイルを適用したり適用しなかったりする手法だそうです。
(参照サイト)　”コニファさんのサイト”http://www.conifer.jp/coni_mame130.html

例えば、モダンブラウザでは幅(width)の値に、線(border)や中身と外側のボックスまでの
間隔(padding)の値はふくまれません。
ところが、IE5(Windows/Mac)やIE6互換モードでは指定した幅(width)の値に含まれてしまうようです。
その対策としてハックをつかってみます。

モダンブラウザ用に同じ宣言内で最優先する値であることを意味する。
例えば、CSSで一つの宣言の中に、値が別の幅(width)の指定が複数ある場合、
このハックがついているほうをモダンブラウザでは最優先します。

#box{
padding:25px;
border:25px solid #e3e3e3;
width:320px !important;
width:420px;
}

しかし、Windows IE5~6はこれを無視して後に書いた方の値を適用するそうです。
それを利用し、この下に幅(width)と線(border)と(padding)を足した値を
書いておきます※仮にその値が420pxとします。

これで上手くいくと思いきや、実はMacのIE5は｢!important;｣の規則に従い最優先で適用してくれるのですが、｢width｣のバグを抱えているため、やっぱり幅(width)と線(border)と(padding)を足した値を適用させてやらなければならないのです。

そのため、まず、｢!important｣をつけた値を無視させなければなりません。
そこで登場するのがコメントアウトを使ったハックです。

MacのIE5は、｢/*\*/｣のようにコメントアウト文を閉じる寸前にバックスラッシュ(\マーク)があると、コメントの終了を理解できず、そのままコメントアウトし続けます。

そして、普通に閉じたコメントアウト文｢/* */｣に出会ったときにようやく終了させます。
なので、これを使います。

こうすることでMacのIE5は｢widt:420px;｣を適用するそうです。

なんだかややこしいし、最近ではIE6以下のブラウザの対応を打ち切るサイトも多いので、切羽詰った必要性はないかもしれませんが。どうしても、古いブラウザにこだわるクライアントのために。

Tweet

2012年11月1日