JavaScriptの
ブラウザ分岐テクニックを使えば、各ブラウザに必要な
スタイルシートを詳細に分別して読み込むことが可能になります。
スタイルシートはページをデザインする時に便利なものですが、
その実装は各ブラウザに強く依存しています。
したがって、ブラウザ毎の実装の違いをスタイルシートで吸収することを
可能にするこのテクニックはスタイルシートの強力な援軍と言えるものです。
1.スタイルシートの問題点
2.CSS非対応ブラウザを無視(HTMLのコメントアウト)
3.CSS非対応ブラウザを無視(JavaScriptによる分岐)
4.ブラウザ/OS別に違うCSSファイルを読み込む
5.ブラウザ別CSS読込用関数
1.スタイルシートの問題点
スタイルシート悩みの種は、ブラウザによるサポート状況の違いです。
せっかく、スタイルシートによってデザインの統一を
はかろうとしたのが、逆にブラウザの実装が異なるためにバラバラのデザインに仕上がってしまう
ということも少なくありません。たとえば、centerタグを使えばどのブラウザでもセンターそろえ
にしてくれるのですが、このタグはHTML4.01では非推奨とされてスタイルシートが推奨されています。ところが、
CSSですべてのブラウザでcenterタグのようなセンターそろえをするのは至難のわざなのです。
特に問題なのはN4,IE3以降の中途半端に
スタイルシートをサポートしたブラウザです。
ひどい時には、CSSの記述のせいでフリーズしてしまうことさえあります。
CSS自身はブラウザを選ぶ能力を持っていませんから、
CSSで書いたばかりに、意図しないデザインに仕上がったり、
閲覧者に迷惑をかけたりということが起きてしまうのです。
これが嫌でCSSを使わないという人も少なくないと思います。
次に、それらのCSSをめぐる問題点をクリアしていく方法を紹介します。
2.CSS非対応ブラウザを無視(HTMLのコメントアウト)
styleタグを理解できないブラウザはCSSの中身をズラズラとむき出しで表示してしまいます。これは、
JavaSctiptタグ
の場合にもある話ですがCSSコードをHTMLのコメントにしてしまうことで回避することができます。ただし、CSSはJavaScriptと異なり
コメントの閉じ部分の処理が少し違います。JavaScriptではHTMLコメント終了の「-->」をこのままJavaScriptコード内に
書くとエラーになるので「//」などを頭に付けてJavaScriptのコメントとしますが、CSSでは不要です。
CSSの場合
<style type="text/css">
<!--
CSSを解釈できるブラウザ用CSSコード
--> ←ここに「//」などが付かないのがJavaScriptと違います
</style>
JavaScriptの場合
<JavaSctipt type="text/javascript">
<!--
JavaScriptを解釈できるブラウザ用JavaScriptコード
//-->
</JavaSctipt>
3.CSS非対応ブラウザを無視(JavaScriptによる分岐)
CSSのstyleタグやlinkタグをJavaScriptのdocument.write()文で書き出すことができます。これと
ブラウザチェックを組み合わせるとブラウザによって
読み込むCSSを切り替えることが可能になります。いろいろな方法がありますが、まず、
CSS非対応ブラウザを無視する方法を考えてみましょう。
<script>
<!--
//CSS文字列を変数にセット
var cssData = "<style>"
+ "#test { font-size : 50px } "
+ "</style>"
//分岐処理 version4以上なら書き出す
if( parseInt(navigator.appVersion.charAt(0)) >= 4 )
document.write(cssData)
//-->
</script>
<div id = "test"> version4 以上なら50px </div>
Sampleバージョン4以上のブラウザにCSS適用
しかし、実は、これはあまり安全とはいえません。それは、N4,IE4などのブラウザのCSS対応が不完全なため
多くの不具合を引き起こす可能性があるからです。そこで、比較的安全と思われる
W3C-DOM対応のブラウザだけに絞る方法が下記の方法です。
<script>
<!--
//CSS文字列を変数にセット
var cssData = "<style>"
+ "#test { font-size : 50px } "
+ "</style>"
//分岐処理 W3C-DOM対応ブラウザなら書き出す
if( document.getElementById )
document.write(cssData)
//-->
</script>
<div id = "test"> W3C-DOM対応なら50px </div>
Sample比較的安全なブラウザにCSS適用
4.ブラウザ/OS別に違うCSSファイルを読み込む
ブラウザ/OS別に異なるCSSファイルを読み込むサンプルです。
<script language="JavaScript">
<!--
// 各OSとブラウザ別に違うCSSファイルを読み込む
// OS
var Win = navigator.userAgent.indexOf("Win") != -1 ? true : false
var Mac = navigator.userAgent.indexOf("Mac") != -1 ? true : false
var X11 = navigator.userAgent.indexOf("X11") != -1 ? true : false
if (document.getElementById) {
if (Win) cssurl = "./winw3c.css" // Win W3C対応ブラウザ用CSS
else if(Mac) cssurl = "./macw3c.css" // Mac W3C対応ブラウザ用CSS
else if(X11) cssurl = "./x11w3c.css" // X11 W3C対応ブラウザ用CSS
} else if (document.all) {
if (Win) cssurl = "./winie.css" // Win IE用CSS
else if(Mac) cssurl = "./macie.css" // Mac IE用CSS
} else if (document.layers) {
if (Win) cssurl = "./winn4.css" // Win N4用CSS
else if(Mac) cssurl = "./macn4.css" // Mac N4用CSS
else if(X11) cssurl = "./x11n4.css" // X11 N4用CSS
} else {
cssurl ="./etc.css" // その他用CSS
}
//CSS読み込みタグlinkの書き出し
document.write('<link rel="stylesheet" ')
document.write(' type="text/css" ')
document.write(' href="'+cssurl+'"')
document.write('>')
//-->
</script>
<div id="winw3c">./winw3c.css</div>
<div id="macw3c">./macw3c.css</div>
<div id="x11w3c">./x11w3c.css</div>
<div id="winie">./winie.css</div>
<div id="macie">./macie.css</div>
<div id="winn4">./winn4.css</div>
<div id="macn4">./macn4.css</div>
<div id="x11n4">./x11n4.css</div>
<div id="etc">./etc.css</div>
Sampleブラウザ別CSS読み込み
5.ブラウザ別CSS読込用関数
ブラウザ別CSSを読み込むための関数です。Operaはopr.css、WinIEはwinie.css、
MacIEはmacie.css、MozillaやN6,N7などはmoz.cssというCSSファイルに指定しておいて
それぞれ別々に読み込むためのものです。すべてに共通するスタイルはall.cssという名前で
まとめておくことも可能です。必要なら関数内をカスタマイズして
使用してみてください。
/*////////// ブラウザ別CSS読込用関数 2002.11.26 UseFree
========================================================
ブラウザ別にCSSを読込します。
引数 path にはCSSファイルへのパスを記入してください。
使用例 loadCSS('../tools/')
メモ 引数省略すると'./'がデフォルトでセットされます。
Operaはopr.css、WinIEはwinie.css、
MacIEはmacie.css、MozillaやN6,N7などはmoz.css
というCSSファイルに指定しておいてそれぞれ別々に読み
込むためのものです。
すべてに共通するスタイルはall.cssという名前で
まとめておくことも可能です。
Support http://game.gr.jp/js/
=======================================================*/
function loadCSS(path){
var ua = navigator.userAgent.toLowerCase()
//--今回CSS処理するブラウザリスト
if(document.layers)return //n4は崩れるので使わない
var winie = ua.indexOf('msie')!=-1 &&
ua.indexOf('win')!=-1 //win-e3〜
var macie = ua.indexOf('msie')!=-1 &&
ua.indexOf('mac')!=-1 //mac-e3〜
var moz = ua.indexOf('gecko')!=-1 //moz1〜
var opr = ua.indexOf('opera')!=-1 //opera
//その他ブラウザ判定用メモ
//var opr6 = ua.search('opera(\ |\/)6') != -1 //opera6
//var opr7 = ua.search('opera(\ |\/)7') != -1 //opera7
//var s1 = ua.indexOf("safari")!=-1 //safari
if(!window.loadCSS.arguments[0]) path='./'
var cssfile = path
//--ブラウザごとのCSSファイル
// OperaはuserAgentにmsieなどを
// 偽れるので先に分岐して飛ばす
if (opr) cssfile += 'opr.css'
else if (winie) cssfile += 'winie.css'
else if (macie) cssfile += 'macie.css'
else if (moz) cssfile += 'moz.css'
else cssfile = ''
var linktag = ''
if(cssfile !=''){
//各パス内のall.css
linktag +='<link rel="stylesheet" '
+ ' type="text/css" '
+ ' href="'
+ path
+ 'all.css'
+ '">'
//ブラウザごとのcss
linktag +='<link rel="stylesheet" '
+ ' type="text/css" '
+ ' href="'
+ cssfile
+ '">'
}
document.write(linktag)
}
SampleCSSをブラウザごとに分岐適用