css_ext.js

ブラウザの種類ごとにスタイルシートを変えるライブラリ.

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属性のブラウザ名は,空白で区切って複数個並べることもできます.

各ファイルへのリンク

css_ext.js user_agent.js onload_hook.js