HTML,CSSバグ＆回避法リスト : 5. ブラウザ別にスタイルシートを指定

HTML,CSSバグ＆回避法リスト

【このページ内のトピック：「Ctrl-矢印」でフォーカス移動・「G/T」連打で自動ナビ】

5.1	Netscape4.xに対する対策の必要性
5.2	@importを使ってNS4を除外
5.3	複数mediaを指定してNS4を除外
5.4	JavaScriptでブラウザ判別
5.5	サーバ側スクリプトでブラウザ判別
5.6	条件分岐コメントでIE5+を判別
5.7	まとめ

注１：	「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。
注２：	ブラウザ名で特に指定が無いものはWindows版についての記述です。
注３：	スタイルシートについては、特に断りの無い限り互換モードについての記述です。

■ 5.1 Netscape4.xに対する対策の必要性

以上見てきたように、スタイルシートの実装はブラウザ毎に違いがあり使用に当たっては特別な配慮が必要です。特にNetscape4.xには問題のあるバグが多いので対策が必要です。対策として以下。


		NS4に対してのみスタイルシートを使わない
		NS4も含めて共通のスタイルシートを指定
		NS4互換,非互換の部分に分け非互換のものはNS4に適用しない
		スタイルシートは使わずtableタグやfontタグ等を駆使してデザイン

このページでは3番目の方法を中心に説明します。

実際にNS4でページを表示させたり前章の内容を参考にスタイルシートをNS4互換・非互換の部分に分けます。そして以下の2つのファイルを用意します。

【NS4互換(表示崩れない)スタイルシートを記述 common.css】

div.test { border:outset; padding:10px; font-size:20px; width:400px; color:green; }

【NS4非互換(表示崩れる)スタイルシートを記述 special.css】

select.test,input.test,textarea.test { border:outset; width:200px; margin-left:50px; }

NS4はフォームオブジェクトに枠や背景画像の指定をすると表示が崩れフォームが機能しません。詳しくはフォームに枠や背景画像を指定すると表示崩れる。

次に以下に述べる何れかの方法によってNS4に対する対策を施します。

■ 5.2 @importを使ってNS4を除外

スタイルシート内で「@import url(...);」と記述することにより別のスタイルシートを読み込むことができますが NS4(＆IE3)ではこの機能に対応していません。そこでNS4非互換の部分を@import先の別ファイルに記述することにより NS4(＆IE3)でのみ特定のCSS指定を無効にできます。

【@importを利用しNS4のバグ回避】

<link rel="stylesheet" type="text/css" href="css/common.css"> <style type="text/css">  </style>

実験ページ：@importを使ったNS4バグ回避 (NS4.01はクラッシュ？)

注：Netscapeの古いバージョン(4.01など)では @importを使うとブラウザがクラッシュするらしいです。 NS4.03,NS4.04,NS4.05で調べてみましたが確認できませんでした。しかし念のため使用を避けた方がいいかも知れません。

■ 5.3 複数mediaを指定してNS4を除外

ホームページを利用できる装置には色々なものがありそれらに対してメディアタイプというものが定義されています。 PCの画面(screen)、プロジェクター(projection)、テレビ(tv)、プリンター(print) 、音声出力(aural) など様々なメディアタイプがあります。

NS4ではメディアタイプとして「media="screen"」と単独指定したものは動作しますが「media="all"」としたり複数のタイプを列挙した場合にはスタイルシートの指定を無視するようです。この性質を利用して以下のように記述できます。

【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,projection,tv,print">

実験ページ：複数のmedia指定によりバグ回避

■ 5.4 JavaScriptでブラウザ判別

JavaScriptによってブラウザの情報を取得しそれに従って処理を分岐させることができます。但し JavaScriptを用いる方法はブラウザ側でJavaScriptを無効に設定していると動作しないので注意が必要です。

以下の例ではJavaScriptでNS4か否かを判定し NS4の場合にのみ special.cssを読み込ませる<link>タグを出力するようにしています。

【NS4でない時だけspecial.cssを読み込ませるJavaスクリプト】

<head> .... <link rel="stylesheet" type="text/css" href="css/common.css"> <script language="javascript">  </script>  <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など)。そのため上記のように記述しておいて問題ないでしょう。

実験ページ：JavaScriptを使ったバグ回避

注２：上記スクリプトは<link>を出力するので <head>...</head>内に置かれます。このため MacIE5.0ではページ外からの文中リンク参照がうまく動作しない可能性があります。 <script>タグがあるとページ内リンクがずれる

■ 5.5 サーバ側スクリプトでブラウザ判別

先述のJavaScriptを使ったブラウザ判別はユーザがJavaScriptを無効に設定しているときには動作しないという問題がありました。それに対し CGIのような仕組み(PHPやJSP,ASP,Perl,SSIなど) を使いサーバ側でブラウザ判別すればそのような問題を回避できます。

一般にスクリプト側でユーザの使用しているブラウザのUserAgent値が得られるのでそれによってブラウザの種類やバージョンを判別できます。

【UserAgent値の例】

IE	Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
	Mozilla/4.0 (compatible; MSIE 5.0; Mac_PowerPC)
	Mozilla/4.0 (compatible; MSIE 4.01; Windows 98)
Netscape4.x	Mozilla/4.7 [ja] (Win98; U)
Netscape4.x	Mozilla/4.61 [ja] (X11; I; Linux 2.2 i686)
Netscape6+	Mozilla/5.0 (Windows; U; Win98; ja-JP; rv:0.9.4) Gecko/20011019 Netscape6/6.2
Netscape6+	Mozilla/5.0 (Windows; U; Windows NT 5.0; ja-JP; rv:1.0.2) Gecko/20021120 Netscape/7.01
Mozilla	Mozilla/5.0 (X11; U; Linux i686; ja-JP; rv:0.9.6) Gecko/20011120
Opera	Mozilla/4.0 (compatible; MSIE 5.0; Windows XP) Opera 6.03 [ja]
Opera	Mozilla/4.0 (compatible; MSIE 5.0; Linux 2.4.7-10 i686) Opera 6.1 [en]
Safari	Mozilla/5.0 (Macintosh; U; PPC Mac OS X; ja-jp) AppleWebKit/85 (KHTML, like Gecko) Safari/85
iCab	Mozilla/4.5 (compatible; iCab 2.9.1; Macintosh; U; PPC)
iMode	DoCoMo/1.0/N503i/c10
iMode	DoCoMo/2.0 P2101V(c100)
j-phone	J-PHONE/2.0/J-SH03
Ez-Web	UP.Browser/3.04-CA11 UP.Link/3.2.2.2
DreamCast	Mozilla/3.0 (DreamPassport/3.0)
Web-TV	Mozilla/3.0 WebTV/1.2 (compatible; MSIE 2.0)

これによってNS4かどうかも分かるのでユーザの使用しているブラウザに適したスタイルシートを出力することができます。

【PHPを使いブラウザがNS4でない時にspecial.cssを読み込ませる】

<head> .... <link rel="stylesheet" type="text/css" href="css/common.css"> <?php $ua=$_SERVER["HTTP_USER_AGENT"]; if(!ereg("^Mozilla/4",$ua) || eregi("compatible",$ua)) print "<link rel='stylesheet' type='text/css' href='css/special.css'>"; ?> ... </head>

この方法の問題点としてはプロキシの設定等によりUserAgentの値が変更された場合にブラウザ判定ができないことが挙げられます。

上の例でいえば、ユーザがNS4を使っていて且つPHP側で得られるUserAgent値が空だと困ったことになります。 NS4に対しspecial.cssが出力されてしまい結果的にフォームが機能しなくなるでしょう。

またサーバが無いローカル環境ではテストしにくいという問題もあります。 Webの巡回プログラムなどで自動的に取得されたホームページを後でローカルで見る場合にも問題になります。

実験ページ：PHPを使ったバグ回避 (サーバでPHPの設定必要)

■ 5.6 条件分岐コメントでIE5+を判別

IE5以上では条件分岐コメント(Conditional Comments) という便利な機能が使えます。

詳しくは http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

NS4の判定には使えませんが IE5+の特定バージョンの判定(一致・以上・以下)、サポート外ブラウザ(NSやIE4-,Operaなど)かどうかの判定ができるので IE5+の拡張機能を利用する時には便利です。

【条件分岐コメントの例】

IE5.x	<!--[if IE 5]> ... <![endif]-->
IE5+	<!--[if gte IE 5]> ... <![endif]-->
IE5+以外	<![if lt IE 5]> ... <![endif]>

他の例や実際に実行してみるには以下のページを見てみてください。

実験ページ：条件分岐コメントの文例とブラウザ互換性

■ 5.7 まとめ

上記の５つの方法について表にしてみます。

【ブラウザ別にスタイルシートを指定する5通りの方法】

方法	機能	備考
@import指定	・NS4,IE3のみ除外可	・環境に関係なく利用可
複数media指定	・NS4のみ除外可	・環境に関係なく利用可
JavaScript利用	・各ブラウザ,バージョン毎にCSS指定可・CSS指定以外にも利用可	・JavaScriptを無効にした時の対策要・ページ内リンクの問題発生
CGI(サーバ側スクリプト)利用		・UserAgent値が得られない時の対策必要・サーバ設定必要、ローカルでは動作せず
条件分岐コメント		・IE5+のみ判定可能

上記の方法はそれぞれ一長一短があるので組合わせて使ってもいいでしょう。

実際的なケースとして

例としてスタイルシートを下記の３つの部分に分けることを考えます。そして上記のブラウザ条件分岐の方法を適用します。


		表示上必須且つNS4互換機能の指定 (common.css)
		フォームのスタイル指定などNS4非互換機能の指定 (special.css)
		IE5+のみの拡張機能の指定 (ie5.css)

【3通りのスタイルシートを用意し環境ごとに適用】

<head> .... 通常の方法でスタイル指定 <link rel="stylesheet" type="text/css" href="css/common.css"> 複数メディアを指定してNS4を除外 <link rel="stylesheet" type="text/css" href="css/special.css" media="screen,projection,tv,print"> 条件分岐コメントでIE5+にのみ拡張スタイルシート適用  ... </head>

上記のようにすると

NS4にはcommon.cssのみ、それ以外にはspecial.cssも適用。

IE5+の時には IE5独自拡張機能を記した ie5.cssも適用。

CGIを使ってないのでUserAgent値が得られない時も大丈夫。またサーバのないローカル環境でも処理可能。

JavaScriptを使ってないのでスクリプトが無効か否かの判断が不要。

となります。

IE3.0にも対応したい場合は

スタイルシート指定時の問題にありますが IE3.0はstyleタグやlinkタグが複数ある場合には通常、最後に置かれたlinkタグのみ解釈します。そのため上の例では


		common.cssの指定はspecial.cssの後に置く
		special.cssにもcommon.cssの内容を書いておく
		最低限必要なものはタグ内でインライン指定する

など工夫します。

【きぃなび情報】
・ホーム
・使い方＆試す
・キー割当て表示

HTML,CSSバグ＆回避法リスト目次【数字キーでアクセス】

例：「2.1節」は「2｣キーを2回連打して移動。「Q or P」で戻る。
「Ctrl-矢印」でフォーカス移動。


1.	目次


2.	HTML関連


3.	Netcape4.xとスタイルシート


4.	スタイルシートその他の話題


5.	ブラウザ別にスタイルシートを指定
5.1		Netscape4.xに対する対策の必要性
5.2		@importを使ってNS4を除外
5.3		複数mediaを指定してNS4を除外
5.4		JavaScriptでブラウザ判別
5.5		サーバ側スクリプトでブラウザ判別
5.6		条件分岐コメントでIE5+を判別
5.7		まとめ


6.	その他・総合

■キー割当表示 [Shift-H]	─ KeyNavi：キーボードを活用してホームページを快適に─
ホーム [0] HTML,CSSバグ＆回避法リスト:1.目次 [1] 5. ブラウザ別にスタイルシートを指定	・サイトマップ [Shift-S]

ホーム [0] HTML,CSSバグ＆回避法リスト:1.目次 [1] 5. ブラウザ別にスタイルシートを指定	・サイトマップ [Shift-S]
■キー割当表示 [Shift-H]	─ KeyNavi Project 2003 ─


		NS4にはcommon.cssのみ、それ以外にはspecial.cssも適用。
		IE5+の時には IE5独自拡張機能を記した ie5.cssも適用。
		CGIを使ってないのでUserAgent値が得られない時も大丈夫。またサーバのないローカル環境でも処理可能。
		JavaScriptを使ってないのでスクリプトが無効か否かの判断が不要。