mk-mode BLOG

このブログは自作の自宅サーバに構築した Debian GNU/Linux で運用しています。
PC・サーバ構築等の話題を中心に公開しております。(クローンサイト: GitHub Pages

ブログ開設日2009-01-05
サーバ連続稼働時間
Reading...
Page View 合計
Reading...
今日
Reading...
昨日
Reading...

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

[ webサイト ] [ HTML, JavaScript ]

こんばんは。

今日は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を返します。
checkClonecloneNode()を使用して要素を複製する場合、要素のチェック状態も含めコピーする場合はtrueを返します。
(WebKitの場合はチェック状態がコピーされないため、falseを返します。)
checkOnチェックボックスの値が指定されていない場合、デフォルト値が"on"である場合はtrueを返します。
(WebKitの場合、デフォルト値は"“です。)
cssFloatCSSのFloatの値をcssFloatプロパティで取得できる場合にはtrueを返します。
(IEの一部のバージョンでは、styleFloatで取得するため、falseを返す場合があります。)
deleteExpando拡張した要素の属性を、delete演算子で削除できる場合はtrueを返します。
(IEではfalseを返します。)
hrefNormalizedgetAttribute()メソッドを使用して href 属性値を取得する場合、href 属性値をそのまま返す場合はtrueを返します。
(IEの一部のバージョンでは、hrefの値を完全修飾するため、falseを返す場合があります。)
htmlSerializeinnerHTMLを使用して値を取得する場合、シリアライズされた値を返す場合はtrueを返します。
(IEではfalseを返します。)
leadingWhitespaceinnerHTMLを使用して値を取得する場合、先頭の空白をそのまま返す場合はtrueを返します。
(IE6-8ではfalseを返します。)
noCloneEvent要素がコピーされる場合に、要素が持つイベントハンドラをコピーしない場合はtrueを返します。
(IEではfalseを返します。)
objectAllgetElementsByTagName(‘*’)メソッドを呼び出した場合に、全ての子孫要素を返す場合はtrueを返します。
(IE7/8ではfalseを返します。)
opacityopacityプロパティで透明度を指定できる場合はtrueを返します。
(IEでは、alpha filtersで指定するためfalseを返します。)
scriptEvalappendChild()やcreateTextNode()といった標準的なメソッドを使用して要素を追加した場合に、インラインスクリプトを自動的に評価して実行する場合はtrueを返します。
(IEではfalseを返します。IEでは .text を使用すれば、インラインスクリプトを自動的に評価して実行します。)
style要素のstyle属性を、getAttribute(‘style’)で取得できる場合はtrueを返します。
(IEではfalseを返します。IEでは .cssText を使用して、要素のstyle属性を取得します。)
tbody
要素を許可する場合はtrueを返します。
(IEではfalseを返します。IEでは 要素が存在しない
要素には、自動的に要素を追加します。)

ブラウザ別戻り値一覧

プロパティ名Chrome
5+
Safari
5+
Firefox
3.6+
Opera
10.5+
IE6IE7IE8IE9
boxModel true true truetruetrue true true true
checkClone true true truetruetrue true true true
checkOn falsefalsetruetruetrue true true true
cssFloat true true truetruefalsefalsefalsetrue
deleteExpando true true truetruefalsefalsefalsetrue
hrefNormalized true true truetruefalsefalsetrue true
htmlSerialize true true truetruefalsefalsefalsetrue
leadingWhitespacetrue true truetruefalsefalsefalsetrue
noCloneEvent true true truetruefalsefalsefalsefalse
objectAll true true truetruetrue falsefalsetrue
opacity true true truetruefalsefalsefalsetrue
scriptEval true true truetruefalsefalsefalsetrue
style true true truetruefalsefalsetrue true
tbody true true truetruefalsefalsetrue true

参考にしたサイト

簡単な実装例

前提条件

  • JavaScriptライブラリ「jQuery」導入済み。
  • Firefox, Oeperaの場合とそれ以外の場合で異なるCSSを読み込む。 (ブラウザの判定はもっと詳細に可能です)

1.CSSファイルの準備

必要なCSSファイルを用意する。 今回はFirefox, Oepera用[style_1.css]とそれ以外用[style_2.css]の2つのCSSファイルを用意します。

2.HTMLソース修正

HTMLソースのCSSファイル読み込み部分を修正する。 JavaScrpitを使用してブラウザ別に異なるCSSファイルを読み込む。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>

      < 途中省略 >

    <script type="text/javascript"><!–
    fName = "";
    // Firefox, Opera の場合
    if(jQuery.support.checkOn && jQuery.support.noCloneEvent){
      fName = "style_1";
    }
    // 上記以外の場合
    else{
      fName = "style_2";
    }
    document.write('<%= stylesheet_link_tag "' + fName + '" %>');
    // –></script>

      < 途中省略 >

</head>

上記の

1
document.write('<%= stylesheet_link_tag "' + fName + '" %>');

はRuby on Rails のタグを使用していますが、通常のHTMLなら次のようになります。

1
document.write("<link rel='stylesheet' href='"+fName+"' type='text/css'>");


これで、HTML読み込み時使用しているブラウザを判定し、対応したCSSファイルを読み込むようになります。

以上。

Comments