Oliverの日記: メインメニュー新レイアウト 3
水曜日だったか木曜日だったか、おもいたって/.の左側に配置されているメインメニューのレイアウトを本家風にした。本家では半年ぐらい前にこのレイアウトになったのだが、いままで追従していなかった。正直、HTML 3の時代から何年もかけてきて築き上げられ、不思議とほとんどのブラウザで同じに見えるが、中をのぞくと魔窟なSlashdotのHTMLをイヂるのが嫌だったのだ。
メニューを作り直すと決め、最初は本家ままにtableタグを多用した構成で作ったのだが、個人で作ってるサイトでいろいろ実験してtableなしで高度なレイアウトを実現したこともあり、今後イヂるところは極力tableを避け、divタグとCSSで実現することにした。tableを使わずとも何が可能なのかはW3CのトップページやRetooling Slashdot with Web Standardsの完成見本を見ると明らかなので、今後書くものにtableを使う言い訳はなにもない。
CSSでいくとなると問題になるのがブラウザを選ぶ、ということだ。CSS2未対応はまだしもCSS1に中途半端にしか対応していないブラウザでもそれなりに表示されなくてはならない。特に一部づつ近代化していくtableやfontタグにalignといったHTML3時代のマークアップとの混在環境では。そこで、/.-Jにアクセスしてくるブラウザの統計をチェックしてみた。12月のここまでのUser-Agentを調べてみると、トップからMSIE 6.0 56%、Mozilla/5.0 23%、MSIE 5.5 4%、MSIE 5.0 3%、Opera/7.2 2%、Mozilla/3.01 (compatible;) 1.5%、Mozilla/4.7 0.8%といったところだ。この下には多種多用なUser-Agentが続いている。この数字はページビュー数ベースなので、各ブラウザを使うユーザの分布ではないし、User-Agentを詐称するブラウザもあるが、古いブラウザはほとんど残っていない、という傾向は示していると考えて構わないだろう。つまり、CSS主体で問題ないということだ。
/.の表示を最低でも確認しなければいけないレンダリングエンジンは Gecko (Mozilla, Netscape 7など)にKHTML (Konqueror, Safariなど)、OperaとMSIE 5/6およびMSIE/Macということになる。また、/.的にはテキストブラウザもないがしろにできないので、lynxとw3mもチェック対象に追加。CSS対応が中途半端だった例としてNetscape 4.7も加えることに。Mozilla, Konqueror, Netscape 4.7にlynx, w3mは自分でチェックできるが、MSIE, MSIE/MacとOperaにSafariはIRCでユーザにお願いしてテストサイトをチェックしてもらった。ちょっとした差はそれぞれあれど、ちょっとした気くばりでブラウザ固有のコードや絶対配置を書かなくても99.9%は問題にならないレベルで同じにレンダリングされる。Web Standards、素晴らしい。
もし、このままdiv+css化を進めるとなると、最大の被害者はtableは理解するがCSS、特にfloatを理解しないテキストブラウザ(w3m)になる。今回のメニューの変更はまだ既存のtableのセル内なので問題ないが、枠となるtableすらなくなると問題がでてくる。たとえば、/.のトップにあるロゴと最近のトピックのアイコン。これを今のtableからdiv+css化するとなると、ロゴにfloat: leftをつけて実現するのだが、CSS未対応だと横に並ばず、上下に並ぶことになる。中身が読めない、といったことはないので本当の問題ではないのだが、気にすべきか否か。
NN4.7で不具合です… :'( (スコア:1)
NN4.8(en)を使ってテストしてみました。
そしたら、
http://srad.jp/articles/03/12/14/1253253.shtml?topic=99
のようにshtml宛にリンクされている場合、NN4.xは
http://srad.jp/articles/03/12/14/slashdot.css
を探し続けていつまでたっても本文を表示してくれません。
手抜きの解決策は、スタイルシートの指定を
href="/slashdot.css"
とすることでしょうかねぇ…?
-- garmy
Re:NN4.7で不具合です… :'( (スコア:1)
新メニューはいろいろテストしんたんですけど、cssファイルへの追い出しはそんな間違えられないと思って.... 記事の.shtmlでディレクトリ階層が深くなるのを見落としてました。
他のブラウザだとファイルが見つかず、中身が適用されないだけなのが、NN 4.xだとファイルが見付からない事への耐性がないみたいですね。
href="/slashdot.css" に変えたので、shtmlがincludeしているヘッダが再作成されるタイミング(数時間に一回)で直るはずです。
チェックありがとうございます。助かります。
キャリア(転職)は、 (スコア:1)
わーわー(謎)