CSSハック

よく使うCSSハック

予備知識。

  • スターハック("*")は基本的にIEに適用され、それ以外に適用されない。
  • セレクタ(selector)とは、タグ、クラス、IDのことを指す。
  • モダンブラウザとは、Firefox、Opera などのこと。

IE6以下に適用(IE7とモダンブラウザには適用されない)

* html (selector) {

}

IE7のみに適用(IE7以外には適用されない)

*+html (selector) {

}

または、

*:first-child+html (selector) {

}

全てのIEに適用(IE以外には適用されない)

*+html (selector), *html (selector) {

}

または、

*:first-child+html (selector), *html (selector) {

}

IE7を含むモダンブラウザに適用(IE6以下には適用されない)

html>body (selector) {

}

IEを除くモダンブラウザに適用(IEには適用されない)

html>/**/body (selector) {

}

よく使うパターン

div.sample クラスに上手くスタイルをあてる。

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<style type="text/css">
/* IE以外に適用 */
div.sample {
    max-width:100%;
    max-height:500px;
    overflow:auto;
    position:relative;
}
/* IE7に適用 */
*:first-child+html div.sample {
    width:650px;
    height:180px;
    overflow:auto;
    position:relative;
} 
/* IE6以前に適用 */
* html div.sample {
    width:650px;
    height:180px;
    overflow:auto;
    position:relative;
}
</style>

より後に定義されたスタイルが優先されるという仕様を利用する。

上記の場合、まずモダンブラウザ向けの設定をして、 それ以降に、IEのみ設定を上書きさせている。

参考サイト

IEのコンディショナル(条件付)コメント

IEのみ、レンダリング対象として読み取られる記法がある。 これを使えば、IE以外はコメントとして扱われて読み取られず、IEのみをターゲットにできる。

基本的な記法

<!--[if (expression)]>

<![endif]-->

上記コメントにはさまれた部分の記述は、IEのみ読み取られる。

expression は、その記述を読み取る条件。

次のように書く。

[comparison] [feature] [version]
  • comparison : 適用範囲。lt,gt,lte,gte, のいずれかを指定。
    • lt : 指定バージョンより下(指定バージョンは含まない)。
    • gt : 指定バージョンより上(指定バージョンは含まない)。
    • lte : 指定バージョン以下(指定バージョンを含む)。
    • gte : 指定バージョン以上(指定バージョンを含む)。
  • feature : ブラウザの種類。今のところ"IE"しか対応していない。
  • version : ブラウザのバージョン。
    コンディショナルコメントに対応しているのは 5, 5.5, 6, 7 (or 8)

IE7以上に適用

<!--[if gte IE 7]>

<![endif]-->

IE6以上に適用

<!--[if gte IE 6]>

<![endif]-->

IE6以下に適用

<!--[if lte IE 6]>

<![endif]-->

IE5.5以下に適用

<!--[if lt IE 6]>

<![endif]-->

全てのIEに適用

<!--[if IE]>

<![endif]-->

参考サイト


MLEXP. Wiki


トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-05-15 (土) 12:07:28 (3741d)