a stray sheep

お仕事周りの雑記帳

トップ > ブラウザによって異なるCSSを読み込む

ブラウザによって異なるCSSを読み込む

やりたいこと

CSSを動的に読み込む。条件には、ブラウザ判別を利用する。

サンプルコード

<html>
<head>
  <link rel="stylesheet" type="text/css" href="./css/style.css" id="cs">
  <script>
    var ua = window.navigator.userAgent.toLowerCase();
  
    if (ua.indexOf('edg')) {
    // Edge (Chronium版)の場合(=最新版はこれ)
      document.getElementById("cs").href="./css/style_edg.css"
    }else if (ua.indexOf('edge')) {
    // Edge (Chronium版以外)の場合
      document.getElementById("cs").href="./css/style_edge.css"

    }else if (ua.indexOf('chrome')) {
    // Google Chromeの場合
      document.getElementById("cs").href="./css/style_chrome.css"

    }
  </script>
</head>
<body>
<h1>CSS動的読み込みのテスト</h1>
</body>
</html>

メモ

  • JavaScriptでのブラウザ判別には、navigatorオブジェクトのuserAgentプロパティを使う。
  • toLowerCase()は、文字列をすべて小文字に変換する。
  • indexOf()は、引数に指定した文字列が含まれていない場合は"-1"を返す。
  • getElementByIdで指定したタグに対して、hrefの値を変更する。