ボックスモデルハック

今更ですが、ボックスモデルハックって何?って言うCSS初心者の方へ。(偉そうですが、僕も全然です;)
voice-familyハックを利用したBox Model HackCSS Dencitieにて翻訳されていますので、ご覧になってみてはいかがでしょうか。基本的なハックですが、IE5.5などをキャッチアップできるので、使えれば重宝すると思います。ここでは、簡単に説明してみます。

例えば、ここに以下の様なブロックがあるとします。

div {
     width: 500px;
     padding: 10px;
     border: 5px;
}

OperaやIE6・NN6以上などのモダンブラウザであれば、ちゃんと500pxの幅で表示されるはずなのですが、CSS1を間違った解釈で表示するブラウザ(IE5.x)の場合、width500pxからpaddingとborderを引いた470pxと表示してしまいます。(500px-20px-10px=470px)

そこで、間違った解釈をするブラウザでも、500pxの幅を表示させるには、以下を追加・修正します。

div {
     width: 530px;
     padding: 10px;
     border: 5px;
     voice-family: "\"}\"";
     voice-family:inherit;
     width: 500px;
}

まず、IE5.x用にpaddingとborderを足した幅を設定します。その後に、音声読み上げ用のプロパティvoice-familyを使ったハックをおこないます。モダンブラウザであれば\の直後の文字はエスケープされてしまうので、voice-family: "}";と意味不明な解釈(本来はmale、female、childなど)をし、その次のvoice-family:inherit;(前の値を継承)という指示で上書き、その後500pxと指定するのです。しかし、IE5.xは\でのエスケープが行われず、voice-family: "\"}の括弧で閉じて終了してしまいます。IE5.xではそれ以降が読み込まれず、IE5.xでは530px、モダンブラウザでは500pxで表示され、結果同じ幅になるという仕組みです。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/346

Comments