読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

styleswitcher.jsで思い切りハマル。。。

web JavaScript

ずっと、サイトの調子がよくなかった。なぜかっていうと、A List Apartから引っ張ってきたstyleswitcher.jsでZoom Layoutに切り替えられるようにしていたのだが、なぜかたまにZoom Layoutのデザインがcookie関係なく、いきなり出てしまう問題。通常なら、alternate stylesheetで指定しているはずなので、そんなことはないはずだった。


で、だ。問題をいろいろと探っていると、まず第1に、Zoom LayoutのCSSに!importantを指定しまくっており、そちらがたまに優先されて表示されてしまうらしかった(このへんって、ブラウザのバグなのかがよく分からない)正直、Zoom LayoutのCSSの書いているときは結構適当で、「まあ、表示されればそれでいいから、適当にimportantを指定しまえ!」って思っていたのが、やはり不味かったらしい。このへんは、今度stopdesignでも参考にしてちょっと書き直そうと反省。


もう1つはまってしまっていたのが、なぜかlocalのサーバでプレビューするときに、IEやopera、NNなんかはちゃんとデフォルトのCSSが適用されるのに、なぜかFirefoxのみがZoom LayoutのCSSを適用してしまう点。なぜ、Firefoxが、、、という疑問はずっと頭に纏わり付いていた。IE6のみが適用されているのなら、「あー、またか、どんなバグだよ」と突っ込みつつ、バグリストと睨めっこするだけで済むのだが、Firefoxのバグ。ちょっとあまり聞いたことがなかったので、Mozila組のドキュメントなどを見てみるものの、どうも同じような問題にぶつかった人はいないみたい。それから延々と3時間ほど、いろんなところを書き換えてみるものの、うまく作動しない。


しかし、偶然CSSのファイルの名前を指定しているtitleを今までは「contrast」にしていたのを、「a」と直してみた。すると、何の問題もなかったように、FirefoxでもキレイにデフォルトのCSSが表示された!「なぜだ!」と思いつつ、titleをもう一度「contrast」に変えてみると、またZoom Layoutに戻る。試しに、titleを「zoom」に書き換えてみると、またデフォルトが適用。訳わからん。


これ自体がサーバの設定の問題なのか、実はほかのCSSの適用箇所で既に「contrast」と指定していたのか、それともstyleswitcher.jsのどこかと衝突しているのかは一向に分からないが(ユーザースタイルシートとかも関係するのかな?)、とりあえずstyleswitcher.jsを使うときは「contrast」というtitleはマズイらしいことが分かった。うーん、なんでだろう。