-moz-とか-webkit-、ベンダープレフィックス

CSS3で使える機能を使うためにブラウザ毎にわかるように付けておくもの。
新しい技術(勧告予定)なので先取りの技術だととブラウザに宣言しているようなもの
古いブラウザを無視するならベンダープレフィックスは必要無い
なので新しいブラウザを使っている前提なら必要が無い

border-radiusには必要無し
box-shadowはAndroidだけ微妙
2013年末時点で付ける必要のあるベンダー識別子一覧表|Web制作 W3G

前後に「-」をつけて書く
-moz- Firefox向け
-webkit- safari、chrome向け
-ms- IE
-o- Opera

-moz-border-image: url("bg_dot.png") 15 round;
   // Firefox向け
-webkit-border-image: url("bg_dot.png") 15 round;
   // Google Chrome、Safari向け
border-image: url("bg_dot.png") 15 round;
   //ベンダープレフィックス無し(標準)も併記する
    (ベンダープレフィックス-CSSの基本 HTMLクイックリファレンス)

ベンダープレフィックス無しは最後に書く

原則として、ベンダ接頭辞(-moz-、-webkit-、-ms-、-o-)付きのものは、実験的なものや、仕様の固まっていない先行実装のものを意味しますので、「一般のページには使わないで下さい」という目印です。なぜ接頭辞のルールができたかと言えば、かつてブラウザごとに独自のものを追加する競争があり、互換性がなくなってしまったからです。そのため、互換性を損なう可能性のあるものについては、接頭辞できちんと伝えるというルールになったわけです。仕様が固まれば接頭辞は外されます。また、「今後、こういう方向でやりますが、どうですか」と気の早い(!)ページ制作者に伝え、フィードバックをもらうという目的もあります。アルファ版、ベータ版ですね。それはページ制作者の責任でやって下さい。一応、こういうのをやりやすくするための CSS Variables という仕様も策定中です。(Yahoo!知恵袋)

勉強させてもらったサイト

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です