| 種類 | ハック対象ブラウザ | 説明 | 例 |
|---|---|---|---|
| media属性でscreen以外の値を指定する | Netscape Navigator 4 | Netscape Navigator 4.0は、media属性を指定した場合、その値が「screen」でないと、外部CSSの読み込みが行われない。そのため、「screen,tv」と敢えて複数の値を指定するか、「all」と指定することでスタイル全体を隠すことができる | <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,tv" /> |
| url()関数省略の@import規則を記述する | Windows Internet Explorer 4 Mac Internet Explorer 4 Netscape Navigator 4 |
Windows Internet Explorer 4とMac Internet Explorer 4 はurl()関数による書式でないと外部CSSの読み込みが行われない。また、Netscape Navigator 4は@import規則によるスタイルの読み込みに対応していない | @import "/css/style.css"; |
| url()関数と「"～"（二重引用符）」の@import規則を記述する | Mac Internet Explorer 4.5 Netscape Navigator 4 |
Mac Internet Explorer 4.5では、url関数を記述する場合、「'～'（単引用符）」か引用符なしでないと、外部CSSの読み込みが行われない。また、Netscape Navigator 4は@import規則によるスタイルの読み込みに対応していない | @import url("/css/style.css"); |
| url()関数と「'～'（単引用符）」の@import規則を記述する | Mac Internet Explorer 5 Netscape Navigator 4 |
Mac Internet Explorer 5では、@import規則を利用する際、単引用符でURIを括ると外部CSSの読み込みが行われない。また、Netscape Navigator 4は@import規則によるスタイルの読み込みに対応していない | @import url('/css/style.css'); |
| Tantekハイパスフィルタ | Windows Internet Explorer 5.5以下 Mac Internet Explorer 4以下 Netscape Navigator 4以下 |
右例の通り記述することで、Windows Internet Explorer 5.5、Mac Internet Explorer 4、Netscape Navigator 4では、外部CSSの読み込みが行われない。 | @import "null?\"\{"; @import "/css/style.css"; @import "null?\"\}"; |
| 種類 | ハック対象ブラウザ | 説明 | 例 |
|---|---|---|---|
| セレクタ/**/ {} | Windows Internet Explorer 4～5 | Windows Internet Explorer 4～5では、セレクタの直後に「/**/（空のコメント）」を記述すると、そのスタイルが適用されない | p/**/ { color: red; } |
| セレクタ { プロパティ名 /**/: 値;} | Windows Internet Explorer 6 | Windows Internet Explorer 6の標準準拠モードでは、プロパティ名の後に半角スペースと「/**/（空のコメント）」を記述すると、そのスタイルが適用されない （※1） | p { color /**/: red; } |
| バックスラッシュハック | Mac Internet Explorer 5 | Mac Internet Explorer 5では、「/* ～ \*/」のようにコメントを閉じる直前に「\（バックスラッシュ）」を記述すると、正しくコメントの終了が解釈されず、以降に記述したスタイルが適用されない。その後、「/* ～ */」のように、通常のコメントを記述しておくことで、それ以降のスタイルは適用される | /*\*/ p { color: red; } /**/ あるいは p { /*\*/ color: red; /**/ ] |
| Caioハック | Netscape Navigator 4 | Netscape Navigator 4では、「/* ～ /*/」のようにコメントを閉じる直前に「/（スラッシュ）」を記述すると、正しくコメントの終了が解釈されず、以降に記述したスタイルが適用されない。その後、「/* ～ */」のように、通常のコメントを記述しておくことで、それ以降のスタイルは適用される | /*/*/ p { color: red; } /**/ あるいは p { /*/*/ color: red; /**/ ] |
| xmlns属性ハック | Windows Internet Enplorer 6、Mac Internet Explorer 5などの属性セレクタをサポートしていないブラウザ | 属性セレクタを利用することで、これをサポートしていないブラウザではスタイルが適用されない （※2） | html[xmlns] p { color: red; } |
| スターハック | Windows Internet Explorer 4～6 Mac Internet Explorer 4～5 |
本来(X)HTMLのルート要素はhtml要素だが、Windows Internet Explorer 4～6とMac Internet Explorer 4～5では、全称セレクタを用いて「* html」と記述することでスタイルが適用される （※3） | * html p { color: red; } |
| アンダースコアハック | Windows Internet Explorer 4～6 | CSSの文法上は正しくないが、プロパティの先頭に「_（アンダースコア）」を記述すると、Windows Internet Explorer 4～6のみにスタイルが適用される （※3） | p { _color: red; } |
| Fbriceインバージョン | Netscape Navigator 4 Opera 4～5 |
「/* ～ /*//*/」のようにコメントを記述すると、、以降に記述したスタイルはNetscape Navigator 4と、Opera 4～5 のみに適用される。その後、「/* ～ */」のように、通常のコメントを記述しておくことで、それ以降のスタイルは他のブラウザでも適用される | /*/*//*/ p { color: red; } /**/ あるいは p { /*/*//*/ color: red; /**/ ] |
※1 Windows Internet Explorer 7 では構文のバグが改善されたためスタイルが適用される
※2 Windows Internet Explorer 7 では属性セレクタがサポートされたためスタイルが適用される
※3 Windows Internet Explorer 7 では構文のバグが改善されたためスタイルが適用されない
| 種類 | ハック対象ブラウザ | 説明 | 例 |
|---|---|---|---|
| Tantekボックスモデルハック | Windows Internet Explorer 4～5 Mac Internet Explorer 4 Netscape Navigator 4 |
voice-familyプロパティを利用して右例のように記述すると、以降のスタイルはWindows Internet Explorer 4～5、Mac Internet Explorer 4、Netscape Navigator 4では適用されなくなる | #box { width: 500px; /* 古いブラウザ用の値 */ voice-family: "\"}\""; voice-family: inherit; width: 300px; /* モダンブラウザ用の値 */ } |
| 単純ボックスモデルハック | Windows Internet Explorer 5 | プロパティの先頭に「\（バックスラッシュ）」を記述すると、このスタイルはWindows Internet Explorer 5のみに適用される。また、プロパティの一文字目の後に「\（バックスラッシュ）」を記述すると、このスタイルはその他のモダンブラウザに対して適用される | #box { width: 300px; /* すべてのブラウザ用の値 */ \width: 500px; /* Windows Internet Explorer 5 用の値 */ w\idth: 300px; /* モダンブラウザ用の値 */ } |
| 代替ボックスモデルハック | Windows Internet Explorer 5 | Windows Internet Explorer 5～6では、同じ宣言内の!important規則を無視するため、後に記述した値の方を優先して適用しようとする。ただし、Windows Internet Explorer 6に対しては、プロパティ名の後に半角スペースと「/**/（空のコメント）」を記述することで、後に記述した値が読み込まれないように対処しておく。 | #box { width: 300px !important; /* モダンブラウザ用の値 */ width /**/: 500px; /* Windows Internet Explorer 5 用の値 */ } |