1

特定のCSS3プロパティ/値と互換性のないブラウザの「フォールバック」として使用されている場合、CSSプロパティ/値の配置は重要ですか?

たとえば、CSS3calc()関数は特定のブラウザでのみ機能します。幅が親の 1/3 の div が必要だとしましょう。互換性のあるwidth:calc(100%/3)ブラウザーでこれを実現するために使用できます。calc()次に、互換性のないブラウザーの場合width:33.33%、フォールバックとして使用できます。

私の質問:width:33.33%上または下に配置width:calc(100% / 3)すると、その効果に違いが生じますか? 一方の階層は機能し、もう一方の階層は機能しないでしょうか?

つまり、CSS プロパティを次のように並べ替えます。

div.column {
    width: 33.33%; /* Fallback in case the browser does not support calc() */

    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
}

次のように注文するのとは異なります。

div.column {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);

    width: 33.33%; /* Fallback in case the browser does not support calc() */
}
4

2 に答える 2

2

はい、順番は重要です。ブラウザーは最後に理解したルールを使用するため、2 番目の例では、それを理解するブラウザーの calc() 呼び出しを無効にします。

W3が述べているように：

...2 つの宣言の重み、起源、特異性が同じ場合、後者の指定が優先されます。

于 2013-02-16T20:35:45.057 に答える
1

はい、重要です。「フォールバック」を最初に配置する必要があります。

理由: ブラウザは最後にサポートされた宣言されたスタイルのみを適用するため、たとえば次の場合:

div {
    width: 400px;
    width: 300px;
    width: 200px;
    width: 100px;
}

...のみ100px適用されます。これは、ベンダー プレフィックスが関係している場合に一般的です。

div {
    -moz-property: foo;
    property: foo;
}

この場合、Mozilla ブラウザーは、サポートされている場合は標準 を適用し、そうでない場合 (サポートされている場合)propertyはベンダー固有にフォールバックします。-moz-property通常、ブラウザーは複数のベンダー プレフィックスをサポートしないため、ベンダー プレフィックスの実際の順序は重要ではありません。

于 2013-02-16T20:37:49.970 に答える