CSSハックの例
出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2016/06/05 00:54 UTC 版)
CSSハックにはさまざまなものがあるが、詳細は外部リンクを参照のこと。ここでは前述のボックスモデルに関する問題を解決する手段として用いられた「ボックスモデルハック」を紹介する。2000年暮れにTantek Celikにより考案されたもので、2006年10月刊行の大藤幹『スタイルシートサンプル&リファレンス』で既に「今では使われなくなった古い裏ワザ」として掲載されている。 #elem { width: [IE width]; voice-family: "\"}\""; voice-family:inherit; width: [Other browser width];}html>body #elem { width:[Other browser width];} 以上のように記述することでIE5.5以前とモダンブラウザ(比較的CSS対応の進んだブラウザの意味)でwidthプロパティに別の値を指定することができる。IE5.5以前では1番目のvoice-familyプロパティの部分で読み込みを終了しそれ以降の宣言は読み込まれないため、最初のwidthプロパティのみが有効となる。一方、モダンブラウザではそれ以降も読み込まれる。2回指定しているのは、Opera5にもIE5.5以前同様の不具合があり1番目のvoice-familyプロパティで読み込みを終了すること、またIE6以前は子要素セレクタ(html>bodyの部分)に対応していないため、両方を考慮するためには必要となるもので、Opera5を考慮しないのであれば不要となる。
※この「CSSハックの例」の解説は、「CSSハック」の解説の一部です。
「CSSハックの例」を含む「CSSハック」の記事については、「CSSハック」の概要を参照ください。
- CSSハックの例のページへのリンク