JavaScript - ブラウザ別にCSSを読み込む!
Updated:
※この記事は13年以上前に投稿されたもので、情報が古い可能性があります。
今日はHTMLソース内でCSSファイルを読み込む際にブラウザによって読み込むCSSファイルを変える方法についてです。
通常、HTMLレベルではIF文を使用してInternetExplorerかそれ以外しかブラウザは判定できません。 しかし、JavaScriptのjQueryライブラリを使用すれば、その他のブラウザも判定可能です。
以前はjQuery.browserでブラウザ判定が可能でしたが、jQuery1.3以降は非推奨となっています。 jQuery.supportの各プロパティがブラウザによって戻り値が異なるのでその特性を活用して判定することになります。
jQuery.supportについてPermalink
jQuery.support - プロパティ一覧Permalink
(戻り値:全て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 |
(IEではfalseを返します。IEでは 要素が存在しない
プロパティ名 | 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 |
Comments