というわけで、スタイルシートの組み込みを可視化するスクリプトを書きました。<link>
要素を調べ、優先・代替シートのみを抽出しセレクトボックスに書き出します。項目を選択することでスタイルシートを切り替えられ、cookie経由で選択項目(現適用シート)を保持します。
> altstyle.js(サンプル)
<head>
要素内の<link>
要素群より後に
<script src="<%url>file/altstyle.js" type="text/javascript"></script>
<p id="style_select">
<lable>style: <select>
<option value="固定・優先シートのタイトル">固定・優先シートのタイトル</option>
――スタイルシートの数だけ繰り返し――
</select></lable></p>
<body>
要素直下、すべての要素の後に書き出されます。p#style_select
以下のスタイルを設定することで見映えを調整できますこれも祭りの一環で、sss.jsを参考に作成しました。が、ソースコードの量は1/4ほどです。WEB標準に準拠して書かれたHTMLであるなら、基底の設定部やエラー処理のかなりの部分は削れます → 軽さに優るアクセシビリティなし。
no-style用にはwreathe_white.cssがオススメです(CMでした)。
< 代替 | ”εに誓って”を読んだ > | 表紙へ戻る |
またアレしてコレしてみたいと思います(謎)。-23日12時
秘密の方
すばやいチェキありがとうございます。思い当たりそうな箇所
・コントロール部をbody要素に挿入からbody要素に追加へ
・window.onload を上書きしない
に修正してみました。
FireFoxのJavaScriptコンソールなどでエラーが出るようでしたら、その情報も添えていただけるとありがたいです。
CHOU-FLEURさん
いきあたりばったりでやっているようで、ちゃんとつながっています。いたずらしてみました。(全部ひらがなだ)
→ http://sug.blog2.fc2.com/?style2=cfdn_10&index
マイCSSのしょぼさが際立っている^^-23日20時
記述ミスでしたー。ご報告ありがとうございます。-25日20時
早速、使用させて頂きましたので記事にさせて頂きました。
(コンテンツ増やしと言う訳じゃ・・・・(^^;)-28日17時
取り説不十分でお手間をかけました。まだテスト段階(というか完成品がないブログ・・・)なので、そのうち・・・なんとか形にしたいと・・・
スタイルシートの探査は、前項に書いたとおり
1) リンクタイプ(rel)が stylesheet でタイトル属性(title)が未設定ならば、固定シートになり、必ず読み込まれる
2) リンクタイプが stylesheet でタイトルが設定されていれば、優先シートになる
3) リンクタイプが alternate stylesheet なら代替シートになる。タイトルは必須
ルールを基準にしています。
優先―初期に適用されるシート・スクリプトオフのユーザに見せたいシートにはrel="stylesheet"
代替―切り替え可能なシートにはrel="alternate stylesheet"
を、それぞれ指定してください。
すべてのスタイルシートで共通しているセレクタ/プロパティは
<link rel="stylesheet" type="text/css" href="<%url>/file/all.css" />
のように(例えば新規に)all.css内に集め、title無しでリンクすると、選択したシートにプラスされます。
これは軽量化に役立つと思われます。が、実質no-styleにはできなくなります。
詳しくはうちのソースを覗いてください^^。
お気づきの点などありましたら、お知らせください。-28日21時
やっぱり影でこそこそやってはダメだと言う反省がヒシヒシとw
こちらの記事の方も追加修正致しました。
で!このスクリプト適用した参考テンプレートを記事にしたいと、勝手な事を考えて居ますが良いですかね~?(いいとも~と言ってほしいですがw)
まぁ~こんなすばらしいスクリプトを世に広めたいと思う訳で
決して、コンテンツ増やしでは無いのです・・・_・)ソォーッ-29日10時
共有テンプレに組み込んでいただける、という意味でしたらむしろ歓迎です。
できることなら、
・ ダウンロードしたファイルを組み込んでください。
(ここのファイルは修正されるかもしれませんので。その際はエントリに修正箇所を追記するようにします)
・ 不具合の報告がありましたら、このページに誘導していただくか、連絡をもらえると助かります。
wreatheにもCSS簡易切り替えのスクリプトを組んでいますが、複数のCSSをリンクするのにうまい手が見つけられずにいます(2鯖の憂鬱)。その辺も研究していただけるとありがたいです。-29日21時
一応、設定は組み込んで居るものを使い、スクリプトをこちらでダウンロードするように考えてます。
スクリプトやスタイルシートなどは全てダウンロードして自鯖にアップして使う方法でテンプレートを公開しようと考えてますので。
共有に関しては、少し考えている部分があり、スタイルシートだけではなく、テンプレート自体も考え直してから登録となる予定で居ますが・・・(出来るんだろうか?(^^;)-29日23時
前コメの優先・代替シートの組み込みをルール通りにやれば、FirefoxやOperaではブラウザの持つ機能だけでスタイルシートを切り替えられます。Fxなら
表示 → スタイルシート とメニューを進むとタイトル群が出ます。
つまり、このスクリプトはモダンブラウザではあまり必要のないものなんです(IE6にはちょっと有効かも)。IE7パニック(爆)が起きた時に、スタイルを切る、あるいは対7用CSSを緊急適用するなんて使い方が良いかも(7に切り替え/ユーザスタイルOFF機能がついていなければの話ですが)。
>スクリプトやスタイルシートなどは全てダウンロードして自鯖にアップして使う方法
本当はこれがベストなんですよね。問題点は、背景画像などパーツが多くなると取りこぼしが起きたり、組み込みが複雑化して模様替えの敷居が高くなることでしょうか。それらがサクサクできる人は自分でテンプレを作るでしょうし。
ただ、ひとつのHTMLに複数のCSSを書くことは、色々な意味で勉強になると思います。
結論:やはり、スクリプトは主にならず、補助の役割をまっとうするのがよさげ^^-30日19時