2006.11.21（Tue）
クソIEをハックしてやる！（IEの条件分岐の使い方）
Webに関する仕事をしている関係で、最近のトレンドとしてWeb標準に基いた(X)HTML、CSSを記述するというのが流行りだ。
特に、旧来のtableレイアウトから脱却して、CSSレイアウトというのはトレンドの主流だろう。
CSSレイアウト、見栄えを全てCSSで行おうとすると「ﾑｷｰ！！！」ってなるのがWinIE。まぁシェアが一番大きいブラウザなだけに厄介である。
皆さんはWinIEに対してだけに適用したいスタイルがある場合どうやっているだろうか？
アンダースコアハック、スターハック、voice-familyハック等々対策は色々ある。
はっきり言って俺はこのハックが嫌いである。理由はクリーンなCSSではなくなってしまうから（←むしろ性格的な理由かも・・・）。なので極力この類のハックは使わない。
そこで便利なのが条件分岐のコメントアウト。簡単に言ってしまえばＩＥの特定のバージョン以下、未満、以上に対してスタイルを適用する方法。
これ見つけたときは正直感動した！
詳しくは↓のKeyNavi.netのページをご覧あれ。
http://www.keynavi.net/ja/bugh/comments.html
普通は、CSSをまぁまぁ理解してくれるIE5以上をターゲットブラウザにすると思うから、またＩＥ7は比較的CSSを仕様通り理解してくれる（結構バグがあるみたいだけど）から、<!--[if lt IE 7]> ... <![endif]-->がオススメかな。IE7未満にスタイルを適用するって場合。
書き方は以下の通り。↓の「iehack.css」にWinIEにだけ適用したいスタイルをカキコしておく。
こっちの方がコメントアウトを(X)HTMLファイルに一行記述するだけなのでシンプル。それにWinIE以外のブラウザはコメントアウトとして処理するからレンダリングには影響を与えない。
（まぁソース容量が増えるって問題があるけど）
特にこの条件分岐が有効なのは、XML宣言を記述する場合だろう。
XHTMLでは「エンコードがUTF-8またはUTF-16」「XMLバージョンが1.0」「DTD（文書型定義）を参照している」以外の場合は、HTML文書の先頭にXHTML宣言を記述しなければならない。
この「HTML文書の先頭」というのがクセもので、IE6にはDTDより前に何らかの文字列があると互換（Quirks）モードでレンダリングをしてくるという素晴らしい仕様がある（皮肉）。
互換モードってのは古いブラウザでのレンダリングを行うってモードで、簡単に言うとIE5系のレンダリングをしてくれるってこと。逆に通常のレンダリングモードを標準モードと言う。
簡単にまとめると・・・・・
XHTMLで記述する場合は、ワザと（ワザと言うか仕様準拠してしっかり）XML宣言を記述する。そしてIEの条件分岐のコメントアウト技でIE6～IE5に対してスタイルを適用する。こうすればほとんどの場合はIEハック用のCSS1つだけでまかなえる。
HTMLの場合は、IE5に対して条件分岐ワザでスタイルを適用する。
ログ見ているとUAでまだまだ古いブラウザ使っている人が多いから、覚えておいて損はしないでしょう。
特に、旧来のtableレイアウトから脱却して、CSSレイアウトというのはトレンドの主流だろう。
CSSレイアウト、見栄えを全てCSSで行おうとすると「ﾑｷｰ！！！」ってなるのがWinIE。まぁシェアが一番大きいブラウザなだけに厄介である。
皆さんはWinIEに対してだけに適用したいスタイルがある場合どうやっているだろうか？
アンダースコアハック、スターハック、voice-familyハック等々対策は色々ある。
はっきり言って俺はこのハックが嫌いである。理由はクリーンなCSSではなくなってしまうから（←むしろ性格的な理由かも・・・）。なので極力この類のハックは使わない。
そこで便利なのが条件分岐のコメントアウト。簡単に言ってしまえばＩＥの特定のバージョン以下、未満、以上に対してスタイルを適用する方法。
これ見つけたときは正直感動した！
詳しくは↓のKeyNavi.netのページをご覧あれ。
http://www.keynavi.net/ja/bugh/comments.html
普通は、CSSをまぁまぁ理解してくれるIE5以上をターゲットブラウザにすると思うから、またＩＥ7は比較的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でまだまだ古いブラウザ使っている人が多いから、覚えておいて損はしないでしょう。
- 関連記事
-
- 【html/xhtml】ユーザビリティを高める「<label>」の使い方
- XHTML+CSSスタンダード・デザインガイド
- 【xhtml/css】不可視のページ内アンカーリンクでアクセシビリティを向上する
- IE7をスタンドアローンでインスコ
- ユニバーサルセレクタ（*）はもう古い？
- 【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ！？
- クソIEをハックしてやる！（IEの条件分岐の使い方）
- 【xhtml/css】xhtml（html）やcssのコードをチェックするツール色々
- 【html/xhtml】文字コード宣言と日本語、特にtitleの位置関係に関する話
- 【xhtml/css】linkを記述する時の順序は「LVHA（ラブハ）」で覚えましょう
関連エントリー
Loading
この記事のトラックバックURL
この記事へのトラックバック
| BLOGTOP |
※コメントは承認するまで表示されません。