7

ブラウザー間の互換性を実現するために、ベンダー固有の拡張機能と標準の CSS3 構文の両方を使用する傾向があります。CSS3 がまだドラフト段階であることは承知していますが、すでに使用を開始しています。しかし、問題は、それらが発生する順序が非常に重要かということです。

たとえば、ここを見てみましょう

-moz-border-radius: 10px;
border-radius: 10px;

これはブラウザ固有border-radiusに適用され、その後標準の方法にフォールバックします。後者は無視されることが期待されますが、それでもなお.

同様に順番を入れ替えて

border-radius: 10px;
-moz-border-radius: 10px;

現在、これは最初に標準の構文を試してから、ブラウザベースの拡張機能にフォールバックします。

注文による違いはありますか？パフォーマンスの面でもそうかもしれません。

4

3 に答える 3

7

現在、これは最初に標準の構文を試してから、ブラウザベースの拡張機能にフォールバックします。

これは誤解を招く表現である可能性があります。準拠ブラウザは、標準のプレフィックスなしのプロパティを最初に試しますが、標準に加えてプレフィックス付きのプロパティもサポートしている場合は、そのプレフィックスも適用します。これは通常、接頭辞付きの宣言とブラウザの潜在的に非標準のそのプロパティの実装によって標準宣言がオーバーライドされ、最初に標準プロパティを持つ目的を無効にします。

接頭辞なしのプロパティを最後に宣言する必要があるのは、プロパティがルール内でカスケードされる方法であるためです。ブラウザは常に最後に適用されるプロパティを使用します。プロパティのプレフィックス付きバージョンとプレフィックスなしバージョンは、カスケードに関して同じプロパティとして扱われるため、そのプロパティを適用するときにブラウザーが標準に準拠するために最善を尽くす必要があります。1

ブラウザーがプレフィックスを実装しているが標準を実装していない場合は問題ありませんが、両方を実装している場合は、代わりに標準を使用するようにする必要があります。これを行うには、標準プロパティを最後に宣言します。

1 私が知る限り、これは仕様によって規定されているわけではありません。仕様に関する限り、ベンダー拡張機能は非標準であり、その実装を説明することはできません。ベンダー プレフィックスの構文は仕様で説明されていますが、実装は完全にベンダーの裁量に委ねられています。

ただし、標準化されるプロパティまたはルールのプレフィックス付きバージョンを実装する場合、プレフィックス付きバージョンとプレフィックスなしバージョンの両方を常に互いのエイリアスとして扱うことは、ほとんどのブラウザー開発者によって合意された規則です。

于 2012-09-21T13:30:06.963 に答える
2

CSS3 プロパティを記述する場合、最新の知恵では、「実際の」プロパティを最後にリストし、ベンダー プレフィックスを最初にリストします。

プレフィックスなしのプロパティを含める場合に考慮すべきもう 1 つのことは、ベンダー プレフィックス付きのバージョンの後に配置することです。関連する CSS3 仕様で指定されているように、ブラウザーがプロパティの標準バージョンを実装する場合、実験的なブラウザー固有のバージョン (下位互換性を維持するために引き続きサポートされる可能性が高い) の代わりに、その実装を使用することをお勧めします。 . 最後に配置すると、ベンダー接頭辞の実装がオーバーライドされることが保証されます。

CSS3 プロパティの順序を参照してください。

参照 :ベンダープレフィックスのない CSS 3 プロパティを記憶する (そしてそれらを最後に置く)

于 2012-09-21T10:15:46.003 に答える
2

将来の標準バージョンを最後のままにしておく限り、プレフィックスの順序は重要ではありません。

ブラウザがプレフィックスのサポートを中止すると、単純にルールを無視して標準バージョンを実行します。

ps: AK と同じですが、より単純なので、すべてのページを読む必要はありません。

于 2012-09-21T13:28:03.900 に答える