Fri, 05 Jun 2009 (平成21年) [長年日記]
_ 縦書きテーマいじり
IE の条件分岐というものを使うと縦書きテーマの改良ができるのではと思って作業中。
IE 6 は早くなくなってほしいと心の底から言いたい。たかがこの程度のサイトですらそう思うのだから、仕事で CSS を書いている人は大変だろうなぁ。
追記: まず注意事項。ページのソースが何も変わってないのにリロードすると IE 6 がページの描画を変えるという謎の挙動を見せるので何が本来の動作がわからず、たぶんおかしなことをやってる可能性大なのでこのエントリは参考にしないでください。
結局、wiki_style.rb と tdiary_style.rb を少々いじることで条件分岐をさせることができた。こんな変な行ができちゃった。これは wiki_style.rb のほう。
r = %Q{<!--[if !lte IE 6]><![IGNORE[--><![IGNORE[]]><div class="section"><!--<![endif]--><!--[if (IE 5.5 | IE 6)]><div class="section" style='width: 600px'><![endif]-->\n}
解説を読んで理解したように思えることからすると、これで IE 6 以前の IE だと <div class="section"> は無視してくれて、IE 5.5 と IE 6 は後半の <div class="section" style='width: 600px'> を見ることになるらしい。対応しているバージョンの IE 以外にとっては単なるコメントなので <div class="section"> だけしか意味を持たないのでこれまで通りに解釈される、と。
この条件分岐に反応するのは IE 5.0 以降ということなので、実はこの書き方だと IE 5.0 系は間違いなく変なことになるはずだけど、<!--[if !lte IE 6]> を <!--[if !(IE 5.5 | IE 6)]> と書いたら IE 8 がおかしな挙動を見せたのでしかたない。アクセス解析結果を見たら IE 5.0 系なんて 0.2% くらいしかいないので無視。
以下のページがとても役に立った。