ブラウザの種類ごとにスタイルシートを変えるライブラリ.
Internet Explorer (MSIE)
Opera (Opera)
Netscape Navigator (Netscape)
Firefox (Firefox)
Gecko (Netscape Firefox)
Not Gecko (MSIE Opera)
上の各行は,該当するものだけが赤くなっているはずです.
基本的には,style
タグやスタイルシートを表す link
タグに付与した
class
属性に,変数userAgent
の値が含まれているもの
(と class
属性を持たないもの)だけが有効になっています.
このサンプルでは,userAgent
の値を設定するために,user_agent.js も併用しています.
css_ext.js は,window.onload
(body
タグの onload
属性と同じもの)
を使用して実行されます.それ以外の関数を onload
イベントで実行させたい場合,
onload_hook.js を併用して,その関数を配列 window.onloadHook
に追加してください.
詳細はソースを参照してください.
以下のように使います.
… <!-- 変数userAgent に,ブラウザの種類に応じた値を設定する --> <script type="text/javascript" src="user_agent.js"></script> <!-- ブラウザの種類ごとにスタイルシートを変えるライブラリ --> <script type="text/javascript" src="css_ext.js"></script> <style type="text/css"> <!-- /* ここに全ブラウザに共通のスタイルシートを記述する */ --> </style> <style type="text/css" class="MSIE"> <!-- /* ここには Internet Explorer 用のスタイルシートを記述する */ --> </style> <style type="text/css" class="Netscape"> <!-- /* ここには Netscape(7.x 以前)用のスタイルシートを記述する */ --> </style> <style type="text/css" class="Firefox"> <!-- /* ここには Firefox 用のスタイルシートを記述する */ --> </style> <style type="text/css" class="Opera"> <!-- /* ここには Opera 用のスタイルシートを記述する */ --> </style> …
なお,<scripte type="text/css">
だけではなく,
<link rel="stylesheet" type="text/css" href="…">
でも,class
属性を指定することで,適用するブラウザを指定できます.
また,class
属性のブラウザ名は,空白で区切って複数個並べることもできます.