2008.08.10.

なるべくならIE用のHackは使いたくない

「IEの条件付きコメント」は、ウェブサイトを作る場合のとっても便利なIE対策です。
IE以外のブラウザは、まぁまぁWeb標準に準拠しているのでそれほど困りませんが、IE6とかIE7は使っている人も多いだけにCSSをまともに解釈してくれないのは、大変もどかしい。

今まで、Hackといわれる様々な方法で、IEだけではなく特定のブラウザのみCSSを適応させたり、除外させたりしてきました。呪文のような文字の羅列で、後から何のために書いたのかわからなくなることもしばしば(私だけ?)
そんなとき、「CSS Hackを使わずにIEのバグに対処する方法」という記事を読みました。
「IEの条件付きコメント」というのを使うとスマートに解決できそうです。よけいなHackを使わなくても「条件付きコメント」で、たとえばIE6の場合だけ専用のCSSを読み込ませて、IE6のみ別の表示をさせることが出来ます。
ソースも見やすくなるし、便利。
さっそくWordPressのテーマの中で使ってみました。
具体的には、まずIE6専用のスタイルシート(例えばie6.css)をstyle.cssと同じフォルダに入れておきます。次にheader.phpのheadの中で標準のstyle.cssを読み込んだその後の行に

HTML<!--[if lte IE 6 ]>
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/ie6.css” type=”text/css” media=”screen” />
<![endif]–>

というのを書き込みます。これでIE6とIE5の場合は、 style.cssの後に専用のie6.cssを読み込んでくれます。
「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応」という記事で書いた「IE7.js」をgoogleコードへ読みに行くコードもこの「条件付きコメント」でIE7未満のバージョンの場合にのみ読み込むという使い方をしています。
こういう便利な方法があったんですね。

この記事へのトラックバック URL :

Leave a comment

CAPTCHA