[CSS]わずか四文字でIE6/7/8を区別するCSSハック
Post on:2010年3月30日
sponsors
「\」「9」「*」「_」の四文字だけで、IE6, IE7, IE8を区別するCSSハックをNettuts+から紹介します。
Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters
IE8とそれ以下
|
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ } </textarea> |
- L.2
- 全てのブラウザ用の指定
- L.3
- IE8とそれ以下用の指定
最後に「\9」をつける。
IE7とそれ以下
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ *color : yellow; /* IE7 and below */ } </textarea> |
- L.2
- 全てのブラウザ用の指定
- L.3
- IE8とそれ以下用の指定
- L.4
- IE7とそれ以下用の指定
先頭に「*」をつける。
IE6
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="css" cols="60" rows="5"> body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ *color : yellow; /* IE7 and below */ _color : orange; /* IE6 */ } </textarea> |
- L.2
- 全てのブラウザ用の指定
- L.3
- IE8とそれ以下用の指定
- L.4
- IE7とそれ以下用の指定
- L.5
- IE6用の指定
先頭に「_」をつける。
CSSハックについて
※下記は元記事の意訳です。
私はどんな時でもスタイルシートでのハックの使用を提唱していません。それどころか、常に条件付きコメントを使用するべきです。
しかしながら、CSSハックはちょっとしたテストやデバッグなどには有用です。ハックの一番の心配は将来それが有効ではなくなる可能性があるためです。
ハックは、賢く使用してください。
条件付きコメントとは、下記のように記述します。
|
1 2 3 4 5 |
<textarea name="code" class="html" cols="60" rows="5"> <!--[if lte IE 7]> Make IE7 happy. <![endif]--> </textarea> |
sponsors
