CSSベンダープレフィックス無しの指定について

Question

CSSで、ベンダープレフィックス付きのプロパティ（-webkit-gradientとか）
を使用する場合、ベンダープレフィックス無しの指定も併記すると思いますが、
その際、どちらの書き方がいいのでしょうか。
順序を変更することで、ブラウザによっては動作が変わったりするのでしょうか。

例１）ベンダープレフィックス付きが先
-webkit-gradient(...)
-moz-linear-gradient(...)
linear-gradient(....)

例２）ベンダープレフィックス付きが後
linear-gradient(....)
-webkit-gradient(...)
-moz-linear-gradient(...)

Answer 1

基本的にはベンダープレフィックス付きが先、無しが後です。
なぜかというと、CSSはセレクタ等における優先度が同じ場合、後に書かれた方が優先されるからです。
例として

#content {
    background-color: red;
    background-color: blue;
}

とした場合、#contentの背景色は青色になります。

ベンダープレフィックスは、その機能が将来的に正式サポートされた時に外すべきものです。
なので

#content {
    -webkit-gradient(...) 
    -moz-linear-gradient(...) 
    linear-gradient(....) 
}

としておけば、正式サポートされた時にベンダープレフィックス無しのlinear-gradientを優先させることができます。

Comments

[ylang365]

なるほど。わかり易い解説ありがとうございます。

Answer 2

一般的にはこちらです。
-webkit-gradient(...)
-moz-linear-gradient(...)
linear-gradient(....)

最終的には全てのブラウザがプレフィックス無しの記述を理解するようになります。CSSは同じ記述が有った場合は後から書いた記述が有効になるため、一番正しい記述を一番最後に書くのがいいかと思います。