Stylesheet Selector for IE 5+ and Gecko

IE 及び Gecko に対応するスタイルシートセレクタ

v 0.8.0 (c) Hiro Konda. 2005/07/27

このScriptは、いわゆるフリー(使用自由、改造自由かつ自己責任)な JavaScript なのでこれを使用しても作者が対価を求める事は、有りません。→ (無料)

何故、Stylesheet Selector なのか?

昨今、代替スタイルシートは、製作者側がウェブサイトを読み易くしたり、新たなデザインサービスを視聴者に提供できるものとして、 スタイルシートを用いるウェブサイトに普及しつつあります。

Internet Explorer以外の主要なブラウザである、Mozilla Firefox、Opera 7以降、Netcape 7以降等では、 メニューから簡単に代替スタイルシート(alternate stylesheet)を切り替える機能が備わっています。 しかし、世界シェア80%後半を占めるであろう Internet Explorer 5.0 - 6.0には、JavaScriptを介する方法からしか(製作者側)代替スタイルシートを切り替える操作はできません。

今年(2005年)の秋頃までにInternet Explorer 7.0がリリースされる予定ですが、 標準で代替スタイルシート(alternate stylesheet)をメニュー切替え可能な機能の追加は多分なされないでしょう。

機能概要

ダウンロード

使用の際に 文字コードが適当で無い場合は、適宜必要な文字コードに変換してご利用ください。

Windows メモ帳では、そのまま開いても読みにくいかもしれないので LF改行に対応するテキストエディタで編集してください。

Stylesheet Selector for IE 5+ and Gecko Standards EDITION (v 0.8.0)

二カ国語(日本語/英語)及び、Firefox(Gecko)等の "application/xhtml+xml"モードに対応します。Netscape 4対応のサービススクリプトも含まれます。

Stylesheet Selector for IE 5+ and Gecko Standards NC EDITION (v 0.8.0)

二カ国語(日本語/英語)及び、Firefox(Gecko)等の "application/xhtml+xml"モードに対応します。軽量化のため、注釈(コメント)はほぼ有りません。

Stylesheet Selector for IE 5+ and Gecko Standards Extra EDITION (v 0.8.0)

二カ国語(日本語/英語)及び、Firefox(Gecko)、Opera 7.5xの "application/xhtml+xml"モードに対応します。Opera 7.5x対応の特別強化版です。

使い方の基本的な流れ

  1. <head></head>部の中に<link>要素の "stylesheet"及び、"alternate stylesheet"を挿入します。
    コード例 :
    <link rel="stylesheet" title="Basic" charset="Shift_JIS" href="./basic.css" type="text/css" />
    <link rel="alternate stylesheet" title="Black on White" charset="Shift_JIS" media="all" href="./basic-bw.css" type="text/css" />
    
  2. <head></head>部の中に<script>要素を挿入してScript(スタイルシートセレクタ)を組みこみます。
    コード例 :
    <script type="text/javascript" charset="Shift_JIS" src="./css-select-std.js"></script>
    
  3. ページにScriptが組みこまれば、ページの右上にスタイルシートセレクタ用の選択フォームが表示されているはずです。
  4. 選択リストは、ブラウザ認識されたスタイルシートの title属性値又は、不明ならば番号で列挙されます。
  5. 選択リストから選んで、[変更]ボタンを押すとスタイルシート変更及び、無効化します。
  6. [ C ]ボタンを押すと、Cookieに保存されたスタイルシートのタイトルを古い有効期間指定で上書き消去します。
  7. [ - ]ボタンを押すと、選択フォームの大きさを最小化します。
  8. [ ? ]ボタンを押すと、ヘルプダイアログ(簡易説明)が出ます。
  9. 最小化表示の際に [ + ] ボタンを押すと、このフォームへ表示復帰させます。

使用時の変数設定

使用時の設定における初期値は、このページで使用中の状態である "Standards EDITION" を前提にしているものです。 その他のバージョン(NC, Simple)では、存在しない変数も有ります。

var cssFormIeOnly = false;
型:真偽値 (true or false)
IE 5.0以降のみ動作させるかどうか?
true にするとIE 5.0以降のみ動作になります。
var cssCookieEnabled = true;
型:真偽値 (true or false)
Cookieを使用してCSSタイトル選択状態を記憶させるかどうか?
false にすると Cookieを使用せず、状態記憶機能が無効になります。
var cssCookieTitleKey = "CSS_SELECT";
型:文字値
CookieでCSSタイトルを保存する際のキーワードです。
同じドメイン上にある複数のサイト上でScriptを動作させる場合、各個のキーワードを変更すると便利でしょう。
var cssCookieDisplayKey = "CSS_SELECT_DISP";
型:文字値
CookieでCSSセレクタの表示状態を保存する際のキーワードです。
同じドメイン上にある複数のサイト上でScriptを動作させる場合、各個のキーワードを変更すると便利でしょう。
var cssCookieExpiresDays = 15;
型:数値
クッキー有効期限日です。15にすると 当日から数えて15日間有効です。
var cssCookiePath = (w.location.protocol == "file:") ? '' : '/~konda/';
型:文字値
Cookie有効パスです。
このページでは、ドメイン(www.minc.ne.jp)の次の、ユーザーパス部分'/~konda/'を指定しています。 そうする事で'/~konda/'以降のパス(ディレクトリ)で Cookieの読み書きをしています。
正常なCookie対応の為、必ず自分の使用する環境に合致する値を設定してください。
var cssDisabledTitle = "Disabled CSS";
型:文字値
CSSセレクタで CSS無効化を選択した場合の CSSタイトルです。
この(文字列)値が、Cookieに保存されます。
選択リストのラベル(OPTION)文字は、makeCssSelectForm()関数内のフォーム用二カ国語リソースに指定してあります。
var cssFormInsId = "";
型:文字値
スタイル選択フォーム挿入用IDで、初期値の""は、空で指定無し状態です。
指定無しの状態の場合は、BODY要素内の最上位(firstChild)に挿入されます。
var cssFormStyle = "(略)";
型:文字値
スタイル選択フォーム用インラインスタイルです。
var cssAlertSuppress = false;
型:真偽値 (true or false)
警告メッセージダイアログ(alert)を抑圧させるかどうか?
true にすると警告メッセージダイアログが出なくなります。
var cssNoTitleEnabled = true;
型:真偽値 (true or false)
タイトルが不明な場合は、各ページ共通スタイルとして有効か?
var cssScriptVersion = "(略)";
型:文字値
このスクリプトのバージョン情報です。各メッセージダイアログ(alert,confirm)の先頭に使用されています。
単にJavaScriptによるウインドウであることを明示する目的に使用されている物なので、不要だと思うなら空にしてもかまいません。

よく有りそうな質問応答

CSSに同じタイトル(title)を付けて複数スタイル要素(link+style)を同時に適用させたいのに、何故一番先頭タイトルのスタイルのみが有効になるのですか?
仕様です。明確にCSSそれぞれを区別をする固有のtitle属性を付る事が期待される動作の前提です。
abbr要素の中に、選択フォームを挿入しようとしても動きません。IE 6で確認したらエラーです。
挿入先は、ブロック要素かつ、空要素でないもの(= 閉じタグが有る要素)を使用してください。 あと、挿入先要素は、IE が対応している要素である事を強く推奨します。
今まで使っていた JavaScriptとこのページで配布されているJavaScriptを併用したら動かなかったりエラーが出るようになりました。
このScriptは、window.onloadの状態を使用して、ウェブページ(一般にはホームページ)が読みこみが終わった時点でCSS選択フォームを作っています。 window.onloadの状態の有るScriptが競合したり、変数名や関数が被ったら不具合が起こる場合も有ります。
非商用で善意な個人サイト管理者様の電子メールや、掲示板でのご依頼に限り、私(Hiro Konda)の有限サポートの範囲内で競合の起きるScriptをカスタマイズする事もやぶさかではありません。 その他の立場に該当するサイト管理者様については、電子メールや、掲示板にて質問をお願いします。なお、今後のサポートに活用する目的でやり取りを公開させていただく場合も有ります。
外国の友人から英語での確認メッセージの意味がおかしいと指摘されました。
英語による確認メッセージの訳は、当作者(Hiro Konda)が適当に当てていますから本格的に国際化対応されたい方は、適切な訳に修正してください。 Scriptコード内の "(jp)"使用近辺に日本語と英語メッセージの分岐処理が有ります。 正しい訳をこのScriptに提供してくださるならば大歓迎です。是非、電子メールや掲示板で提供してください。

既知の問題

更新履歴

Ver 0.8.0 [05/07/27]
  • [対応強化] Opera 7 以降(text/htmlモード)及び、内部的には Safariに対応しました。
  • [対応強化] Opera 7.5x(application/xhtml+xmlモード)に対応する、Standards Extra EDITIONを公開しました。
  • [UI 変更] フォームの最小化及び、最大化ボタンを [ - ] 及び、[ + ] へ変更しました。
  • [設定追加] title属性が無指定(空)な場合、各共通スタイルを有効化できるようにしました。
  • [設定追加] 各ダイアログに、バージョン情報が表示できるようにしました。
  • [機能強化] attachEvent (Win IE, Opera 7+) 及び、addEventListener (Gecko ,Safari / DOM 2)を用いて、関数をwindow.onload 同様にイベント追加する様に仕様変更しました。Mac IE 5では、従来通り window.onload を上書きします。
  • [仕様変更] 起動関数を新設して、フォーム追加関数を起動関数としないよう仕様変更しました。
Ver 0.7.7 [05/07/17]
 application/xhtml+xmlモード時に CSS選択タイトル記憶を無効化するとフォームボタン表示が text/htmlモードと異なる不具合を修正
フォーム作成関数内のインラインスタイル指定変数を "Gecko application/xhtml+xml"モード時に使用していない不具合を修正
namespaceURI廻りを簡略化
Ver 0.7.6 [05/07/15]
初期 onload 設定で Win IE 5.5が動作しない不具合を修正
Ver 0.7.5 [05/07/14]
初公開

使用条件

  1. 作者(Hiro Konda)及び、開発協力者は、当JavaScriptが使用者の求める目的に合致する事を保証しません。又、動作に対する損害が発生したとしても、一切の責任は免責される事とします。
  2. 作者(Hiro Konda)及び、開発協力者が、このJavaScript(今後の改良されたバージョンを含む)を使用及び配布する事を阻まない限り、改造版の使用、再配布に伴う、JavaScriptコード内の著作者(Hiro Konda)欄の省略は自由です。