CSS3で使える機能を使うためにブラウザ毎にわかるように付けておくもの。
新しい技術(勧告予定)なので先取りの技術だととブラウザに宣言しているようなもの
古いブラウザを無視するならベンダープレフィックスは必要無い
なので新しいブラウザを使っている前提なら必要が無い
border-radiusには必要無し
box-shadowはAndroidだけ微妙
2013年末時点で付ける必要のあるベンダー識別子一覧表｜Web制作 W3G
前後に「-」をつけて書く
-moz- Firefox向け
-webkit- safari、chrome向け
-ms- IE
-o- Opera
1 2 3 4 5 6 7 | -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!知恵袋)
勉強させてもらったサイト
- ベンダープレフィックス－CSSの基本 HTMLクイックリファレンス
- CSSで 書式が各ブラウザで同じものまで -webkit, -moz等で記述仕分けてあるのは何… – Yahoo!知恵袋
- そのベンダー接頭辞はいつまで書くの？ | Unformed Building
- ベンダープレフィックスの順序 | Web Design KOJIKA17
- ベンダープレフィックスの整理整頓｜Web制作 W3G
- box-shadow,border-radiusを書くときにCSS3のベンダープレフィックスは要らない | delaymania
- スマートフォンにおけるCSS3のベンダープリフィックスについてのメモ | BALLOG
- allWebクリエイター塾 受講の評価、感想、講義内容を綴ったブログ: ベンダープレフィックスはもういらない？