45

私は今、次のようなものを千回書いたと思います：

.foo {
    border-radius: 10px;         /* W3C */
    -moz-border-radius: 10px;    /* Mozilla */
    -webkit-border-radius: 10px; /* Webkit */
}

しかし、それらの順序が重要かどうかを考えたのは今だけですか？そのうちの1つだけが読み取られるので、との間は関係-moz-*ありませんが、W3C標準を最初または最後に実行する方が（将来を保証するなどの点で）優れていますか？-webkit-*

4

2 に答える 2

50

ベストプラクティスは、接頭辞のないプロパティを最後に持つことです。

.foo {
    -moz-border-radius: 10px;    /* Mozilla */
    -webkit-border-radius: 10px; /* Webkit */
    border-radius: 10px;         /* W3C */
}

最後に-webkit-border-radius使用border-radiusされたものが使用されます。

-webkit-border-radiusは「実験的」プロパティです。実装には仕様からの逸脱が含まれている可能性があります。の実装border-radiusは、仕様の内容と一致している必要があります。

W3C実装は、それをサポートするすべてのブラウザー間の一貫性を確保するために、利用可能なときに使用することをお勧めします。

于 2011-08-16T15:21:41.373 に答える
20

注文は重要です。コードを将来にわたって保証するには、W3C仕様を最後にする必要があるため、カスケードはベンダープレフィックスバージョンよりも優先されます。

.foo {
    -moz-border-radius: 10px;    /* Mozilla */
    -webkit-border-radius: 10px; /* Webkit */
    border-radius: 10px;         /* W3C */
}

たとえば、将来的にはGoogle Chromeがをサポートしますが、以前のバージョンとの下位互換性border-radiusもサポートします。-webkit-border-radiusChromeがこの.fooクラスに遭遇すると、最初に-webkitが表示され、次に標準が表示され、デフォルトで標準になります（Webkitは無視されます）。

于 2011-08-16T15:23:36.907 に答える