スタイルシートを切り替える JavaScript に「styleswitcher.js」があります。styleswitcher.js は、おもに文字の大きさを変えたりするのによく使われて便利。JavaScript で link 要素の代替スタイルシート (Alternate stylesheet) を切り替える形で実装している。
またスタイルシートは、フォントサイズ、レイアウト、カラーなど複数のスタイルシートを適用することを仕様で定めている。その場合は、link要素のグループ化 (Preferred style sheet) でできる仕様だが、ブラウザ毎に実装がまちまちのようだ (詳細)。ほか、フォントサイズ×レイアウト×カラーの組み合わせを実現したいが、グループ化では固定されてしまう。別々に設定できない。やろうとすると、それぞれの組み合わせの分だけのスタイルシートを用意するなど管理面でも面倒。
ということで、あらたな設計で「CssSwitcher」をつくってみた。
- Persistent Style Sheet だけを使用
- 必要な外部スタイルシートファイルだけその都度ダウンロード (Alternate stylesheetは
適用されなくても、すべてのファイルをダウンロードする)
- 必要な外部スタイルシートファイルだけその都度ダウンロード (Alternate stylesheetは
- データ構造にテキストベースのデータフォーマット JSON をベースに
- 複数のスタイルシートを適用、いくつでも
- スタイルシートの組み合わせを柔軟に
- セッションにクッキー採用
- それも一つだけ発行
以上を実装。
デモサンプル
いろいろテストしたものもあわせて
- Alternate stylesheet
- Preferred style sheet
- styleswitcher.js
- styleswitcher.js * Preferred style sheet
- CssSwitcher
- CssSwitcher * Mix
ウェブサイトのデザイン全体に適用のほか、一覧表示から画像表示に変更とコンテンツの一部に適用できたり、タグクラウド表記を変えたりと部分適用にも使える。
フォントサイズ
レイアウト
一覧表示から画像表示に
リスト表示からタグクラウドに
つかいかた
1. スタイルシートの用意
デフォルトとなるスタイルシートファイルと切り替え用のスタイルシートを用意します。サーバにまとめてアップロード。
デフォルト layout.css、font.css、color.css、切り替え用として layout_fix.css、font_small.css、font_big.css、color_bule.css、color_red.css な感で。
2. スタイルシートファイルを header 要素に追加
追加の際、id属性を設定すること。id名は好みで。
<link rel="stylesheet" type="text/css" href="layout.css" id="layout" />
<link rel="stylesheet" type="text/css" href="font.css" id="font" />
<link rel="stylesheet" type="text/css" href="color.css" id="color" />3. スクリプトのダウンロード、初期設定
cssswitcher.js をダウンロードして初期設定
// Settings
CssSwitcher.cssPath = "http://domain/path/to/css/";
CssSwitcher.idList = [ 'layout', 'font', 'color' ]; // List up id attribute
// Cookie Settings
CssSwitcher.domain = "";
CssSwitcher.path = "/";
CssSwitcher.expires = 7; // days or Wdy, DD-Mon-YYYY HH:MM:SS GMT (ex. Fri, 01-Dec-2010 20:40:03 GMT)
CssSwitcher.secure = 0; // 0 or 1基本設定
- 「CssSwitcher.cssPath」スタイルシートファイルのディレクトリパス
- 「CssSwitcher.idList」スタイルシートのIDリスト、link要素に追加したid名
Cookieの設定を必要に応じて
- 「CssSwitcher.domain」Webサーバー名
- 「CssSwitcher.path」パス名
- 「CssSwitcher.expires」有効期限 日数 または Wdy, DD-Mon-YYYY HH:MM:SS GMT形式
- 「CssSwitcher.secure」セキュリティ
保存してサーバにスクリプトをアップロード
4. HTML の header 要素に JavaScript ファイルを追加
スタイルシートファイルより下部に追加
<script type="text/javascript" src="cssswitcher.js"></script>5. HTML にリンク設置
リンクタグで CssSwitcher.change() に JSON 形式で変数設定
id : link要素に追加したID
theme : 拡張子.cssを除いたスタイルシート名
<a onclick="CssSwitcher.change([{'id':'font','theme':'font_small'}]);">小</a>
<a onclick="CssSwitcher.change([{'id':'font','theme':'default'}]);">標準</a>
<a onclick="CssSwitcher.change([{'id':'font','theme':'font_big'}]);">中</a>複数のスタイルシートを設定する場合
<a onclick="CssSwitcher.change([{'id':'font','theme':'font_big'},{'id':'color','theme':'color_red'}]);">赤</a>
<a onclick="CssSwitcher.change([{'id':'font','theme':'font_small'},{'id':'color','theme':'color_blue'},{'id':'layout','theme':'layout_fix'}]);">固定レイアウト</a>技術的な課題:
- ブラウザのボタン操作でのページ遷移とブラウザキャッシュ
ブラウザの戻るボタンでの前のページに戻る際に、先のページで変更したスタイルシートが反映されない場合がある。
Download:
Changes:
- 0.0.2 2011.06.27 Fix browser cache.
- 0.0.1 2010.08.13 First Release.
Licenses:
Dual licensed under the MIT and GPL licenses.
jQuery Plugin「CssSwitcher」もどうぞ!!