CSS Hack は、標準 CSS がさまざまなブラウザの表示効果と互換性がない場合に使用される救済策であり、ブラウザの製造元が CSS の解析方法について合意に達するまでは、このようなタスクを完了するためにのみこの方法を使用できます。インターネット上で多くの CSS ハックを検索できるかもしれませんが、今日私がリリースしたものすべてを理解できるわけではないかもしれません。これらは単一のブラウザのみを対象とした CSS ハックだからです。
これらの CSS ハックが機能することを示すために、6 つの新しい P タグを作成し、各 P タグに一意の ID を与えました。これにより、実際の CSS Hack が表示されます。
| <p id="opera">Opera 7.2 ～ 9.5 です</p> <p id="safari">私は魔法のサファリです</p> <p id="firefox">Firefox を使用しています</p> <p id="firefox12">私は FF シニア Firefox 1 ～ 2 </p> <p id="ie7">私は囧IE7です</p> <p id="ie6">私は壊れた IE 6 です</p> |
次に、これらの P タグをデフォルトでは表示しないようにします。
| <style type="text/css"> ボディ p{表示: なし;} </スタイル> |
IE CSS 条件付きコメントを使用して IE ブラウザを区別する
IE ブラウザを区別する最も簡単な方法は、当然、条件付きコメントを使用することです。 Microsoft は、この機能を実現できる強力な構文を作成しました。 IE の条件付きコメントについては詳しく説明しません。ここでは、検索エンジンで何万もの検索語を検索できると思います。
| <!--[IE 7 の場合]> <style type="text/css"> </スタイル> <![endif]--> <!--[IE 6 の場合]> <style type="text/css"> </スタイル> <![endif]--> |
CSS パーサー ハックを使用して IE を区別する
IE の条件付きコメントは非常にシンプルで使いやすいですが、すべての CSS を 1 つのファイルに入れたい場合は、他の方法を使用する必要があります。 IE6 は > セレクターをまったく認識しないため、ここでの IE 7 ハックは IE7 でのみ機能することに注意してください。同時に、> セレクターも他のブラウザーでは無効であることに注意する必要があります。
| /* IE 7 */ html > 本文 #ie7 {*表示: ブロック;} /* IE6 */ 本体#ie6 {_display: ブロック;} |
Firefox を差別化するための CSS ハック
1 つ目は、body:empty を使用して Firefox 1 と 2 を区別します。 2 番目のハッキングでは、すべての Firefox ブラウザ用の独自の拡張機能である moz が使用されます。 -moz は Firefox でのみ有効です。このハックを使用する場合、他のブラウザの影響を心配する必要はありません。
| /* Firefox 1 ～ 2 */ 本文:空 #firefox12 {表示: ブロック;} /* Firefox */ @-moz-document url-prefix() {#firefox { 表示: ブロック }} |
CSS ハックで Safari を差別化
Safari の CSS ハックは Firefox のハックと非常によく似ており、Safari ブラウザ独自の拡張機能である webkit を使用しており、Safari ブラウザでのみ有効です。
| /* サファリ */ @media 画面と (-webkit-min-device-pixel-ratio:0) {#safari { 表示: ブロック }} |
CSS ハックで Opera を区別
| /* オペラ */ @media すべておよび (-webkit-min-device-pixel-ratio:10000)、すべてではなく、および (-webkit-min-device-pixel-ratio:0) {head~body #opera { 表示: ブロック }} |
次に、すべてを組み合わせると、次のようになります
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <頭> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS ブラウザのハック</title> <style type="text/css"> ボディp { 表示: なし。 } /* オペラ */ html:first-child #opera { 表示: ブロック; } /* IE 7 */ html > 本文 #ie7 { *表示: ブロック; } /* IE6 */ 本体#ie6 { _display: ブロック; } /* Firefox 1 ～ 2 */ 本文:空 #firefox12 { 表示: ブロック; } /* Firefox */ @-moz-document url-prefix() { #firefox { 表示: ブロック } } /* サファリ */ @media 画面と (-webkit-min-device-pixel-ratio:0) { #safari { 表示: ブロック } } /* オペラ */ @media すべておよび (-webkit-min-device-pixel-ratio:10000)、すべてではなく、および (-webkit-min-device-pixel-ratio:0) { head~body #opera { 表示: ブロック } } </スタイル> </head> <本文> <p id="opera">Opera 7.2 ～ 9.5 です</p> <p id="safari">私は魔法のサファリです</p> <p id="firefox">Firefox を使用しています</p> <p id="firefox12">私は FF シニア Firefox 1 ～ 2 </p> <p id="ie7">私は囧IE7です</p> <p id="ie6">私は壊れた IE 6 です</p></body> </html> |
CSS Hack はさまざまなブラウザと互換性があり便利ですが、W3C 検証を通過できないため、使用する必要があるかどうかを検討する必要があります。