6

昨日の Eric Bidelman の Google I/Oプレゼンテーション@supportsで . ただし、次のような明白な疑問が生じます。

ブラウザが@supportsCSS のみの使用をサポートしているかどうかを確認する最良の方法は何ですか?

display: block現在、サポートされているかどうかを確認するだけでいじっています。この方法は明らかに機能しますが、これが最も実用的なアプローチであるかどうかはわかりません。

body { background:#fff; font-family:Arial; }
body:after { content:'Ek! Your browser does not support @supports'; }

@supports (display:block) {
    body { background:#5ae; }
    body:after { color:#fff; content:'Your browser supports @supports, yay!'; }
}

これが動作中のJSFiddleデモです。

これらの試行は機能しません(少なくとも Chrome Canary では):

@supports (@supports) { ... }
@supports () { ... }
@supports { ... }
4

3 に答える 3

5

@supports現在、プロパティと値の組み合わせのみをテストし、それ以外は何もテストしません。他のオプションはどれも有効ではないため機能しません (最後のものを含む、ちょうど at-キーワードの後に​​左中かっこが続きます!)。プロパティと値のペアの要件は、 の文法によって決まります。これは、仕様@supportsで確認できます。

@supports実装されているかどうかに関係なく、すべてのユーザー エージェントで動作することが保証されていることがわかっているプロパティ/値のペアをテストするだけです。@supportsこれにより、代わりにそのサポートに焦点を当てて、そのプロパティ/値の組み合わせを実装するが実装しないユーザー エージェントに遭遇する可能性が排除されます@supports。

あなたの与えられた例でdisplay: block十分です。カスケードを使用して、ブラウザーが実装していないかどうかを確認するために、それをサポートしているブラウザーのルール@supports内で宣言をオーバーライドすることも許容されます (とにかくそれを行う唯一の明白な方法です)。@supports

于 2013-05-16T10:37:00.797 に答える
2

David walsh ブログには、@supportsリンクに関するすばらしいチュートリアルがあります。

確かに、JsFiddle は Chrome Canary で完全に動作します。

@supports の有効な構文は次のとおりです。

@supports(prop:value) {
    /* more styles */
}

/* Negation */
@supports not(prop:value) {
    /* more styles */
}

/* `or` keyword*/
@supports(prop:value) or
         (prop:value){
    /* more styles */
}

/* `and` keyword*/
@supports(prop:value) and
         (prop:value){
    /* more styles */
}

/* `or`, `and` keywords*/
@supports(prop:value) or
         (prop:value) and 
          (prop:value) {
    /* more styles */
}
于 2013-05-16T10:21:56.173 に答える
2

これはおそらく機能しませ@supportsん.CSSのみでサポートされているかどうかを確認することはできません.あなたの例はここでは完全に問題ありません.

@supports (@supports) {
   /* Styles */
}

これは実際には機能しません。Chrome Canaryの可能性があります。これは問題@supportsありませんが、括弧の間をチェックすると失敗します。なぜですか? property: valueルールではなく、括弧内にCSSペア@が必要です。実際にプロパティが有効かどうかをチェックし@supports (@font-face)ます。

を使用すると、特定のスタイルがブラウザでサポートされているかどうかを確認するために@supports呼び出されるキーワードが付属してnotいます。

例

@supports (-webkit-border-radius: 6px) {
    div:nth-of-type(1) {
        color: red;
    }
}

@supports not (-moz-border-radius: 6px) {
    div:nth-of-type(2) {
        color: blue;
    }
}

デモ(注: 現在のところ、これは chrome canary でのみ動作します)

説明 ：

@supports (-webkit-border-radius: 6px)Chrome Canary で、呼び出されたプロパティ-webkit-border-radiusがサポートされているかどうかを確認します。サポートされている場合は、最初の色を変更しますdiv。Chrome redCanary はプロパティをサポートしていますが、2 番目のプロパティは Chrome がプレフィックス付きのプロパティを-webkitサポートしていないため失敗します。ここで-moz使用しているため、青色にペイントしますnot

@supports not (-moz-border-radius: 6px)
        ---^---

よくある質問

1) ブラウザにスタイルが適用されないのはなぜですか?

これは、ブラウザがまだルールをサポートしていないためです。ブラウザはルール@supportsを無視するため、何も適用されません。@supports

W3Cから

「@supports」ルールは、ユーザー エージェントが CSS のプロパティと値のペアをサポートしているかどうかをテストする条件付きグループ ルールです。

于 2013-05-16T10:24:27.387 に答える