IEの独自拡張を逆手に取って

CSS HappyLifeさんでまた気になる記事を見つけました。

IEの様々なバグの真相らしきもの

ソレはhasLayoutというIE独自拡張の一つ。

・・・中略・・・

その結果、hasLayoutがIEの様々なバグの元凶(大袈裟?)だったみたいです。

hasLayoutは、ソコにレイアウトが有るのか無いのかってのを判断しているようで、デフォルトの値がfalseでレイアウト無しになっているので「背景色が指定された要素内でfloatがある時、要素内の文字が消える」とかって現象が起こるっぽいです。

そして、heightやwidthを指定することでトリガーとなりhasLayoutの値がtrueになり、レイアウトが有るとみなされ表示されるようになると。

うへぇー、なるほど。記事内でのお言葉をそのまま使わせていただくと、超GJな記事ですよ。目からウロコ落ちまくり。こういったIEの独自拡張を逆手に取ったコーディングができるようになると、また一味も二味もコーディングの奥深さが違ってくるでしょうね。ただ、独自拡張を使っていくと、W3Cの仕様的にはValidではなくなってしまう点に注意です。

CSS HappyLife 管理人さんがおっしゃる通り、IEではこれが仕様だということでしょう。少なくとも、私はそう解釈することで少しでも納得するようにしています。「バグ」と言ってしまうと、プログラム開発者の想定の範囲外で発生する不具合のことであり、ユーザーとしてはそれに遭遇したが最後、どうしようもないわけですから。

Web標準化という大きな流れの中で、Microsoftの独自仕様が鼻に付くようになった、という解釈で良いのではないかと思います。(IE7のリリースによってMicrosoftもWeb標準に大きく歩み寄ったわけですが)

その記事からリンクのあったMSDN(英語)のリファレンス、ちょっと覗いて見ただけですが、かなりすごいです。天下のMicrosoftだけありますね。

MSDN CSS Reference

MSDNを本格的に見始めたりなんかしたら、さながらディベロッパーのようです。コーダーという職種は、デザイナーとディベロッパーの調度中間に位置しているような気がします。

エラスティックレイアウトを採用してみました

当サイトのレイアウトにはエラスティックレイアウトという手法を使いました。コンテナ要素の幅をem単位で指定しています。該当部分の記述は以下の通り。

div#container {
width: 90%;
max-width: 60em;
min-width: 46em;
margin: 0 auto;
}

コンテンツ全体を囲む div#container に対して max-width と min-width をem単位で指定しています。そうすることで、ブラウザで文字サイズを変更すると div#container の幅が変わるようになります。なお、 max-width/min-width プロパティに対応していないIE6以前などのブラウザでは単に width:90% になるだけです。

また、エラスティックレイアウトで2カラムを実現するためにネガティブマージンをレイアウトに使っています。ネガティブマージンというのは文字通り、マイナス値を指定した margin プロパティのこと。

div#main {
float: left;
width: 100%;
margin: 0 -16em 20px 0;
}
div#sidebar {
float: right;
width: 15em;
margin-bottom: 30px;
}

div#sidebar の幅が15emで、残りの領域は div#main という割り当てとなっています。div#sidebar の width:15em に対して div#main の右 margin:16em 。差分の1emは間のマージン。これだけだと、div#main の右端が div#sidebar に潜ってしまうため、div#main の中身のブロック要素に右 margin を設定します。

div.entry {
margin: 0 16em 30px 0;
}

これで完成。

なお、このレイアウトには以下のサイトを参考にさせていただきました。
2xup.org: 一行あたりの文字数を制限する elastic layout (エラステックレイアウト)
Alternative Design Project: デザインテンプレート1110とネガティブマージン