[CSS]わずか四文字でIE6/7/8を区別するCSSハック
「\」「9」「*」「_」の四文字だけで、IE6, IE7, IE8を区別するCSSハックをNettuts+から紹介します。
Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters
IE8とそれ以下
- L.2
- 全てのブラウザ用の指定
- L.3
- IE8とそれ以下用の指定
最後に「\9」をつける。
IE7とそれ以下
- L.2
- 全てのブラウザ用の指定
- L.3
- IE8とそれ以下用の指定
- L.4
- IE7とそれ以下用の指定
先頭に「*」をつける。
IE6
- L.2
- 全てのブラウザ用の指定
- L.3
- IE8とそれ以下用の指定
- L.4
- IE7とそれ以下用の指定
- L.5
- IE6用の指定
先頭に「_」をつける。
CSSハックについて
※下記は元記事の意訳です。
私はどんな時でもスタイルシートでのハックの使用を提唱していません。それどころか、常に条件付きコメントを使用するべきです。
しかしながら、CSSハックはちょっとしたテストやデバッグなどには有用です。ハックの一番の心配は将来それが有効ではなくなる可能性があるためです。
ハックは、賢く使用してください。
条件付きコメントとは、下記のように記述します。
Post on:2010年3月30日
Comments
hide
on 2010年3月30日
いつもエントリー楽しみにさせて頂いています。
こんな簡単にCSSハックができてしまうとは。
確かにCSSハックを使わないに越したことはありませんが、
これはかなり有効に使えそうですね。
参考にさせて頂きます。
コリス
on 2010年3月30日
> hide さん
ですよね。
IE8なのに、「9」ってのがポイントです。
いつも、ありがとうございます。
10時のヘッドライン | CROSS SBM
on 2010年3月30日
[...] – Capote’s Connected Communications – 続・広報の視点 はてブ:7 [CSS]わずか四文字でIE6/7/8を区別するCSSハック | コリスはてブ:27 近々リリースのPhotoshop [...]
ひよっこクリエータの試行錯誤のみちのり
on 2010年3月30日
【CSSハック】（引用）[CSS]わずか四文字でIE6/7/8を区別するCSSハック
これすごい！
[CSS]わずか四文字でIE6/7/8を区別するCSSハック
body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
…
[CSS]わずか四文字でIE6/7/8を区別するCSSハック | コリス | 俺的ニュースメモ
on 2010年3月30日
[...] [CSS]わずか四文字でIE6/7/8を区別するCSSハック | コリス [...]
18時のヘッドライン | CROSS SBM
on 2010年3月30日
[...] 本の虫: How NOT to write a good javascript code livedoor:3 [CSS]わずか四文字でIE6/7/8を区別するCSSハック | コリスlivedoor:13 麻生氏も苦言「全部ウソぽっい」朝ドラ最低視聴率のワケ [...]
19時のヘッドライン | CROSS SBM
on 2010年3月30日
[...] – New ClearSilver binding in Perl – Islands in the byte streamはてブ:6 [CSS]わずか四文字でIE6/7/8を区別するCSSハック | コリスfc2:1 [...]
links for 2010-03-30 « 個人的な雑記
on 2010年3月31日
[...] [CSS]わずか四文字でIE6/7/8を区別するCSSハック | コリス (tags: css hack) [...]
ウェブ、やってます » IE向けCSSハックのまとめ (IE6〜8)
on 2010年3月31日
[...] IE6、7、8向けのCSSを簡単に個別に指定できるCSSハックが「コリス」で紹介されていたのでメモ。 使うときは注意が必要だけど、これはすごく便利。 [...]
ITキヲスク | 2010年3/28～4/3の週間ブックマーク
on 2010年4月4日
[...] [CSS]わずか四文字でIE6/7/8を区別するCSSハック | コリス [...]
IEのバグ？ | Satake Studio Developer's Blog
on 2010年4月5日
[...] transparentな inputって使わないのかな。 結局どうしたかというと、『[CSS]わずか四文字でIE6/7/8を区別するCSSハック』で紹介されている「￥９」を最後に付けるハックで [...]
vertical-alignの使い方に悩んだらココ！ | Satake Studio Developer's Blog
on 2010年4月24日
[...] あと、何回も出てくるIEハック（ わずか四文字でIE6/7/8を区別するCSSハック）。これ最強！ [...]
ゾロ目ですが何か？ » IE6/7/8別にCSSを分岐する呪文
on 2010年6月25日
[...] →[CSS]わずか四文字でIE6/7/8を区別するCSSハック [...]
IE6、IE7、IE8を四文字だけで区別できるCSSハック - BlackFlag – Web Development Technical
on 2010年10月7日
[...] りやすく和訳してくれているページはこちら。 ≫[CSS]わずか四文字でIE6/7/8を区別するCSSハック | コリス [...]
わずか四文字でIE6/7/8を区別するCSSハック « Chocots(チョコッツ) | 気になるネタをChotだけ。
on 2011年6月16日
[...] わずか四文字でIE6/7/8を区別するCSSハック http://coliss.com/articles/build-websites/operation/css/css-quick-tip-css-hack-target-ie6-ie7-ie8.ht… [...]
IE7・8・9のCSSハック | memo
on 2011年9月1日
[...] http://coliss.com/articles/build-websites/operation/css/css-quick-tip-css-hack-target-ie6-ie7-ie8.html [...]
ｵｻｰﾝ
on 2012年3月12日
とても分かりやすくまとめて下さって感謝です！
シマダ
on 2012年4月26日
IE8とそれ以下として紹介されているものは、IE9にも効いてしまうので注意が必要です。
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode
のコメント欄によると、 property:value/;でIE8にだけ効くらしいです。
シマダ
on 2012年4月26日
あー、ここのコメント欄でも「\0」が消えてしまうので、バックスラッシュを文字参照で書かないといけないですね。
「property:value\0/;でIE8にだけ効くらしいです。」が言いたかったことです。
コリス
on 2012年4月26日
> シマダ さん
情報、ありがとうございます。