ブラウザのデフォルト言語に応じて動的にCSS(スタイルシート)を切り替える方法

カスケーディングスタイルート(以下CSS)では、条件によってスタイルを切り替えるといった、スクリプトのような条件分岐を行うことができません。*1
このため、ページに適用するスタイルを動的に切り替える方法の１つとして、JavaScriptでCSSファイルを切り替える方法があります。

ここでは、ブラウザのデフォルト言語によって、CSSを切り替えてみます。

ブラウザのデフォルト言語を取得する

ブラウザのデフォルト言語を取得するには、InternetExolore(IE)の場合、navigator.browserLanguageプロパティを参照します。この値によって、読み込ませるCSSを切り替えます。

今回はJavascriptだけでブラウザの言語を取得する方法を調べてみました。
　ググっていると、ブラウザ依存ですが取得する方法が見つかったので、各ブラウザで検証した所、navigator.browserLanguage、 navigator.language、navigator.userLanguageのいずれかで取得できることが分りました。
　ただ、この値はブラウザのデフォルト言語環境のなので、HTTP_ACCEPT_LANGUAGEとは違う値が返ってきます。たとえば、日本語OSに英語版のFirefoxを入れている場合は、”en”が返ります。
masuidrive on rails - ブラウザの言語をJavascriptから調べる。

CSSを動的に切り替える

はじめに、以下のようなHTMLを用意します。このページには、h1タグがあるだけです。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="notja.css" type="text/css" id="cssStyle">
  <script type="text/javascript" src="switch.js" charset="UTF-8"></script>
</head>
<body onload="alert('ページがロードされました。')">
  <h1>スタイルシート切り替え - Stylesheet Switch</h1>
</body>
</html>

読み込ませる２つのCSS

デフォルトでは、日本語以外の言語用のスタイルを定義したnotja.cssを読み込みます。そして、日本語のブラウザからアクセスされた場合には、JavaScriptで日本語用スタイルを定義したja.cssを読み込ませます。
notja.css

@charset 'utf-8';
h1 { }

ja.css

@charset 'utf-8';
h1 {
  font-family:"ＭＳ Ｐゴシック","MS PGothic";
}

CSSを切り替えるJavaScript(switch.js)

switch.jsでは、navigator.browserLanguageの値が"ja"なら、ja.cssを読み込ませるようにします。具体的には、HTML内のlinkタグを取得し、hrefプロパティを変更することで、読み込ませるCSSファイルを切り替えることができます。
ここで、attachEventメソッドを利用している理由は、後述します。

window.attachEvent("onload", 
  function() {
    if (navigator.browserLanguage == "ja") {
      document.getElementById("cssStyle").href = "ja.css";
    }
  }
);

これで、日本語のブラウザからこのページにアクセスした場合には、ja.cssを読み込み、日本語以外のブラウザからアクセスした場合には、notja.cssを読み込むことができます。

参考までに

attachEventメソッドを使う理由

上記のサンプルでは、switch.jsでattachEventメソッドを使用しています。これには、HTMLページ定義されたonloadイベントが関係しています。
試しにswitch.jsを以下のようなスクリプトにした場合、CSSの切り替えは動作しません。HTML側に定義されたonloadイベントで、スタイルシート切り替えのイベント処理が上書きされてしまうためです。

window.onload = function() {
  if (navigator.browserLanguage == "ja") {
    document.getElementById("cssStyle").href = "ja.css";
  }
}

ここで、attachEventメソッドの出番です。attachEventメソッドでは、イベントを上書きするのではなく、イベントを追加します。これにより、CSSの切り替えイベントとHTMLページのonloadイベントの両方が動作するようになります。*2

参考にしたサイト

*1:CSSハックを用いればできないことはないですが、ここでは割愛します。

*2:どちらのonloadイベントが先に動作するかは、よく分かりませんでした。

小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。