CSS条件付きルールは、その名前が示すように、CSS自体に適用できる条件付きの構成要素です。 それらは、論理演算子
and 、
or 、
notを使用して条件式をグループ化する機能を備えた、現在のブラウザによるプロパティのサポートのチェックを実装します。 この投稿では、とりわけ、このCSS3モジュールの構文とそのブラウザーの現在のサポートについてお話ししたいと思います。
新機能
たとえば、
CSS条件付きルールと条件付きコメントの質的な違いは何ですか？ 私は2つの主要なものを選び出します：
- これは、ブラウザの名前とバージョンではなく、指定されたプロパティのブラウザサポートのテストです。
- これはCSSに直接条件コンストラクトを実装するため、CSSプロパティの「アプリケーションのフロー」を制御できます。また、異なるブラウザー用に準備されたスタイルシートを接続するHTMLコードを選択しません。 簡単に言えば、必要なすべてのブラウザーでサポートされていないプロパティを実装する必要がある場合、劣化のための柔軟なツールがあります。
しかし、実際には？
構文は簡単です。 たとえば、
calc()関数を使用してフォントサイズを計算する
font-sizeプロパティがあり、この関数の引数として、ルート
body要素のフォントサイズからフォントサイズを計算する式を渡します。 しかし、現在サポートしているブラウザの数はいくつですか？ 十分ではありません。 残りはどうしますか？ CSS3条件を使用すると、質問には次の答えが返されます。
body { font-size: 14px; } @supports (font-size: calc(1rem + 12px)) { h1 { font-size: calc(1rem + 12px); } } @supports not (font-size: calc(1rem + 12px)) { h1 { font-size: 26px; } }
この例は冗長ですが、ロジックは表示されます。
@supportsルールは、条件構造の前にあります。 条件式は括弧内にあるもので、常に括弧が必要です。 条件式を
andおよび
or演算子
and組み合わせ
or 、
not式を否定したり
notます。
同時に、作成した条件が複数の方法で解釈される可能性がある状況を回避するために、括弧を使用して条件をグループ化する必要があります。これは例でより明確です。 仕様の例を考えてみましょう。
@supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) { }
構文は正しいように思えますが、それ以上ですか？ 問題は、この設計をさまざまな方法で解釈できることです。 つまり、[（
transitionまたは
animation ）and（
transform ）]または[（
transition ）or（
animation and
transform ）]のサポートが必要ですか？ 不明 そのため、可能なオプションを説明するために、今したようにかっこを使用する必要があります。 同じコードの次のバリエーションが正しいでしょう。
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) { } @supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) { }
さて、いつ？
そして現在のサポート状況について。 仕様自体は作業ドラフトの状態です。 現在の安定バージョンでは、これは誰もサポートしていません。 8月3日、Firefox 17.0a1で
@supportsサポートが登場しました。つまり、Firefox Auroraブランチに含まれ、10月のどこかでベータになります。 他のブラウザでのサポートについては何も聞いていません（たぶん行商人の誰かが教えてくれるでしょう）。 Firefox 17自体では、仕様がまだ十分に安定していないと開発者が判断した場合、設定でこのオプションが無効になる場合があります。
UPD： Opera 12.10 Betaは@supportsサポートを導入しました。