HOME > Tips > CSS > 条件付コメントをbodyタグに使用してIEのCSSハック

条件付コメントをbodyタグに使用してIEのCSSハック

  • Author:920

「paulhammond.org」で「Conditional classnames」というInternet Explorer用のCSSハックのテクニックが紹介されていました。

条件付コメント(Conditional Comment)を「body」タグに使用して、「body」タグに「Internet Explorer」を識別するための「class」を設定しようというものです。

<以下、「paulhammond.org」の引用>

  • If you use this HTML:
  •  
  • <!--[if IE ]>
  •   <body class="ie">
  • <![endif]-->
  • <!--[if !IE]>-->
  •   <body>
  • <!--<![endif]-->
  •  
  • with CSS that looks something like:
  •  
  • div.foo {
  •     color: inherit;
  • }
  • .ie div.foo {
  •     color: #ff8000;
  • }

ちょっと感動しました。このサイトでも、IEのCSSハックのため条件付コメントを使用していますし、ページのタイプを識別するためにbodyタグにclassも設定しています。しかし、条件付コメントにこんな使い方があったとは、

頭、硬っ・・・ 俺

<参照サイト>

paulhammond.org

<追加>

JavaScriptで同じようなことをやってみました。

JavaScriptでbodyタグにユーザー環境をclassとしてを追加

UP