universal motor gerat

2009 10 ≪ 123456789101112131415161718192021222324252627282930≫ 2009 12

Ads by Google

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

トラックバック(-) | コメント(-)

クロスブラウザはある程度考えられるけどWeb標準化ってどこかに割り切りが必要な気が

IE6 でおかしな事になるので調整したといったところ、どんな調整したの？って感じの質問が来たので、私の考え方と調整した内容をまとめてみます。

各ブラウザに対する考え…

Firefox 1.x.x / 2.x.x / 他Gecko系 : 標準環境表示確認の基準とする
IE 7 : なるべく対応する
IE 6 : やりたくないけどなるべく対応する
IE 5 / 5.5 : 全く考えない / クレーム部分は個別対応を検討
Netscape 4.7 : 切捨て
Opera 9.x : なるべく対応する
Opera 8.x : 全く考えない / クレーム部分は個別対応を検討
Opera 6.x / 7.x : 切捨て
Safari 3.xx : Internationalization が完了し、かつWindows向け正式版が出てから考える。
Safari 2.xx : (環境が用意できないので)全く考えない / クレーム部分は個別対応を検討
Safari 1.xx : 切捨て

基本的には Firefox が手放せない人間なので、これを標準に考えます。IE に関してはデザイン云々は気にしちゃいけないのかなと思ってますが、シェアが大きいので問題になるから仕方ない。ひところの Opera の挙動には不満があったのですが Opera 9 はいいんじゃないかと思います。全く眼中に無かった Safari は 3.0 の Windows 版公開βが話題沸騰中で、これは非常にテリブル。

実際にはクレームを出してくれる人は稀で、見え方がおかしかったら見ないという人が九分九厘でしょう。そういう意味で作り手側は常に意識しなきゃ取りこぼしちゃうという面がある。クロスブラウザって一種のバッドノウハウなんで、純粋にモノづくりしたい人には辛いものがあるでしょう。

まずWeb標準化ありきかと思うのですが、非標準であるIEの閲覧環境が非常に多いため、クロスブラウザという戦術を取らざるを得ません。つまり、作り込みの初期ではWeb標準化を意識し、仕上げ段階からクロスブラウザ化するという事ですね。

クロスブラウザチェックに関して

Firefox 環境でのチェックには、標準添付のDOM インスペクタは用いずに、Web Developer 日本語版を利用しています。各要素のチェックが非常に簡単に行えます。

IE 環境については IE コンポーネントのタブブラウザ Sleipnir に Hawkeye というプラグインを組み合わせてチェックします。Sleipnir である必然性は全く無いのですが、 Hawkeye があれば css のデバッグが簡単であるからという理由です。Portable Sleipnir(アーカイブ版)を利用すれば、USBメモリなどに入れて持ち歩けるというのもメリットです。

Opera については、特にチェックツールがあるわけではないですが、OperaUSB を用いることで、バージョン混在を実現するとともに、USBメモリに入れて持ち運べるようにしてます。

Windows上で簡単に複数のバージョンのブラウザを用意できる場合は比較的チェックが容易なのですが、IEに関してはマトモな手法ではバージョン混在環境を構築することができません。MS自身がオススメしている手法は、VirtualPCによって別途OSごと確認環境を作れという牛刀割鶏な手段なんで……

実際に採用した手法

今回は、非常に単純な手法を取りました。

IE = 非標準, IE以外 = 標準というロジックとし、IE 以外で非標準の html/css を解釈する環境は切捨て。
XML 宣言と DOCTYPE 宣言は IE6 の仕様に合わせる。(XML宣言しない)
IE でおかしな挙動をする部分は IE でのみ解釈される [if IE] を用いた分岐を行う。
javascript による useragent 判定は行わない。(javascript 切ってる人が多いから)

MSDN:About Conditional Comments より引用

Comment Type	Syntax or Possible Value
standard HTML comment	<!-- Comment content -->
downlevel-hidden	<!--[if expression]> HTML <![endif]-->
downlevel-revealed	<![if expression]> HTML <![endif]>

IE とそれ以外という単純な2択をさせたい場合には、[if IE] を用いるのが最も効果的です。downlevel-hidden の構文なら、完全に HTML のコメントの中に埋没してしまいますものね。
とはいえ、今回は、IE6 のみ特定の JavaScript をロードしないという条件でしたので、downlevel-revealed で、<![if ! IE6]> なんてやっつけ仕事にしました。

<![if ! IE 6]>

<script type="text/javascript" src="<%server_url>u/universalmotorgerat/file/mootools.js"></script>
<script type="text/javascript" src="<%server_url>u/universalmotorgerat/file/slimbox.js"></script>
<link rel="stylesheet" href="<%server_url>u/universalmotorgerat/file/slimbox2.css" type="text/css" />

<![endif]>

正直、html/css の各種バリデーションをちゃんと通るようにするのは面倒なので、いい加減な妥協の産物デスが……　