javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。
最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて(スライドとかで)、javascript無効にすると まったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。(CSS無効でもXHTMLだからそれなりに見れる)
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。
Javascriptが無効・有効でCSSを2つ用意して、デフォルト(初期にlinkしておくもの)を無効の時のCSSにする。
<link>タグにidを設定して、javascriptでhref部分を変更すれば有効・無効でCSSの切り替えが出来る。
<link href="noscript.css" rel="stylesheet" type="text/css" id="css" />
document.getElementById ('css').href = 'style.css';
mootoolsで書くとこうなる。
$('css').setProperty('href', 'style.css');
domreadyでもok。
Javascriptで書き換える分だけ、一瞬noscript時のCSSが見えてしまうわけだが、これで一応両対応に出来るはず…。