W3Cみたいなスタイルシートの切り替え

html5

いいよね、http://www.w3.org/このデザイン。

Views: desktop mobile print

選択したスタイルシートが適用されて、cookieにも保存されるのでページ遷移でも引き継ぐ。
　
こんなことを実現する奴をさがす。
　

A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets

これのstyleswitcher.jsがよさそう。
　
使い方は使える CSS テクニック CSS で文字サイズを変更するボタンを設置する（バシャログ。）が分かりやすかった。
　
ソースを読んでみると・・・なんだか良くない。今時な感じがしない。
（今のところ自分が書いている文章の内容が無いな・・・）

SWITCH STYLESHEETS WITH JQUERY（KELVINLUCK.COM）

jQueryでCSSを切り替えるjavascript「Switch stylesheets with jQuery」ここを読むとかんたんっぽい。

ためす

コードを書いて試す

index.html（UTF-8、CR+LF）
/*head*/
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="../common/css/style_desktop.css" title="style_desktop" type="text/css" media="screen" />
<link rel="stylesheet" href="../common/css/style_mobile.css" title="style_mobile" type="text/css" media="screen" />
<link rel="stylesheet" href="../common/css/style_print.css" title="style_print" type="text/css" media="screen" />


<!--style switch-->
<script type="text/javascript" src="../common/js/styleswitch.js"></script>
<script>
/*head　ここまで*/
　
/*body*/
<header>
<h1>表題<ruby>これはなんですか？<rt>みたまんまです</rt></ruby></h1>
<p>header documents</p>
<div id="css_view">
<ul>
<li class="label">Views:</li>
<li><a href="#" rel="style_desktop" class="styleswitch" title="Desktop Style">desktop</a></li>
<li><a href="#" rel="style_mobile" class="styleswitch" title="Mobile Style">mobile</a></li>
<li><a href="#" rel="style_print" class="styleswitch" title="Mobile Print">print</a></li>
</ul>
</div>
&nbsp;
</header>

最後に を入れないと正しく表示されないところが行けてない。
　
あとはstyle.cssに共通のスタイル、各種にレイアウト系やデザインのスタイルを記述する。