A List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsで紹介されているスクリプトは、ユーザー側でスタイルシートを切り替えることのできるサイトを構築する際に便利なスクリプトです、
アクセシビリティを考慮したサイトを構築する時は、ぜひとも導入したいところ。
詳しい設置方法などはstyleswitcher.js-スタイルシート切り替えjavascript – WEBデザイン BLOGにお任せするとして、実際設置してみて不具合が発生。ページを移動すると、選択していたはずのCSSが無効になる。
このスクリプトはクッキーを利用して、ページを移動しても選択されたCSSを記憶する設定になっている。が、それが動かない。ページを移動するとデフォルトCSSに戻ってしまう。
そのため、解消するために小一時間考える羽目に。(￣▽￣;
結論としては、ネット上で検索するとすぐ出てきた。
r-Studioにて、解消方法が明示されている。
スクリプト内＜head＞〜＜/head＞内のlink要素にrel属性以外のものがあると、うまく動かないらしい。
なるほど〜・・・と言うわけで、自分の所のコードを調べてみる。link要素内のrel以外・・。入っていない。でもちゃんと動いていないし。むむむ。
よくわからないので、コードとにらめっこしているとフっと浮かんだのだ。
私のHTMLの書き方は順番としてJavascriptがCSSの上に来るのだが（これは色々理由があって、そういう癖がついてしまっている）。もしかしてこれが原因？？
そんなわけで、順番をCSS→Javascriptに変えてみた。
案の定、動きました。私の所の場合、JavascriptのリンクがCSSの上にあったため、正常に動いていなかったのでした。ははは。
というわけで、
styleswitcher.jsを利用したCSS切り替えの場合、
1.＜link rev=”made” href=”mailto: ●●●@●●●.com” /＞のような、link要素にrel属性以外のものがある場合の記述はCSS記述の下にする。
2.外部Javascriptを外部から呼び出している場合、CSSの後ろに記述する。
これでちゃんと動きます。