« 2004年6月 | メイン | 2004年8月 »

2004年7月31日

CSS関連 リンク集

CSSに関連する有益なサイトのリンク集を作っておこうとふと思った。

http://cssbug.at.infoseek.co.jp/index.html
http://dithered.com/css_filters/index.html
http://tantek.com/CSS/Examples/

http://www.stylesheet-stylebook.com/archives/tipe3.php

続きを読む "CSS関連 リンク集" »

銀行・クレジットカードを変えた

これまでの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

この方法の弱点

続きを読む "Win IE5-6を簡単にはじく" »

NN4x、IE4x以下のブラウザに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 でこれを指定すると、ブラウザがフリーズする致命的なバグが確認されている。

続きを読む "NN4x、IE4x以下のブラウザにCSSを読み込ませないようにする" »

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で対応していないので、 実害はない。

続きを読む "WinIE6以上とIE5x以下との違いを考慮したCSS" »

2004年7月24日

Air Mac Express

新しいAirMac Express ベースステーション with AirTunesをヨドバシカメラに探しにいったが、まだ入荷してないとのこと。人気で入荷が遅れているらしい。最近のAppleは調子がいいらしいが、在庫不足には困ったもんだ。

続きを読む "Air Mac Express" »

2004年7月 7日

CSSバグリスト

http://cssbug.at.infoseek.co.jp/index.html

2ちゃんねるの力はすごいなあ、あらためて思った。

上記サイトに、文が左右にずれるバグ(WinIE5.5-6)も既出。回避方法まで例示してあった。

続きを読む "CSSバグリスト" »