続:overflowの挙動

d:id:Falky:20061110:1163157640の続編。
久々にデザインを弄ってるうちに、そういえば「overflow-(x|y)」なんてのがあったよね!とひらめいて、次のようにしてみた。

pre {
/*/
 * for all browsers
/*/
 overflow: auto;

/*/
 * overflow-(x|y) is only for IE
/*/
 overflow-x: scroll;
 overflow-y: visible;
}

overflow-(x|y)はIEの独自拡張のため、IEにだけ適用され、他の賢いブラウザはoverflow:autoでウキウキ!というわけである。いやぁ、さすが俺。
と、思ったら…あれ?Firefoxでoverflow-(x|y)が効いてるような?なじぇ??
調べてみたら、どうやらoverflow-(x|y)はCSS3のワーキングドラフトに含まれているらしい。だからGeckoが先取りで対応したんだね。喜ぶべきことだけど、むしろ採用されたせいでhackを使わなければならなくなるという皮肉…。IEさん、しっかり実装してよね!もう!

/*/
 * for all browsers
/*/
pre {
 overflow: auto;
}

/*/
 * overflow-(x|y) is *not* only for IE,
 * for IE and CSS3WD compatible browsers.
 *
 * [Star Html hack] for: WinIE4-6 / MacIE4-5
 * bypass the drawing problem of overflow:auto on IE.
/*/
* html pre {
 overflow-x: scroll;
 overflow-y: visible;
}

うん。これが一番見栄えがいいんじゃないかな。