| |
今回は、DOM からちょっと離れて、DOM が表現する対象の１つであるスタイルシートの仕様 ( CSS2 - Cadcading Style Sheets Level 2 )に関して見てみましょう。
以前「DHTML の食えない事情」の「レイアのサイズ」の記事でサイズが不定の内容物を ちょうど含むレイアを生成するのためには、
<style type="text/css"><!--
#sample{ position:absolute; width:1; }
--></style>
<div id="sample"><table border=0 cellspacing=0 cellpadding=0
><tr><td nowrap><font color="red">吾輩</font>は猫である</td></tr
></table></div>といった、ちょっとトリッキーな記述をしなければ IE4/5, NN4 のブラウザのいずれかで見たとき、サイズが異なることになってしまうことを 紹介しました。
この HTML を Mozilla で表示するとどのようになるでしょうか？
結論を先に言うと、表示はあたかも同じように見えますがレイア "sample" のサイズは
「1×テーブルの高さ」のサイズになり意図とは異なるものになります。
例に挙げた HTML はレイアの幅を 1ピクセルに指定していますが、
レイア内のテーブル要素がそれ以上の幅を持つため、
レイアの幅の調整機構が働くことを前提とした記述です。
つまり Mozillaはレイアの領域からはみ出した部分の扱いが異なることを意味します。
そこで各ブラウザの扱い( overflow属性 )に関して見てみましょう。
| ブラウザ | 省略値 | 要素 |
|---|---|---|
| IE4 | visible | visible, hidden, scroll, auto |
| IE5 | visible | visible, hidden, scroll, auto |
| NN4 | - | なし |
| NN6(CSS2) | visible | visible, hidden, scroll, auto, inherit |
※ NN4 では overflow のプロパティはないが以下のように記述されている
if the layer contains elements that cannot be wrapped, such as images, that extend beyond the specified width, the actual width of the layer expands accordingly.
スタイルシートのサポートが不十分な NN4 を除き、意外にも全て同じ結果になりました。 で、結局この差は visible の解釈の差ということになるようです。
| IE4/5 | サイズ指定してあるレイア内の内容がレイアサイズを超えるとレイアサイズを伸張する |
| NN6 | サイズ指定してあるレイア内の内容がレイアサイズを超えてもレイアサイズを拡張しない |
W3C CSS2 では overflow プロパティの visible に関する説明としては単に "クリップしない"( content is not clipped )としか言っていないませんが、overflow プロパティの意味を考えれば、 NN6 の動作の方が仕様通りの気がします ( 困った仕様ですね〜、従来の動作を指定することもできないなんて... )。
ここで終わってしまっては、このコラムの意味が半減しますので(笑)、 なんとか対策を考えてみましょう。
<style type="text/css"><!--
#sample{ position:absolute; }
--></style>
<div id="sample"><font color="red">吾輩</font>は猫である</div>もし、この方法で IE4 もサポートするなら、表示する内容をやはりラップされないようにして
if(document.all && !document.getElementById){
document.write(
'<style type="text/css">\n'
+'#sample{ width:1px; }\n'
+'<\/style>\n'
);
}
なんて方法も考えられます。
<style type="text/css"><!--
#sample1{ position:absolute; width:1; }
#sample2{ position:absolute; }
--></style>
<script language="JavaScript"><!--
function init(){
var div;
// Mozilla で補正する場合
if(!document.all && document.getElementById){ // Mozilla なら
var div =document.getElementById('sample1'); // 1px 幅のレイア
var cdiv=div.firstChild; // レイアの子要素
div.style.width =cdiv.offsetWidth; // 幅を一致させる
div.style.height=cdiv.offsetHeight; // 高さを一致させる
}
// IE4 で補正する場合
if(document.all && !document.getElementById){ // IE4 なら
var div =document.all('sample2'); // 伸長されたレイア
var cdiv=div.children(0); // レイアの子要素
div.style.pixelWidth =cdiv.offsetWidth; // 幅を一致させる
div.style.pixelHeight=cdiv.offsetHeight; // 高さを一致させる
}
}
// --></script>
</head>
<body onLoad="init();"
<div id="sample1"><table border=0 cellspacing=0 cellpadding=0
><tr><td nowrap><font color="red">吾輩</font>は猫である</td></tr
></table></div>
<div id="sample2"><table border=0 cellspacing=0 cellpadding=0
><tr><td nowrap><font color="red">吾輩</font>は猫である</td></tr
></table></div>
あと、CSS2 の仕様を見ていて気がつくことは clip 指定の変更(?)です。
clip プロパティの指定は rect( top right bottom left ) で、
同じなのですが説明を見ると各要素は各辺からの距離となっています。
これでは従来の HTML との互換性もなくなってしまいます。事実、Mozilla も当初は
この仕様に従っていました。
さすがに、互換性を気にしたのか( ただの類推です )、M17からは従来の clip
指定と同じように仕様変更したようです( いやぁ、一安心 ^^; )。
しかし、W3C 準拠を表明している Mozilla でも、この仕様を無視するワケにはいかないでしょうから、
ひょっとすると CSS の仕様が近いうちに変更されるかもしれません( 当分は使用しない方が得策かもしれませんね〜 )。