導入
CSS を使用しようとする Web デザイナーや開発者は、ブラウザーごとに異なるスタイル宣言が必要であることに気づくことは間違いありません。これらの煩わしさは、ブラウザーとそのバージョン間で CSS 実装の整合性の程度が異なることが原因です。条件付き CSS は、Internet Explorer の条件付きコメント構文のアイデアを取り入れ、それを CSS 宣言にインライン化することで、この問題を解決します。
基本的な使い方
条件付き CSS は主に、特定の CSS ステートメントを特定のブラウザーで使用する必要があるかどうかを示すために使用されます。もちろん、これを頻繁に行う必要はありませんが、ブラウザをターゲットにする必要がある場合には非常に便利です。 U4EA サポート リストを見ると、ほとんどのブラウザがこのメソッドをサポートしていることがわかります。
CSS 宣言またはブロックには、条件付き宣言をプレフィックスとして付けることができます。プレフィックスには次の 3 つの基本タイプがあります。
[{!} ブラウザの場合]
[{!} ブラウザのバージョンの場合]
[if {!} 条件ブラウザのバージョン]
! - ステートメントの否定 (例: NOT) - オプション
ブラウザ - 宣言が行われるブラウザ
「IE」 - インターネットエクスプローラー
「Gecko」 - Gecko ベースのブラウザ (Firefox、Camino など)
「Webkit」 - Webkit ベースのブラウザ (Safari、Shiira など)
「SafMob」 - モバイル Safari (iPhone / iPod Touch)
「Opera」 - Opera のブラウザ
「IEMac」 - Mac 版の Internet Explorer
「Konq」 - コンクロール
「IEmob」 - モバイル用IE
「PSP」 - プレイステーション・ポータブル
「NetF」 - ネット フロント (Sugar and Tomatoes について無知で申し訳ありません。これが何なのかわかりません)
version - ターゲットとするブラウザのバージョン
条件 - 算術演算子
lt - 未満
lte - 以下
eq - に等しい
gte - 以上
gt - より大きい
条件文の例をいくつか示します。
// 条件付き CSS 構文の例
[IEの場合] - ブラウザがIEの場合
[if ! Opera] - ブラウザが Opera でない場合
[IE 5 の場合] - ブラウザが IE 5 の場合
[if lte IE 6] - ブラウザが IE 6 以下の場合 (IE 5、IE 4 など)
[if ! gt IE 6] - ブラウザのバージョンが IE 6 以下の場合は、上記のステートメントと同等です。
多くのインスタンスは div が幅とパディングを備えたボックス クラスであると考えるためです。したがって、IE 5 でも問題なく動作するはずです (多くの人が IE 5 のサポートを中止しているようですが、これは典型的な例です)。 IE 5 のボックス モデルは標準ではないため、条件付き CSS を使用してこれを解決する方法は次のとおりです。
// 条件付き CSS ボックス モデルの例
div.box {
幅: 400ピクセル;
[IE 5の場合] 幅: 600px;
パディング: 0 100ピクセル;
}
ご覧のとおり、条件付き CSS を使用すると、IE の条件付きコメントの使用を必要とする複数のファイルの代わりに、CSS ファイルを 1 つだけ管理できます。これにより、メンテナンスが合理化され、コードがより明確になります。
さらに一歩進んで、条件付き CSS の重要な機能は、@import CSS 宣言が見つかると、インポートする必要があるファイルを自動的に開いて挿入することです。これにより、ブラウザは CSS ファイルに対して HTTP リクエストを 1 回行うだけで済むため、ページの読み込み時間が短縮されます。
条件付き CSS は主に IE ブラウザのさまざまなバージョンで使用されますが、条件付き CSS は、他のブラウザで修正するのが難しいバグ (主に Javascript を使用して修正する場合) に遭遇した場合にも非常に役立ちます。例としては、「display: inline-block」サポートが欠けていた Firefox 2 および Safari 2 の背景画像のバグが挙げられます。これらのバグは、これらのブラウザの最新バージョンでは修正されていますが、これらのブラウザが一定の市場シェアを占める場合、下位互換性は非常に重要です。