Netscape Navigator 4.x とスタイルシート

古いブラウザでは、スタイルシートが正しくサポートされていないこともあって、スタイルシートを使った結果、デザインが大きく崩れてしまうことがありますね。
デザインが崩れてページが読めなくなってしまうのであれば、いっそのこと、そのブラウザにはスタイルシートを読ませないようにしてしまいましょう。
今回は、古いけどまだ使われているブラウザ Netscape Navigator 4.x だけにスタイルを読ませない方法をご紹介致します。

JavaScriptを使う

JavaScriptを使ってブラウザを判別し、Netscape 4.x だったらスタイルを読ませないよう記述してみましょう。

この場合、「Netscape 4.x 利用者がJavaScriptをOFFにしている場合はどうなるのか?」という疑問を持たれるかも知れませんね。 確かに、JavaScriptで判別するのですからJavaScriptがOFFなら判別はできません。 しかし、Netscape 4.x では、「JavaScriptをOFFにしているとスタイルシートもOFFになる」ので、どちらにしても Netscape 4.x ではスタイルシートは無視されることになり、問題はありません。
※設定ダイアログ上では、JavaScriptをOFFにしていても、スタイルシートをONにできますが、実際にはスタイルシートは解釈されなくなります。

実現するには、HTMLファイルの <head> ~ </head> 中に、次のように記述します。
スタイルシートは、独立した別ファイル(下記では common.css)に用意しておきます。 ※詳しくは後述

HTML SOURCE:
<script language="JavaScript"><!--
   /* Netscape 4.x の場合はスタイルを読ませない */
   if(!((navigator.appName == "Netscape") &&
(navigator.appVersion.indexOf('4.') >= 0))) {
      document.write('<link rel="stylesheet"
type="text/css" href="common.css">');
   }
// --></script>
<noscript>
   <link rel="stylesheet" type="text/css"
href="common.css">
</noscript>

●赤色部分:
ブラウザの判別です。名前が Netscape で、バージョン番号に「4.」が含まれているかどうかを判断しています。 ifの先頭に「!」を加えていますので、総合すると、「『名前が Netscape でバージョン番号が 4.x』以外なら」という意味の記述になります。 その場合にだけ、スタイルシートを読み込むようになります。

●青色部分:
スタイルシートを読み込む記述です。2カ所とも同じ記述です。ここでは、「common.css」というファイルを読み込むように記述していますので、必要に応じてファイル名を書き換えて下さい。

●緑色部分:(<noscript>~</noscript>)
JavaScriptをOFFにしているユーザや、JavaScriptが使えないユーザのために、ここにもスタイルシートを読み込む記述を書いておきます。 Netscape 4.x の場合、JavaScriptをOFFにしているとスタイルも解釈されないので、問題はありません。

ちなみに

今回、スタイルシートは独立した別ファイルに用意しました。 上記の例では、ファイル名を「common.css」としていますが、他の任意の名前でも構いません。

ファイルの中身には、例えば次のような感じで、通常 <style>~</style> に記述していた内容をそのまま記述します。

CSS SAMPLE SOURCE:
H1       { text-align: center; }
A:hover  { color: green; background-color: #ffff80; }
A:active { color: #ffff60; background-color: white; }
A.nd     { text-decoration: none; }

テキストファイルですから、「メモ帳」などのテキストエディタで作成できます。

おわりに

今回は、ブラウザを判別してスタイルシートを適用させる(させない)方法をご紹介致しました。

最新のブラウザは、かなりまともにスタイルシートをサポートしていますので、IEでもNNでもOperaでも、多くは似たように表示できることでしょう。(完全に同じに とはいきませんが。)
問題は、古いブラウザへの対策ですね。
古いブラウザでも見える程度の使用にとどめておくのも1つの手ですが、 せっかく考えたデザインが使えないのは残念ですよね。
今回のように、古いブラウザにはスタイルシートを使わないという方法も、良いのではないかと思います。
もちろん、そのためにも、「スタイルシートがなければ見られない」ような記述には、するべきではありません。 この点には注意して下さい。

関連リンク:

JavaScript ガイドサイト
JavaScriptに関する様々なお役立ち情報が提供されている総合サイト。JavaScriptに関して知りたいことがあれば、まずはここをどうぞ。
スタイルシート記述講座(リンク集)
スタイルシートの記述方法について、基礎から応用まで詳しく解説した様々なサイトへのリンク集です。ぜひ、ご活用下さい。

過去の記事もぜひどうぞ:
★過去のシリーズ★
『ページ作成TIPS』
第06回● NN4.xにだけCSSを読ませない方法
第05回● リンクの下線を装飾したい
第04回● 写真自体を加工せず丸く表示する
第03回● 読込画像1つで複数ボタンを作る
第02回● ぴったりくっつけたい!-FORM編
第01回● ぴったりくっつけたい!-画像編


●メールマガジン発行中
毎週水曜日に発行中。 メールマガジン上でしか読めない豆知識なども連載。 ご購読は無料。みなさんのご登録をお待ちいたしております。
登録・バックナンバーの閲覧はこちら


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。