« 2004年06月 | メイン | 2004年08月 »
2004年07月31日
銀行・クレジットカードを変えた
これまでのU○J銀行をメインの銀行にしていたが、新しく別の銀行に。ついでにその銀行系列のクレジットカードも作った。
Win IE5-6を簡単にはじく
htmlのhead内でConditional Comments for Internet Explorerを利用すれば、IE5-6だけ別のCSSを読み込ませることが可能。
<!--[if lt IE 6]>
<style type="text/css">
@import url("winIe5.css");
</style>
<![endif]-->
上記の場合、IE6以下、つまりIE5xにはwinIe5.cssが適用されることとなる。
なお、このConditional Comments for Internet Explorerは、WinIE4.x以下には実装されていない。
if内のコメントの違いによるバージョンの振り分けは以下のとおり。
<!--[if gte IE 5]> IE 5.0 - 6.x
<!--[if IE 5]> IE 5.0
<!--[if IE 5.5000]> IE 5.5
<!--[if IE 6]> IE 6.0
<!--[if gte IE 5.5000]> IE 5.5 - 6.x
<!--[if lt IE 6]>IE 5.0 - 5.5
この方法の弱点
NN4x、IE4ｘ以下のブラウザにCSSを読み込ませないようにする
バージョン4世代（IE4x、NN4x）のブラウザは、CSSの実装が中途半端だったり、バグが多い。CSSを本格的に導入するときは、 これらのブラウザにはCSSを読み込まないようにする必要がある。
@importや、外部スタイルシートリンク時のmedia指定を利用すれば、比較的簡単にそれが可能。
NN4.xをはじく
link rel="stylesheet" href="styles-site.css" type="text/css" media="all"
のように、 mediaの指定にscreen以外、つまりallを指定すれば、NN4x以下のブラウザは読み込まれない。
同様に、style type="text/css" media="all"
なども有効。
また、 media="screen, projection のように、複数の指定を行ってもはじくことができる。
IE4.xをはじく
@import "styles.css";
@import url('styles.css'); ではなく、「url」をとる。
これを使うと、IE4xとNN4x、ともにstyles.cssは読み込まれない。
ただし、WinのNS 4.0 - 4.04 でこれを指定すると、ブラウザがフリーズする致命的なバグが確認されている。
WinIE6以上とIE5x以下との違いを考慮したCSS
Win IE6以上の標準モードと、IE5x以下では、ボックスの幅の解釈や、文字スタイルの継承方法が異なるため、厳密にCSSを利用するときには、IE6・NN6以上・Opera・MacIE5.2など上位標準CSSと、WinIE5x以下用のCSSを分けて用意するのが理想的。
Voice-family hack（Box Model Hack）を使う
IE6・NN6以上・Opera・MacIE5.2などとWin IE5xの違いの中でももっとも致命的なものは、ボックスの幅の解釈の違い。
その違いを個別に裏技で回避する。
.haba {
padding: 20px;
border: 10px solid #FF0000;
width:460px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}
width：460px（4行目）はWin IE5以下専用の指定。
460とは、正常な値400pxに、WinIE5の誤った解釈20×2+10×2の計60pxを足したもの。
voice-family: "\"}\""; バックスラッシュエスケープ「\」のがハック。
プログラマーではないのでよくわからないが、IE6など多くブラウザは\後はいわゆる「バックスラッシュエスケープ」で
単なる文字列として扱われるらしく、結局
voice-family: "}";
のような意味、つまり音声ブラウザ読み上げ時の声の種類が「｝」だと指定する。
もちろんこれは意味不明な指定で、 その後
voice-family:inherit;
(inherit＝”前の値を継承する”)と上書きして、正常にもどす。そして最後に
width:400px;
と正しい幅を上書き指定する。
ところがWinIE5以下では、バックスラッシュエスケープ「\」を解釈せず、
voice-family: "\"}
の部分で「.haba」のクラス指定を「｝」終えてしまうため、その後のvoice-family:inherit;、width:400px;は読み込まれない。
なおこのハックを利用すると、IE5ではvoice-familyに変な値を指定してしまっていることになるが、
voice-familyプロパティはもともとIE5で対応していないので、 実害はない。
2004年07月24日
Air Mac Express
新しいAirMac Express ベースステーション with AirTunesをヨドバシカメラに探しにいったが、まだ入荷してないとのこと。人気で入荷が遅れているらしい。最近のAppleは調子がいいらしいが、在庫不足には困ったもんだ。
2004年07月07日
CSSバグリスト
http://cssbug.at.infoseek.co.jp/index.html
2ちゃんねるの力はすごいなあ、あらためて思った。
上記サイトに、文が左右にずれるバグ（WinIE5.5-6）も既出。回避方法まで例示してあった。