CSSを使ってデザインしているとモダンブラウザではしっかりデザインできているのにIEでは思うようにならないってことがよくありますよね。
ちょっと前だったら「IE6でレイアウトがあああああ!」とかTwitterでよくあるツイートでしたよね。ボクです。
そして一時流行ったのがCSSハック。
正直ハックは書いたことがないので、どんなことが出来るのかさえしりません。
と言いますか、CSSハックって元々ブラウザのバグを利用した書き方であったバグが修正されたらどうするの?
何よりWEBってデバイスに依存しちゃいけないと思うし、CSSだってクリーンに保てないですよね。
とか何とか言う変なこだわりがあって仕事では基本的にハックとか使わなようにしています。
と書いてしまうとこの記事はここで終わりなので、やっちゃうんですけどー。
どうしてもIEだけCSSを変えなきゃいけないとか、IEだけ●●とかいう場合はIEの条件付きコメントを使います。
これだとCSSだけじゃなくhtmlでも使えるのでアイデア次第で色々出来るかもしれないと思ってるかもしれないかもしれないですよね。
条件付きコメントで具体的に何ができるか
- IEだけ表示
- IE以外に表示
- IEのバージョン別に表示
- IEの指定バージョン以上に表示
- IEの指定バージョン以下に表示
実際に書き方は
1.IEだけ表示
1 2 3 |
<!--[if IE]> <p>IE Death!</p> <![endif]--> |
2.IE以外に表示
1 2 3 |
<!--[if !IE]> <p>IE 以外 Death!</p> <![endif]--> |
3.IEのバージョン別に表示
1 2 3 |
<!--[if IE 7]> <p>IE7 Death!</p> <![endif]--> |
4.IEの指定バージョン以上に表示
1 2 3 |
<!--[if gte IE 7]> <p>IE7 以上 Death!</p> <![endif]--> |
5.IEの指定バージョン以下に表示
1 2 3 |
<!--[if lte IE 7]> <p>IE7 以下 Death!</p> <![endif]--> |
(※以上、以下は「より上のgt」と「より下のlt」も存在します。)
よってCSSファイルをIEだけ別のファイルで作成した場合は
1 2 3 4 |
<link rel="stylesheet" type="text/css" href="style.css"> <!--[if IE ]> <link rel="stylesheet" type="text/css" href="ieonly.css"> <![endif]--> |
となります。
CSSハックを使うより作業量は増えそうですが、後々のことを考えると条件付きコメントで制御したほうがいいんじゃないでしょうか。
元々バグを利用した記述方法なんて揚げ足取ってるみたいでボクのガラスのハートが痛むんです。