ブラウザごとに異なる CSS を読み込ませる方法

スタイルシートの振る舞いが、IE や Firefox で異なる場合の対処方法として、JavaScript によるローダーを使うことがあります。

忘れないようにメモ。

1. stylesheetloader.js ファイルを作成する (本文最後参照)


2. html などの呼び出し元ページにて以下のスクリプトタグを追加

<script src="js/stylesheetloader.js"></script>

stylesheetloader.js ファイル

function loadStylesheet(){
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('gecko') != -1)
    cssfile = 'styleff.css';
  else if (ua.indexOf("msie 7.") != -1)
    cssfile = 'styleie7.css';
  else
    cssfile = 'style.css';	
  link = '<link rel="stylesheet" href="' +

         cssfile +

         '" type="text/css">';

  document.write(link);
}

loadStylesheet();