コニファ・ロゴ

csstest:CSSだけで、IE6、IE7、IE8、IE9を判別する条件付きのHTML classとハック

条件付きコメントを使って、IEのみにHTMLのclassを付与します。これにより簡単なCSS指定で、IE6、IE7、IE8、IE9の振り分けが可能になります。IEの場合のみテストボックスの背景色が変わります。各IE用の色は下のとおり。他のブラウザの場合は白になります。比較のため、同じ動きのCSS IEハックも載せました。IEの各バージョン、IETesterなどで確認してください。

IE6
 
IE7
 
IE8
 
IE9
 

条件付きのHTML class

テストボックス1:このボックスの背景色が変わります。

HTMLのヘッダー部分

    <!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
    <!--[if IE 7 ]> <html class="ie7"> <![endif]--> 
    <!--[if IE 8 ]> <html class="ie8"> <![endif]--> 
    <!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
    <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]--> 

CSSソース

  .testbox  {  background: #ffffff;}
  .ie6 .testbox  { background: #aaff44;}   /* 黄緑 */
  .ie7 .testbox  { background: #88ffff;}   /* 水色 */
  .ie8 .testbox  { background: #ccaaff;}   /* 紫 */
  .ie9 .testbox  { background: pink;}   /* ピンク */ 

 

CSS IEハック

テストボックス2:このボックスの背景色が変わります。

IEハックのCSSソース/h3>
.testbox2 {
    background: #ffffff; /* すべてのブラウザ */
    background: #ccaaff\9; /* IE8 以下 */
    *background: #88ffff; /* IE7 以下 */
    _background: #aaff44; /* IE6 */
}
.testbox2:not(:target) {
background: pink\9; /* IE9 */ }

 

 

戻るボタン