クソ暑いので外に出る気にもならず、部屋で冷房を掛けて、久しぶりに「イライラ・ストレス」の講釈サイトをいじっている（仕事柄幸いにも、エアコンの電気料金を気遣う必要が無い）。
私のように中途半端に分っているサイト作成者にとって、一番イライラしてストレスになるのが、ブラウザの違いによるCSSの解釈・表示の違いの問 題だ（専門家は全て分った上で、適切な対応を取っているだろうし、初心者はそもそもそんな問題についての意識すら持ち合わせが無い-私もそうだったが-。 つまりどっちにしてもこの件について、イライラ・ストレスからは開放されているって訳だ）。
一番頭に来るのが、IE なのだが、悪いことにこのIEが特にWinでは圧倒的なシェアを持っている。
同じIEでも特にひどいのが6以前のバージョンで、同じIEでも、6と7では違うソフトのようでさえ有る。
そしてシェア的には未だまだこのIE6を無視してサイト展開が出来る状況では無いんだな。
ボックスのパディング解釈の違いやらナニやらで、同じコード・同じCSSでも、幅が食い違って表示されるなどザラだ（高さの違いはスクロールの大きさ程度で、それ程気にならないことが多い）。
これを回避する方法は色々有るようで、ブラウザデフォルトのCSSを外してしまう方法、ブラウザのバグを逆に利用する方法など、本を読めば幾つも 書いて有るが、これが中途半端理解者にとっては中々難しい。その通りやった積もりでも機能しないんだな（サイト作成関連の書籍は、日本語で書かれていると は到底思えない）。
で………、
この度一つ、良い方法を知った。「条件分岐コメント」で、特定のブラウザに、それ専用に用意したスタイルシートを読み込ませる方法だ。勿論知っている人はとうに知っている、至ってポピュラーな手なのだろうが、簡単だし効果もいい切れ味をしている。
具体的には、
<!--[if lte IE 6]>
<link rel="stylesheet" tipe="text/css" href="../script/koza_set/contents_ie6.css" media="screen" />
<![endif]-->
このコメントを必要な要素に配置しておけば良い。
と言うよりもこの呪文を、<body>要素の冒頭に配置しておけば、それだけでページ全体にニラミを効かせてくれるから、特に他に問題が無い限りその方が良さそうだ。
上記コメント冒頭の「lte」は、「それ以前のバージョン」を指定し、この場合6以前のバージョン全てが対象になる。バージョン6だけを対称にするなら、必要は無い。
2行目は分岐によって読み込ませるスタイルシートのファイル名とルート（相対参照）で、当然ユーザによって変わってくる。
後は正規のスタイルシートと併せて、変更する要素のプロパティだけを書き出した分岐用のスタイルシートを用意し、上記ルートに保存しておけば良い。
CSSに最も忠実だとされているFirefoxと、一番鬼っ子のIE6で表示の検証しながら、違いが出たらこのスタイルシートを訂正しておけば良い。
Win版IEだけでなく、色々全て検証すべきなのだろうが、まあ個人サイトとしてはこの程度で勘弁してもらえるだろう。
実際の効果の一端を画像で示しておく。
今回初めてPNG画像を使ってみた。多少サイズは大きくなるが、24ビットのPNGは8ビットのGIFと比較して圧倒的にキレイだ。しかしIE6迄はこの透過PNGに対応していない。
そこで上記「条件分岐コメント」で、IE6には透明GIFを読み込ませることで、次善の対応策としてみた
画像等については下記リンク参照
http://y-ok.com/pc-apple/pc-2.html
コメントする