CSS-Hack

Friday, Apr 22, 2005 - 01:27 +09:00

Webブラウザは基本的に、理解できない指定を無視します。それを利用して特定のブラウザだけを対象とした値を用意する手法。乱用すべきではないけれど、必要な時に惜しむべきでもないです。

Mac版を含む全てのIEで無視される指定

body[id="mose"] { background-image: url(back.png); }

Windows版とMac版も含む全てのIEは属性セレクタに対応していない。そのため、「id="mose"が指定されたbody」というこの指定は、Mac版を含む全てのIEで無視され、比較的新しいIE以外のブラウザでのみ適用されます。

古いWebブラウザとの互換性よりも新しいブラウザでより美しく表示させよう、というMOSe（Mozilla/Opera/Safari enhancement）に適した手法です。png画像で透過処理を使用したい時などに使います。

Windows版のIEにだけ異なる値を指定する

/* IE-win only - The Holly Hack \*/
* html #container { height: 1%; }
/* End Holly Hack */

『The Holly Hack』と呼ばれる手法。主にWindows版IEの配置に関するバグを回避する目的で使用されます。そういったバグは問題のあるボックスに対して幅や高さを指定してやることで回避できるのですが、場合によっては幅を指定すると拙いこともあるし、高さを指定すると、コンテンツがボックスの内容量を超過したときに問題が生じます。

IEはボックスの内容が溢れても量に応じて拡張されますが、他のブラウザでは途中で内容が切れて見えなくなってしまう。これを回避する目的で、Windows版のIEにだけ値を指定します。

/* IE-win only - The Holly Hack \*/

/* End Holly Hack */

ここでまずMac版IE5から隠します。Mac版のIE5は「*/」の前に「\」を入れるとコメントが終了したと認識しないため、次に「*/」が出現するまでコメントが続くと解釈します。つまり「\*/」から「*/」までの指定は、Mac版IE5では無視されます。

* html #container { height: 1%; }

「* html」はIE4～6（Win）とIE5（Mac）だけの値を指定する手法。「html」はルート要素であり、どの子孫要素にもならない。そのため上記の指定は大抵のブラウザでは無視されるのですが、IE4～6（Win）およびIE5（Mac）では１つ目のアスタリスクを無視して通常通り適用します。

先の記述でMac版IE5からは隠されているため、「* html」以後はWindows版IE4～6にだけ適用されます。IE3を使っている人間なんてもう何処にも居ないので、無視しても構わない。つまりWindows版IEだけの指定になります。

ただし、ルート要素である「html」の前に「*」を置くことは、CSSの書式上正しくありません。そこだけは留意しておきましょう。

参考： http://www.positioniseverything.net/

Windows版のIE5.5以前にだけ異なる設定をする

div.content {
	width: 400px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 300px;
}

『Box Model Hack』と呼ばれる手法。主にWindows版IE4～5.5の間違ったボックスモデルに対処する為に使用されます。古いバージョンのIEは、コンテンツ領域にパディングとボーダーを含んだ値を「width」の値として解釈します。CSSの仕様では「width = コンテンツ領域」であって、パディングとボーダーは別々の値。他のモダンブラウザはこの仕様に準じています。

この手法の説明をすると、Windows版IE5.5以前は、「\」を使ったエスケープ処理に対応していないため、「"\"」の後の「}」で指定が終わったと解釈して、その後の指定を無視します。これを利用してまずIE5.5以前用の値を宣言し、「voice-family」の指定でIE5.5以前を通過させた後、その他のブラウザ用に対して正しい値を指定します。

ただし、Operaの古いバージョン（Opera5など。すくなくともOpera7より前）はIEと同じく「voice-family」以降を無視してしまうことがあるため、提案者のTantek Çelikは次の指定を追加するよう勧めています。

html>body .content {
	width: 300px;
}

これは、Windows版IE以外に異なる設定をする指定。Windows版のIEは「>」で表す「子供セレクタ」に対応していないため、この指定を無視します。「html>body」は「htmlの子供要素であるbody」といった意味。

この指定を加えたことで、「voice-family」以降を無視してしまったOperaにも正しい値が付与されます。

参考： http://tantek.com/CSS/Examples/boxmodelhack.html

posted in HTML/CSS Trackback (0)

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/16

« Previous Entry - Next Entry »