User Agentについて


User Agentとは、HTML文書にアクセスしタグを解釈するプログラムの総称です。 いわゆるブラウザもUser Agentの一種ですね。 他にもWWWCや検索エンジンのロボットなどもこれに含まれます。

このサイトについてにあるように、意図した表示になっているかの確認は、Windows版 IE6によって行っていますが、Windowsで動作する比較的最近のブラウザについては、一応インストールして極端なレイアウトの崩れがないかチェックしています。

インストールしたUser Agent

Internet Explorer 6 (Windows版)

Windows2000を使っていた時に、IE6を入れたことがあったのですが、不安定なわりにCSSへの対応度はIE5.5と変わっておらず、失望した記憶があります。 Windows xpのIE6は安定しています。

IE5.5と変わっていないように見えたIE6ですが、文書型宣言によって後方互換モード(IE5.5までの表示)と標準準拠モードが切り替わるという実装がされています。 詳しくはマイクロソフト社の文書を参照してください。

Mozilla 0.9.7 (Windows版)

CSSコミュニティ界隈では、「標準準拠度が最も高いブラウザ」との評価もあります。 現在の最新版は1.0 RC1となっており、待望の1.0まであと少しです。 日本語パックはもじら組にて配布されています。 確認には英語版の0.9.7を使いましたが、日本語の文書を表示することに問題はありません。

Opera 6.01日本語版 (Windows版)

ファイルサイズも動作も軽いと評判のブラウザです。 標準準拠度もなかなかのもの。 独特のユーザーインターフェースと広告(レジストすれば消える)が特徴です。

デフォルト・スタイルの違い

リスト(ol、ul要素)のインデント指定方法

これはIE6とmozilla0.9.xの相違点です。 以下はCSS Laboratoryからの引用です。

IE5.5
ol, ul {
margin-left: 40px;
padding-left: 0;
}
N6.0 / 6.1
ol, ul {
margin-left: 0;
padding-left: 40px;
}

以上のような違いがあるので、CSSでインデント量を変更する場合は、margin-left と padding-left の両方を指定する必要があります。

li要素の行間

Opera6では li要素の行間を広げるのにmarginを設定しているようで、line-heightの設定だけでは希望の行間にはなりませんでした。 そこで以下のように指定したところ、思ったような行間で表示されました。

li{
margin-top : 0px;
margin-bottom : 0px;
line-height : 0.8em;
}

注意すべきはCSSの規格では、marginやpaddingはスタイルが継承されないという点です。 ul、ol要素に設定しても、その子要素である li要素には無効となります。

caption要素の位置

mozilla0.9.xでは、tableのcaption要素はセンタリングされ、尚且つmargin-leftが設定されているようです。 以下のスタイル指定で左端に寄ってくれました。

caption{
margin-left : 0px;
text-align : left;
}

th、td要素内のテキストの垂直位置

mozilla0.9.xでは、tableのth、td要素は垂直方向の配置がセンターになっています。 以下のスタイル指定で上詰めになってくれました。

th{
vertical-align : top;
}
td{
vertical-align : top;
}

仕様?

align属性

mozilla 0.9.xは、align="center" に対応していないそうです。 CSSでの指定は有効です。

table要素中のcol要素

しかし、mozilla 0.9.xは、col要素に対するスタイル設定を認識してくれないようです。 これはなんとかしてほしい。

table要素のwidth属性

Opera 6は、table要素にwidth属性(非推奨属性)を設定すると、他の設定は無視してセル(th、td要素)の幅を等分にしてしまうようです。 個々のセルやcol要素に対するwidth属性の指定は、きちんとレンダリングしてくれます。

色名による指定

Netscape(mozilla)とIEでは、全部で140色の色名を使うことができますが、Opera6.03はW3Cの規定にある16色にしか対応しません。 標準に厳格に準拠しているという意味では正しいのですが、ちょっと不便ですね(おかげで whitesmoke を、全部 #f8f8f8 に直しました)。

UserAgent別に適用するスタイルを変える

原則的に、サイト全体は一つのスタイルシートでカバーした方が保守性が良いのではないかと思う。 UserAgentごとのデフォルトスタイルの違いは、基本のスタイルシートの記述を厳密化していくことで対応する。

しかし、バグに近いような表現の違いや、UserAgent独自スタイルに対しては、UserAgent別に差分スタイルシートを作って対応するとよいだろう。 差分スタイルシートの適用は、UserAgentを判別するJavaScriptを使用することで行う。