JavaScript - ブラウザ別にCSSを読み込む！

今日はHTMLソース内でCSSファイルを読み込む際にブラウザによって読み込むCSSファイルを変える方法についてです。

通常、HTMLレベルではIF文を使用してInternetExplorerかそれ以外しかブラウザは判定できません。 しかし、JavaScriptのjQueryライブラリを使用すれば、その他のブラウザも判定可能です。

以前はjQuery.browserでブラウザ判定が可能でしたが、jQuery1.3以降は非推奨となっています。 jQuery.supportの各プロパティがブラウザによって戻り値が異なるのでその特性を活用して判定することになります。

jQuery.supportについて

jQuery.support - プロパティ一覧

（戻り値：全てBoolean型）

要素が存在しない

プロパティ	説明
boxModel	ブラウザが、W3C CSS Box Model に基づいてページをレンダリングしている場合はtrueを返します。 （IE6もしくは7のQuirksモードでは、falseを返します。） このプロパティは、DOM要素の読み込みが終了し、準備が完了するまではnullを返します。
checkClone	cloneNode()を使用して要素を複製する場合、要素のチェック状態も含めコピーする場合はtrueを返します。 （WebKitの場合はチェック状態がコピーされないため、falseを返します。）
checkOn	チェックボックスの値が指定されていない場合、デフォルト値が"on"である場合はtrueを返します。 （WebKitの場合、デフォルト値は""です。）
cssFloat	CSSのFloatの値をcssFloatプロパティで取得できる場合にはtrueを返します。 （IEの一部のバージョンでは、styleFloatで取得するため、falseを返す場合があります。）
deleteExpando	拡張した要素の属性を、delete演算子で削除できる場合はtrueを返します。 （IEではfalseを返します。）
hrefNormalized	getAttribute()メソッドを使用して href 属性値を取得する場合、href 属性値をそのまま返す場合はtrueを返します。 （IEの一部のバージョンでは、hrefの値を完全修飾するため、falseを返す場合があります。）
htmlSerialize	innerHTMLを使用して値を取得する場合、シリアライズされた値を返す場合はtrueを返します。 （IEではfalseを返します。）
leadingWhitespace	innerHTMLを使用して値を取得する場合、先頭の空白をそのまま返す場合はtrueを返します。 （IE6-8ではfalseを返します。）
noCloneEvent	要素がコピーされる場合に、要素が持つイベントハンドラをコピーしない場合はtrueを返します。 （IEではfalseを返します。）
objectAll	getElementsByTagName('*')メソッドを呼び出した場合に、全ての子孫要素を返す場合はtrueを返します。 （IE7/8ではfalseを返します。）
opacity	opacityプロパティで透明度を指定できる場合はtrueを返します。 （IEでは、alpha filtersで指定するためfalseを返します。）
scriptEval	appendChild()やcreateTextNode()といった標準的なメソッドを使用して要素を追加した場合に、インラインスクリプトを自動的に評価して実行する場合はtrueを返します。 （IEではfalseを返します。IEでは .text を使用すれば、インラインスクリプトを自動的に評価して実行します。）
style	要素のstyle属性を、getAttribute('style')で取得できる場合はtrueを返します。 （IEではfalseを返します。IEでは .cssText を使用して、要素のstyle属性を取得します。）
tbody

要素を許可する場合はtrueを返します。
（IEではfalseを返します。IEでは 要素が存在しない要素には、自動的に要素を追加します。）</td> </tr> </table> #### ブラウザ別戻り値一覧

プロパティ名	Chrome 5+	Safari 5+	Firefox 3.6+	Opera 10.5+	IE6	IE7	IE8	IE9
boxModel	true	true	true	true	true	true	true	true
checkClone	true	true	true	true	true	true	true	true
checkOn	false	false	true	true	true	true	true	true
cssFloat	true	true	true	true	false	false	false	true
deleteExpando	true	true	true	true	false	false	false	true
hrefNormalized	true	true	true	true	false	false	true	true
htmlSerialize	true	true	true	true	false	false	false	true
leadingWhitespace	true	true	true	true	false	false	false	true
noCloneEvent	true	true	true	true	false	false	false	false
objectAll	true	true	true	true	true	false	false	true
opacity	true	true	true	true	false	false	false	true
scriptEval	true	true	true	true	false	false	false	true
style	true	true	true	true	false	false	true	true
tbody	true	true	true	true	false	false	true	true

#### 参考にしたサイト - [jQuery.support - jQuery API 1.4.4 日本語リファレンス - StackTrace](http://stacktrace.jp/jquery/api/utilities/jquery.support.html "jQuery.support - jQuery API 1.4.4 日本語リファレンス - StackTrace") - [jQuery.supportでのブラウザ判別 - W3G Blog Tools/Tips](http://w3g.jp/blog/tools/jquery_browser_sniffing "jQuery.supportでのブラウザ判別 - W3G Blog Tools/Tips") ### 簡単な実装例 #### 前提条件 - JavaScriptライブラリ「jQuery」導入済み。 - Firefox, Oeperaの場合とそれ以外の場合で異なるCSSを読み込む。 （ブラウザの判定はもっと詳細に可能です） #### １．CSSファイルの準備 必要なCSSファイルを用意する。 今回はFirefox, Oepera用[style_1.css]とそれ以外用[style_2.css]の２つのCSSファイルを用意します。 #### ２．HTMLソース修正 HTMLソースのCSSファイル読み込み部分を修正する。 JavaScrpitを使用してブラウザ別に異なるCSSファイルを読み込む。 ``` html ＜　途中省略　＞ ＜　途中省略　＞ ``` 上記の ``` html document.write('<%= stylesheet_link_tag "' + fName + '" %>'); ``` はRuby on Rails のタグを使用していますが、通常のHTMLなら次のようになります。 ``` html document.write(""); ``` --- これで、HTML読み込み時使用しているブラウザを判定し、対応したCSSファイルを読み込むようになります。 以上。