1

最近、CSS3 グラデーションについてよく読んでいますが、ベンダー プレフィックスの定義の順序が重要かどうかに興味があります。たとえば、次のようなものをよく見かけます。 

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B),
                                                            to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient
        (startColorstr='#0A284B', endColorstr='#135887');

ただし、フィルター宣言が上にある CSS グラデーション定義の例や、-ms-filter プレフィックスなどを含む他の例も時々見ます。

だから私は私の質問はこれらだと思います：

  • 定義の順序は重要ですか?
  • -ms-filter プレフィックスを使用する必要がありますか?

私が知る限り、通常の背景宣言が最初で、W3C 公式の線形グラデーションが最後である限り、それは問題ではありません。

上記で線形グラデーションに焦点を当てたことに注意する必要がありますが、同じ質問が放射状グラデーションにも当てはまると思います。

4

1 に答える 1

2

接頭辞付きの CSS を扱う場合、定義された正解は常に接頭辞付きのバージョンが最初に配置され、その後に接頭辞なしのバージョンが続きます。

したがって、 -webkit-whateverandはプレーン-moz-whateverな old の前に来なければならずwhatever、プレフィックスのないプレーンなバージョンを指定する必要があります (まだどのブラウザーでもサポートされていなくても)。

ブラウザによって認識される最後の定義済みバージョンが使用されるため、これは重要であり、ブラウザがそれを理解する場合は、プレフィックスのない「標準」バージョンを使用することが望ましいです。

-moz-接頭辞のないバージョンの上では、 、 などの個々の接頭辞付きバージョンの順序-webkit-は一般的に重要ではありません。特定のブラウザはそのうちの 1 つだけを認識する必要があるため、他のバージョンが何であるかは問題ではありません。これは見た目がすっきりしているので長さ順に並べたものですが、実際には問題ありません。

-webkit-上記の段落で「すべき」を強調したのは、一部のブラウザー (Opera など)が独自のプレフィックスを持っていてもプレフィックスを実装する場合がいくつかあるため-o-です。これは、人々が接頭辞を使用して-o-おらず、ブラウザが実際に接頭辞をサポートしているにもかかわらず、一部のサイトで機能を失っていると感じていたためです。このため、-webkit-最初に定義することをお勧めします。そうすれば、これが行われている場合に、ブラウザー独自のネイティブ プレフィックスが優先されます。

古い IE が標準の代わりにfilteror-ms-filterスタイルを使用するスタイルに関しては、IE がフィルターを使用する場合、標準の CSS を使用するべきではないため、これも問題ではありません。

IE がfilterと標準 CSS の両方を認識したとしても、それらは別個のスタイルとして認識されるため、順序は問題になりません。CSS を特定の順序で配置するポイントは、ブラウザに一方を他方から選択させることですが、同じことをしている場合でも をオーバーライドしたり、それによってオーバーライドされたりfilterしないため、無関係です。background

これらが衝突する可能性のあるいくつかのケースがあります。たとえば-ms-filter、 と standardtransform:rotate()を一緒に使用してローテーションを行うと、IE9 で両方が行われ、混乱が生じます。IE<=8 だけが知って-ms-filterおり、IE10 はまったくサポート-ms-filterしていないため、影響を受けるのは IE9 だけですが、純粋な CSS で回避する方法がないため厄介です。ブラウザ固有のコード、CSS ハック、ポリフィル スクリプトのいずれかに頼らなければなりません。ただし、IE9 は CSS 標準をサポートしていないため、この点はグラデーションには当てはまりません。

于 2013-06-05T15:30:36.857 に答える