fc2ブログ

Harukiya Archives

2006/06/22

category / javascript

というわけで、スタイルシートの組み込みを可視化するスクリプトを書きました。<link>要素を調べ、優先・代替シートのみを抽出しセレクトボックスに書き出します。項目を選択することでスタイルシートを切り替えられ、cookie経由で選択項目(現適用シート)を保持します。

> altstyle.jsサンプル

使い方

これも祭りの一環で、sss.jsを参考に作成しました。が、ソースコードの量は1/4ほどです。WEB標準に準拠して書かれたHTMLであるなら、基底の設定部やエラー処理のかなりの部分は削れます → 軽さに優るアクセシビリティなし。

no-style用にはwreathe_white.cssがオススメです(CMでした)。


writeback

  1. - : このコメントは管理人のみ閲覧できます-23日00時
  2. CHOU-FLEUR : これまた興味深いモノを!
    またアレしてコレしてみたいと思います(謎)。-23日12時
  3. マス : いらっしゃいませ、お二人。
    秘密の方
    すばやいチェキありがとうございます。思い当たりそうな箇所
    ・コントロール部をbody要素に挿入からbody要素に追加へ
    ・window.onload を上書きしない
    に修正してみました。
    FireFoxのJavaScriptコンソールなどでエラーが出るようでしたら、その情報も添えていただけるとありがたいです。

    CHOU-FLEURさん
    いきあたりばったりでやっているようで、ちゃんとつながっています。いたずらしてみました。(全部ひらがなだ)
    http://sug.blog2.fc2.com/?style2=cfdn_10&index
    マイCSSのしょぼさが際立っている^^-23日20時
  4. - : このコメントは管理人のみ閲覧できます-24日23時
  5. マス : 秘密さん
    記述ミスでしたー。ご報告ありがとうございます。-25日20時
  6. 有希之武 : とても重宝なスクリプト開発ありがとうです(^ー^)
    早速、使用させて頂きましたので記事にさせて頂きました。
    (コンテンツ増やしと言う訳じゃ・・・・(^^;)-28日17時
  7. マス : ご利用ありがとうございます、有希之武さん。
    取り説不十分でお手間をかけました。まだテスト段階(というか完成品がないブログ・・・)なので、そのうち・・・なんとか形にしたいと・・・

    スタイルシートの探査は、前項に書いたとおり
    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時
  8. 有希之武 : どうも追加説明ありがとうです(^ー^)
    やっぱり影でこそこそやってはダメだと言う反省がヒシヒシとw
    こちらの記事の方も追加修正致しました。
    で!このスクリプト適用した参考テンプレートを記事にしたいと、勝手な事を考えて居ますが良いですかね~?(いいとも~と言ってほしいですがw)
    まぁ~こんなすばらしいスクリプトを世に広めたいと思う訳で
    決して、コンテンツ増やしでは無いのです・・・_・)ソォーッ-29日10時
  9. マス : いらっしゃいませ。
    共有テンプレに組み込んでいただける、という意味でしたらむしろ歓迎です。

    できることなら、
    ・ ダウンロードしたファイルを組み込んでください。
    (ここのファイルは修正されるかもしれませんので。その際はエントリに修正箇所を追記するようにします)
    ・ 不具合の報告がありましたら、このページに誘導していただくか、連絡をもらえると助かります。

    wreatheにもCSS簡易切り替えのスクリプトを組んでいますが、複数のCSSをリンクするのにうまい手が見つけられずにいます(2鯖の憂鬱)。その辺も研究していただけるとありがたいです。-29日21時
  10. 有希之武 : 了承ありがとうです。
    一応、設定は組み込んで居るものを使い、スクリプトをこちらでダウンロードするように考えてます。
    スクリプトやスタイルシートなどは全てダウンロードして自鯖にアップして使う方法でテンプレートを公開しようと考えてますので。
    共有に関しては、少し考えている部分があり、スタイルシートだけではなく、テンプレート自体も考え直してから登録となる予定で居ますが・・・(出来るんだろうか?(^^;)-29日23時
  11. マス : >一応、設定は組み込んで居るものを使い、スクリプトをこちらでダウンロードするように考えてます。
    前コメの優先・代替シートの組み込みをルール通りにやれば、FirefoxやOperaではブラウザの持つ機能だけでスタイルシートを切り替えられます。Fxなら
    表示 → スタイルシート とメニューを進むとタイトル群が出ます。

    つまり、このスクリプトはモダンブラウザではあまり必要のないものなんです(IE6にはちょっと有効かも)。IE7パニック(爆)が起きた時に、スタイルを切る、あるいは対7用CSSを緊急適用するなんて使い方が良いかも(7に切り替え/ユーザスタイルOFF機能がついていなければの話ですが)。

    >スクリプトやスタイルシートなどは全てダウンロードして自鯖にアップして使う方法
    本当はこれがベストなんですよね。問題点は、背景画像などパーツが多くなると取りこぼしが起きたり、組み込みが複雑化して模様替えの敷居が高くなることでしょうか。それらがサクサクできる人は自分でテンプレを作るでしょうし。
    ただ、ひとつのHTMLに複数のCSSを書くことは、色々な意味で勉強になると思います。

    結論:やはり、スクリプトは主にならず、補助の役割をまっとうするのがよさげ^^-30日19時
  12. - : このコメントは管理者の承認待ちです-11日11時
  13. - : このコメントは管理者の承認待ちです-07日01時
  14. - : このコメントは管理者の承認待ちです-11日01時
  15. - : このコメントは管理者の承認待ちです-12日04時
  16. - : このコメントは管理者の承認待ちです-12日07時
  17. - : このコメントは管理者の承認待ちです-17日16時
  18.  


< 代替 | ”εに誓って”を読んだ > | 表紙へ戻る | 探す | 案内