ベンダープレフィックスの使い方

まずはベンダープレフィックスとはなんでしょうか。

ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。

参考文献:HTMLクイックリファレンス

CSS3を使う際に使用しますが、これの順番がいまいちわからない・・・

-webkit-border-radius: 10px; /* Chrome、Safari */
-moz-border-radius: 10px; /* firefox */
-o-border-radius: 10px; /* opera */
-ms-border-radius: 10px; /* IE */
border-radius: 10px; /* ベンダープレフィックスなし */

こんな感じでプロパティの前に
「-webkit-」
「-moz-」
「-o-」
「-ms-」
をつけます。

詳しくは下記リンクをどうぞ
HTMLクイックリファレンス ベンダープレフィックス

さてここで気になる部分

ベンダープレフィックスを書く際の順番

CSSは上から順に読んでいって、最後に書かれたプロパティが優先的に使われますよね。
ちょっとした疑問ですが、ベンダープレフィックスを書く際の順番って何がいいのかなって。

一番優先したいのってベンダープレフィックスなしのものだと思うので、それは一番下に書くとして
次は???
「-webkit-」?「-moz-」?「-o-」?「-ms-」?

適当でいいのかな。
スタイルシートの見栄えを意識して文字の多い順に並べていいものなのか。
それともきちんと何かに基づいた順序があるのか・・・

もうちょっと色々調べてみようと思います。

関連記事