2024年04月 / 03月≪ 123456789101112131415161718192021222324252627282930≫05月
2006.11.21(Tue)
Top Page > CSS/XHTML > クソIEをハックしてやる!(IEの条件分岐の使い方)

クソIEをハックしてやる!(IEの条件分岐の使い方)

Webに関する仕事をしている関係で、最近のトレンドとしてWeb標準に基いた(X)HTML、CSSを記述するというのが流行りだ。
特に、旧来のtableレイアウトから脱却して、CSSレイアウトというのはトレンドの主流だろう。

CSSレイアウト、見栄えを全てCSSで行おうとすると「ムキー!!!」ってなるのがWinIE。まぁシェアが一番大きいブラウザなだけに厄介である。

皆さんはWinIEに対してだけに適用したいスタイルがある場合どうやっているだろうか?
アンダースコアハック、スターハック、voice-familyハック等々対策は色々ある。

はっきり言って俺はこのハックが嫌いである。理由はクリーンなCSSではなくなってしまうから(←むしろ性格的な理由かも・・・)。なので極力この類のハックは使わない。

そこで便利なのが条件分岐のコメントアウト。簡単に言ってしまえばIEの特定のバージョン以下、未満、以上に対してスタイルを適用する方法。

これ見つけたときは正直感動した!
詳しくは↓のKeyNavi.netのページをご覧あれ。
http://www.keynavi.net/ja/bugh/comments.html

普通は、CSSをまぁまぁ理解してくれるIE5以上をターゲットブラウザにすると思うから、またIE7は比較的CSSを仕様通り理解してくれる(結構バグがあるみたいだけど)から、<!--[if lt IE 7]> ... <![endif]-->がオススメかな。IE7未満にスタイルを適用するって場合。

書き方は以下の通り。↓の「iehack.css」にWinIEにだけ適用したいスタイルをカキコしておく。
<!--[if lt IE 7]><link rel="stylesheet" href="css/iehack.css" type="text/css" media="screen, projection" /><![endif]-->

こっちの方がコメントアウトを(X)HTMLファイルに一行記述するだけなのでシンプル。それにWinIE以外のブラウザはコメントアウトとして処理するからレンダリングには影響を与えない。
(まぁソース容量が増えるって問題があるけど)

特にこの条件分岐が有効なのは、XML宣言を記述する場合だろう。
XHTMLでは「エンコードがUTF-8またはUTF-16」「XMLバージョンが1.0」「DTD(文書型定義)を参照している」以外の場合は、HTML文書の先頭にXHTML宣言を記述しなければならない。
<?xml version="1.0" encoding="utf-8"?>

この「HTML文書の先頭」というのがクセもので、IE6にはDTDより前に何らかの文字列があると互換(Quirks)モードでレンダリングをしてくるという素晴らしい仕様がある(皮肉)。
互換モードってのは古いブラウザでのレンダリングを行うってモードで、簡単に言うとIE5系のレンダリングをしてくれるってこと。逆に通常のレンダリングモードを標準モードと言う。

簡単にまとめると・・・・・
XHTMLで記述する場合は、ワザと(ワザと言うか仕様準拠してしっかり)XML宣言を記述する。そしてIEの条件分岐のコメントアウト技でIE6~IE5に対してスタイルを適用する。こうすればほとんどの場合はIEハック用のCSS1つだけでまかなえる。
HTMLの場合は、IE5に対して条件分岐ワザでスタイルを適用する。

ログ見ているとUAでまだまだ古いブラウザ使っている人が多いから、覚えておいて損はしないでしょう。
関連記事

タグ(ブログ内検索もできます)IE ハック CSS hack スタイシート バグ bug

09:18  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑

関連エントリー

Loading


Comment

コメントを投稿する

※コメントは承認するまで表示されません。


管理者だけに表示

▲PageTop

Trackback

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

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

 | BLOGTOP |