コンディショナルコメントについて

ブラウザによって、CSS の解釈が違うので、同じ CSS を読み込んでも表示が異なる時があります
それを防ぐには、「CSSハック」 と「コンディショナルコメント」という方法があります

「CSSハック」とは
ブラウザのバグを逆手にとって利用する事ができ、ブラウザやそのバージョン毎に細かい設定が可能である
しかし、CSSファイル にのみ記載すればいいが、ソースが長くなってしまうこともある
また、ブラウザが新しいバージョンになった場合に使えなくなることがある

「コンディショナルコメント」とは
条件分岐によりタグを選択することができるが、HTML に記述するので、対象のページ数が増えてしまうこともある
分岐の条件として “IE” と “IE以外” のみだけの対応になり、IE以外 のブラウザ種別では対応外となる(MacIE なども対応外である)

結論としては使用シェアの高い「IE」「Firefox」のみ意識すれば
「コンディショナルコメント」の方が便利に使えそうだ

以下、「コンディショナルコメント」についての説明

構文

<!–[if<条件>]>
(内容)
<![endif]–>

<条件> に合致するものが、(内容)に記載されているHTMLソースを処理します
例えばここに “<style type=”text/css” media=”all”>@import url(http://***.***.co.jp/***.css);</style>”
などの構文を記載すれば、別のスタイルシートを読み込ませることも可能です
尚、条件には “IE” ベースでしか選択できない

■<条件> の種類

<!–[if IE]>     全てのバージョンが対象

<!–[if IE5 – 8]>     指定したバージョンのみ対象(IE5.5 については “IE 5.5000” と記載)

<!–[if gte IE 6 ]>     指定したバージョン以上が対象 gte = Greater-Than or Equal

<!–[if gt IE 6 ]>     指定したバージョンより上が対象 gte = Greater-Than

<!–[if lte IE 8 ]>     指定したバージョン以下が対象 gte = Less-Than or Equal

<!–[if lt IE 8 ]>     指定したバージョンより下が対象 gte = Less-Than

<!–[if !IE 8]>     IE 8 以外 の IE が対象

<![if !IE ]>     IE以外 のブラウザが対象(唯一書式が違う)

※「コンディショナルコメント」は、IE5 からの機能なため、IE4以下 は対象外

タイトルとURLをコピーしました