Top きぃなび ホーム [0] HTML,CSSバグ＆癖リスト : 1. 目次
3.
ブラウザ別にスタイルシートを指定
| ■ 3. ブラウザ別にスタイルシートを指定 |
 |
|
|
| 3.1 | Netscape4.xに対する対策の必要性 | |
| 3.2 | @importを使ってNS4を除外 | |
| 3.3 | 複数mediaを指定してNS4を除外 | |
| 3.4 | JavaScriptでブラウザ判別 | |
| 3.5 | CGIでブラウザ判別 |
| 注１： | 「NS,NN=Netscape Navigator」「IE=Internet Explorer」 「CSS=Cascading Style Sheets(スタイルシート)」の略です。 |
| 注２： | ブラウザ名で特に指定が無いものはWindows版についての記述です。 |
| ■ 3.1 Netscape4.xに対する対策の必要性 |
前章で述べたように Netscape4.xにはスタイルシートに関して 致命的なバグが多いです。 そのためページ作成に当たっては以下のような対策が考えられます。
| 対策方法 | 指定方法 | スタイルシートの数 |
| NS4も含めて１つのスタイルシートですます。 | 通常の方法 | 1 |
| NS4に対してのみスタイルシートを使わない。 下記の条件判定の方法を利用。 | 下記参照 | 1 |
| NS4で動作する部分としない部分に分ける。 NS4互換の部分は通常の方法で指定し 非互換の部分は下記の条件判定の何れかで指定。 | 下記参照 | 2 |
| 各ブラウザ毎に別々のスタイルシートを用意する。 スクリプトでブラウザ毎にスタイルシートを出力。 | JavaScriptやCGI | 複数 |
このページでは上の表の3番目の方法を選んだ場合の例文を載せてみます。 以下の2つのファイルを使います。
【NS4にも対応したスタイルシートを記述 common.css】
div.test { border:outset; padding:10; font-size:20px; width:400px; }
【NS4非互換のスタイルシートを記述 special.css】
select.test,input.test,textarea.test { border:solid; width:200px; }
実際にNS4でページを表示して確認したり前章の内容を参考にして スタイルシートの記述をNS4互換・非互換の部分に分けます。 そして以下に述べる方法の何れかによってNS4に対する対策を施します。
| ■ 3.2 @importを使ってNS4を除外 |
スタイルシート内で「@import url(...);」と記述することにより 別のスタイルシートを読み込むことができますが NS4ではこの機能に対応していません。 そこでNS4非互換の部分を@import先の別ファイルに記述することにより NS4のみで特定のスタイルシートを動作させないことができます。
【@importを利用しNS4のバグ回避 import.css】
@import url(special.css);
div.test { border:outset; padding:10; font-size:20px; width:400px; }
上記ファイルを 「<link rel="stylesheet" type="text/css" href="css/import.css">」 などとして読み込みます。
| ■ 3.3 複数mediaを指定してNS4を除外 |
ホームページを利用できる装置には色々なものがあり それらに対してメディアタイプというものが定義されています。 PCの画面(screen)、プロジェクター(projection)、テレビ(tv)、プリンター(print) 、音声出力(aural) など様々なメディアタイプがあります。
NS4ではメディアタイプとして「media="screen"」と単独指定したものは 動作するようですが複数指定した場合にはそのスタイルシートの指定を無視 するようです。 この性質を利用して以下のように記述できます。
【linkタグに複数のmediaを指定しNS4のバグ回避】
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/special.css"
media="screen,tv,projection,print">
| ■ 3.4 JavaScriptでブラウザ判別 |
JavaScriptによってブラウザの情報を取得し それに従って処理を分岐させることができます。 以下の例ではJavaScriptでNS4か否かを判定し NS4の場合にのみ special.cssを 読み込ませる<link>タグを出力するようにしています。 なお、JavaScriptを用いる方法は ブラウザ側でJavaScriptを無効に設定していると 動作しないので注意が必要です。
【NS4でない時だけspecial.cssを読み込ませるスクリプト】
<head>
....
<link rel="stylesheet" type="text/css" href="css/common.css">
<script language="javascript">
<!--
if(!document.layers)
document.write("<link rel='stylesheet' type='text/css'
href='css/special.css'>");
//-->
</script>
<!--JavaScript無効時のための対策 (注1: NS4では無視される)-->
<noscript>
<link rel='stylesheet' type='text/css' href='css/special.css'>
</noscript>
...
</head>
| 注１： | NS4ではJavaScriptを無効にするとスタイルシートも無効になるようです (試してみたところWin版NS4.05,4.5,4.75, Linux版4.07,4.78など)。 そのため上記のように記述しておいて問題ないでしょう。 |
| 注２： | 上記スクリプトは通常「<head></head>」内に置きます。 このため MacIE5.0等ではページ外からの文中リンク参照がうまく動作しない可能性 があります。 <script>タグがあるとページ内リンクがずれる |
| ■ 3.5 CGIでブラウザ判別 |
先述のJavaScriptを使ったブラウザ判別は ユーザがJavaScriptを無効に設定しているときには 動作しないという問題がありました。 それに対しPHPやJSP,ASP,Perlなどを使い サーバ側でブラウザ判別すれば そのような問題を回避できます。
一般に CGI側でユーザの使用しているブラウザのUserAgent値 が得られるのでそれによってブラウザの種類やバージョンを判別できます。 これによってNS4かどうかも分かるので ユーザの使用しているブラウザに適したスタイルシートを 出力することができます。
 |
 |
HTML,CSSバグ＆癖リスト 目次 【数字キーでアクセス】 |  |
|||||||||||||||||||||||||||||||||||||||
|
|
|
|
||||||||||||||||||||||||||||||||||||||
Top きぃなび ホーム [0] HTML,CSSバグ＆癖リスト : 1. 目次
3.
ブラウザ別にスタイルシートを指定
| Please send your comments to admin@keynavi.net |