ばむばんか惰隠洞

2009-04-08 [長年日記]

■ [HTML] 順番、結構大事 (23:16)

あっちこっちのwebサイトでちょくちょく見かける、「文字サイズ大中小」みたいなボタン。時々つけてくれって言われるんだけど、今回はページを移動しても文字サイズの変更を継承して欲しいってリクエストも付きで。今まではちょー安直に、"document.body.style.fontSize ='120%'"とかでごまかしてたんだけど、ページ遷移に対応となるとさすがにそうも行かないのでいろいろ調査調査。ありがちなのはprototype.jsを利用して、って事になるんだろうけど、たかだか文字サイズの変更ごときに130Kbもあるスクリプトを入れるのもなー、と（富豪になれないワタシ）。

いろいろ見繕って、 A List Apartってところの記事、Alternative Style: Working With Alternate Style Sheetsなるアーティクルで紹介されている、styleswitcher.js なるスクリプトが使いやすそうかな、ってんで導入してみた（かなりクラシック側にシフトした話題だけどね）。必要な数だけ代替スタイルシートを用意して、必要に応じて切り替えるタイプ。情報をCookieに記録するのでページ移動しても大丈夫。

ってふれこみなんだが、これが妙に上手いこと動いてくれない。サイト内のどれかひとつのファイルのみで適応する分には問題なく動作し、他のページから戻ってきてもしっかり変更を憶えていてくれるんだけど、これを複数のファイルで指定してやると、とたんに動作がおかしくなる（Cookieを読み損なう感じ）。

これはいったいどうしたことかと思っていろいろぐぐってみるに、どうもhead区間に書くlink要素やscript要素の順番が、動作に結構影響を与えるもののようで、特にFirefoxでは、<link rel=…>の表記の前に<link rev=…>が書かれてるとそれだけで動作不良が起きちゃうんだとか。

そういうものかと結構試行錯誤した結果、おおむね大丈夫であろうと思われる並び順は、<link href=（おおむねCSS）>、<link rel=（スクリプトから呼ばれる代替CSS）>、script指定、の順である事が分ったのは晩飯前。いやー、苦労したわ。

理屈としてはどういう事になるんだろうね。JavaScriptが代替スタイルシートのタイトルを切り替える以上、スクリプトが読み込まれる前に、代替スタイルのタイトルが読み込まれてないといろいろマズいって事なんだろうか。この辺の妙に判じ物的なノウハウが案外幅を効かせてるってあたり、これもまた理詰めからくるものなのか意外とファジー（死語）なところがあるって事なのか、どっちなんでありましょう。

とりあえず動いてるから、オレは結果オーライなんだけどさ。