【CSS】古いバージョンの NN でレイアウトが崩れる（revised）

■ アクセス解析に見るブラウザーの割合

　先日、ちょっとした事情で、goo ブログ アドヴァンス利用者が見ることのできる 「アクセス解析」 のところをまじまじと見てみたのだが。

　 [ブラウザの種類] という項目がある。 ブラウザーの種類なんて、見てどうするのだろう？　OS の種類までわかり、閲覧者のホストまでわかるようになっていれば、詳細なアクセス解析を求めている人はうれしいのかもしれないが ... などと思ってしまった。 でも、せっかくだから、ちょっとのぞいてみようか、ということで見てみたところ、思ったよりもいろいろな UA （ユーザー・エージェント． web ブラウザーのこと） が使われている。 もはや Internet Explorer の独り勝ちの時代ではないとは思っていたけれど。

（もちろん、これら以外にもいろいろな種類のブラウザーがある。 私のところでは、他に、Lynx や w3m なども見受けられた）

　おどろいたのは、Netscape Navigator 3.x，4.x，Internet Explorer 4.x という、古めのバージョンのブラウザーを使っていらっしゃるかたが、結構いるのだな、ということ （利用者の皆さま、すみません）。 たしか、メーカーではすでに保証していないバージョンではなかったか、と思うのだが ... 。

　けれども、こうして実際に使っていらっしゃるかたがいる、というのが事実なわけで。 web サイト閲覧時、とくに不自由や問題を感じず、バージョン・アップをせずにそのまま過ごしている人が、思ったよりも多くいるのかもしれない。 あるいは、マシンの事情で、バージョン・アップしたくてもできない人も？

　デザインを独自カスタマイズ （というほどでもないが ... ） してしまったこのブログ。 果たして、そんな方々にきちんと見えているのか、気になってきた。 Internet Explorer の最新版ではキレイに見えていても、古めのブラウザーではガタガタ ... ということもありえる。

　ということで、可能な限り確かめてみることに。

　以下、確認は、すべて Windows 2000 上で行った。
（Macintosh については、マシンが確保できないため、今回は見送り ... ）





■ 古いブラウザーで表示確認

　まず。 Internet Explorer は、Netscape Navigator とちがって、異なるバージョンを共存させることができないため、すでにバージョン 6.0 がインストールされている自分の PC には 4.x，5.x をインストールできないのだが、たまたま会社のマシンで 4.x がインストールされているものがあったので、見てみると ... 。 なんとか、無事に表示されているもよう。

　IE 5.x は あいにくインストールされているものがない。

　たしか、5.x は、なかなかにクセのあるバージョンで、Microsoft が自社 web サイトにて 〈6.0 にバージョン・アップしてください〉 としきりに謳っていた記憶がある。 けれども、なにげに使っている人がいまだにいるバージョンでもある （ひょっとすると、Mac 版の IE 5.x かもしれないが） ので、なんとか入手して、いつか確認してみよう。



　□ Internet Explorer のサポート状況

　　　・Microsoft official website：「プロダクト ライフサイクル」



　そして、残念ながら、Netscape Navigator 3.x もインストールされているマシンがなく、Netscape 社のサイトに行っても、すでに提供を中止しているようで入手できなかった。

　NN 4.7x は、自分の PC にインストールされているので、見てみると。

　とんでもなくレイアウトが崩れている ... 。

　最初、goo ブログが用意したテンプレート自体が崩れているのでは、と思った （スタッフさま、申し訳ありません ... ）。 念のため、カスタム・テンプレート （ブルー） を初期状態に戻してみると、正常に見ることができた。

　となると、私がいじった HTML もしくは CSS による不具合のようなので、さらに、ああでもないこうでもない、といじっていたら ...
（仕事が立てこんでるのに、ナンデこういうのってハマってしまうんでしょうね？？）

　なんと、NN がアプリケーション・エラーを起こして、強制終了してしまった！　キケンだ ... 。 なんてキケンなブログなのだ ... 。





■ form （フォーム） 要素のスタイルを指定すると、Netscape Navigator 4.x で、レイアウトが崩れる

　そういえば ... と、古いバージョンの NN が、対応していないスタイルシート （CSS） が多くあったことを思い出し、スタイル設定のひとつひとつを慎重に調べてみたところ、
（ほんとに、仕事が立てこんでいるのだが ... ）

　どうやら、form （フォーム） 部品の input 要素や select 要素の指定のところでおかしくなっているもよう。

/* フォームボタン・入力欄変更 */
input {
	color: #000000; /* 文字色 */
	background-color: #C0C0C0; /* 背景色 */
	border: 1px solid #808080; /* まわりの縁取り */
}

/* テキストエリア（複数行入力欄．コメント本文に使用）変更 */
textarea {
	color: #000000;
	background-color: #C0C0C0;
	border: 1px solid #808080;
}

/* セレクトメニュー（ドロップダウンリスト．サイドバーの検索モジュールに使用）変更 */
select {
	color: #000000;
	background-color: #C0C0C0;
	border: 1px solid #808080;
}

　ここの指定を消去すると、NN 4.7x でも、大きくレイアウトが崩れることなく見ることができた。

　もともと、この指定、Opera や Firefox，Netscape Navigator 7.1 などでは無視されるので、ここを消すだけで、古い NN でのレイアウト崩れが解消できるのなら、と、指定しないことにした。

　ちなみに、スクロールバーの指定、

BODY {
	scrollbar-base-color: #ffffff; /* スクロールバーのベースの色 */
	scrollbar-track-color: #eeeeee;
	scrollbar-face-color: #ffffff;
	scrollbar-shadow-color: #c0c0c0;
	scrollbar-darkshadow-color: #808080;
	scrollbar-highlight-color: #ffffff;
	scrollbar-3dlight-color: #c0c0c0;
	scrollbar-arrow-color: #808080; /* スクロールバーの上下の矢印（▲▼）の色 */
}

　は、とくに問題ないようである。

　... ということで、私の CSS ソースを参考にして、同じようにフォーム要素の指定をしてしまったかたが、もし いらっしゃいましたら、こちらの点、どうぞご留意ください。 確認不足で申し訳ありませんでした。 そして、私のところなど参考にはしていないが、フォーム要素をいじってしまっているかたも、ぜひ、一度考え直してみてください。 現在主流となっているブラウザーでは問題なく見えているので、絶対に指定すべきではないとは言えませんが。

　たまたま、私のブログに、古いバージョンの NN をご利用のかたがいらっしゃっただけで、もしかすると、他のかたのブログには、あまりいらっしゃらないかもしれません。 また、OS の種類によっても、結果が異なるかもしれません。

　ほんの数パーセントながらもいまだに存在している古いバージョン利用者を取るか、見映えを取るか、は、それぞれの選択になると思います ... 。



　□ Netscape Navigator 4.x の入手先

　　　・Netscape official website：「Browser Central」 （英語）
　　　（インストール後の不具合などは、当方では保証いたしかねます。 ご了承ください）

　□ スタイルシート対応状況

　　　・ZSPC：CSS2対応状況ガイド

　　　・KeyNavi.Net：Netcape4.xとスタイルシート

　　　・とほほのＷＷＷ入門：とほほのスタイルシート入門（対応状況一覧）

　　　・とほほのＷＷＷ入門：スタイルシート論争 （おまけ）





■ その他、goo ブログのテンプレートで、古いバージョンの NN で見ることのできなかったもの

　上記の調査中、goo ブログでほかに CSS・HTML をいじられているブログさん、CSS・HTML いじられていないブログさんを （勝手に） NN 4.7x で見てみると、レイアウトが崩れてしまったり、ロードしたまま読み込み完了できないところがいくつかあった。

　力技的にスタイルを変えているものは、どうやら、レイアウトが崩れたり、解釈できずにフリーズしたり、スタイルシートが無効になったりするもよう。

　もともとは、古いバージョンの NN が、スタイルシートの実装がバグだらけなせいも あるにはあるのですけれど。

　やっぱり無理ヤリはいけませんね。 強引なのは、女性にも嫌われます （ん？？）。

　また、ついでといってはなんだが、現在 goo ブログで公開されているテンプレートが NN 4.7x で正常に表示されるかどうかも、調べてみた。
（ほんとに、ほんとに、仕事が立てこんでいるのだが ... ）

　以下、Windows 2000 / Netscape Navigator 4.7x での表示状況 ――
（とりあえず、途中まで ... ）
（もしかすると、どなたかがすでに調べられているかもしれませんが ... ）



　□ goo ブログ 公開テンプレートの Netscape Navigator 4.7x での表示状況





　※2005.2.28 追記
　　gooブログ スタッフブログ 「テンプレート９枚追加しました！総計１８４枚」 に trackback を送ってみました。