今のところこのサイトの CSS によるデザインはすべてのブラウザで共通した一種類のスタイルシートを使っていますが、標準仕様にあわせて作ったはずの CSS であっても各ブラウザのデザイン解釈の違いおよびバグなどで異なる表示結果が出てしまうことがあります。本来であれば標準仕様に沿って記述された CSS や HTML および XHTML はどのブラウザで表示させても同じ表示結果が得られるべきですが、残念ながらほとんどの(厳密には全て?)のブラウザでは未だ達成されていません。世界中における多くの Web 制作者の人たちはこのジレンマに悩まされており、私もそのうちの一人です。
今のところもっとも現実的な対応策はブラウザ毎に適切に記述された(当然ながら標準仕様を外れることもあります)文書ファイルをそれぞれ用意し、UA にてブラウザを判定してそれぞれのファイルに振り分けるという手法が一般的ですが、面倒くさいのでやっていません(笑)。標準仕様な記述をしておけばそのうちブラウザ側でバグフィックスが行われて勝手に改善されてゆくだろうという人任せな思惑もあります。つまるところは「時代がオレについてくる」ってヤツですか。
標準仕様と実際の表示結果とのせめぎ合い。そう、これはたたかいなのです。
私個人的に「こりゃ痛いなぁ」と感じた大きな表示不具合例を以下に挙げます。細かいところをあげれば気づいていない箇所も含め、それはもう無数に存在することでしょう。
Opera 7 で float 回り込みを指定したテキストが実際に回りこまず、画像が横にびろ~んと伸びてしまうバグ。
各種挙動をみてみると border に直接悪さをしているわけではなく、いわゆる CSS プロパティ的に "width:100%" が img エレメントに適用されてしまっているみたいです。
IE や Mozilla 系ブラウザではきちんと表示されているポップアップのJavaスクリプトが Opera では正常に動作せず、さらにこのスクリプトが DOM を経由しているため通常の CSS 表示にも影響を与えている模様。対策は…ブラウザ側で Javascript を切る…しかないんです。
同じくテキスト float 関連なのですが、width によるサイズを指定せずかつ background-color による背景色を指定しているブロック要素内で float によるテキスト回り込みを行うと、そのテキスト自体が表示されないという有名なバグが IE6 にはあります。Tracks Blog の曲目表示などでこれが起きていました(うちの IE 6 では何故か症状が出ません)
さすがにシェア 80% を越えるブラウザでこれが起こるのは困るので、これの対応として background-color による背景色指定で済むのをわざわざ1ピクセルの同じ色の画像を background-image によって背景画像とすることで代替しています。とても理不尽だ…
茶色の枠線が IE に限ってはみ出して表示されてしまうというバグ。垂直方向のサイズが不定なエレメントや、解除し忘れた float テキスト回り込みが枠線内にあるとこれが起こります。でもこれって変な話だよねぇ。
その1の不具合が出たときは、たいてい枠線内の要素がはみ出るというとんでもないことになってしまいます。
以上長々と述べさせてもらいましたが、ほとんどはサイト立ち上げ時から問題が出ていたものばかりで、現状ではもー解決不可能や! ということでこれらのトラブルシューティングは現在ほったらかしです。ここからさらにつっこんだ解決策を施すということはブラウザのバグおよび仕様に合わせて「標準仕様から外れた CSS を書く」という不本意なことになり、さらに javascript やらを勉強しなければならないのとその作業の面倒くささからそういったことは今後もしないと思います。別にここが公的なサイトというわけでも私がプロの Web デザイナーというわけでもなく、個人的趣味でやってる個人サイトなのでこれ以上手間ヒマかけられるかいっ! というのが本音ですが…。それにさっきも書きましたがおそらくそのうち勝手に時代がオレについてくると思うので(笑)。
時代がオレについてくるということを具体的にいうと、つまりはブラウザが改善されて仕様通りの挙動をするようになるということですが、今もっとも仕様通りの動作を目指している(もしくは最も仕様通りの動作をする)元気なブラウザはやはりオープンソース Mozilla 系列のブラウザでしょう。特にブラウザ機能に特化されたテクノロジー・プレビューである
Mozilla Firefox
は WIndows で動くブラウザの中で最も軽いパフォーマンスながらも標準仕様に乗っ取った動作をしてくれるブラウザで、おすすめです。
残念ながら Mozilla の礎となったブラウザの老舗
Netscape
は親会社である
AOL
の判断によりその開発が中止されてしまいましたが、これからの Mozilla には期待大です。
ブラウザ最大手である IE は当サイトにおけるアクセス解析からも 80% 以上のシェアを持っていますが、そのシェアの大きさとは裏腹にその動作において最も問題を抱えているブラウザともいえます。そのシェアの大きさが無視できない故に、やむなく標準仕様外で IE 寄りな記述をしているというサイトも多く見受けられます。今後最も改善を期待されるブラウザだと思われますが、プログラム自体が WIndows OS の核の部分と深く関わっている関係で、次期 Windows である Longhorn のリリースまで大きな改善(バージョンアップ)はないと思われ、それは 2005 年(2007 年という話も)以降になるまで待たなければなりません。しかしそれではあまりにもスパンが長いため、2004 年中にリリースされるといわれている Windows XP SP2 である程度の動きはあるかもしれませんが。
とても複雑怪奇でカオスと化しつつあるたたかいではありますが、Mozilla という新興勢力によって締結への道標が見えつつあります。Microsoft がぼやぼやしている間にさっさと勝利の旗を立ててしまうかもしれません…なんてのは甘い夢かもしれませんが、多くの Web 制作者は望んでいると思います。しかし方向性は W3C の勧告のもと、Mozilla によって具体的に示されつつあります。あとは普段から標準仕様に沿った書き方を心がけて、それが強みになるのを寝て待つだけです。
コメントする