●トップ > 勉強中 > HTML5+CSS3 > １回目　CSSを書くにあたって「ベンダープレフィックス」

１回目　CSSを書くにあたって「ベンダープレフィックス」

2014-11-14

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、
それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などの
ベンダープレフィックスを付ける必要があるようです。
© 引用サイト⇒ベンダープレフィックスさまサイトより）

★動くCSS3を書くにあたって、必ずHTML5で書くこと！

■ 主要ブラウザのベンダープレフィックス


-moz-　　…… Firefox
-webkit-　…… Google Chrome、Safari
-o-　　　　…… Opera
-ms-　　　…… Internet Explorer



■ border-imageプロパティで画像ボーダーを機能させるには、 
FirefoxやGoogle Chromeなどのそれぞれのブラウザ向けのベンダープレフィックスを付ける必要があるようです。


-moz-border-image: url("bg_dot.png") 15 round;　　　　 // Firefox向け
-webkit-border-image: url("bg_dot.png") 15 round;　　　// Google Chrome、Safari向け

CSS3が勧告されるまでには、まだ時間がかかりそうですし、
動くデザインはとても魅力なんですが、
Firefoxなどのブラウザでは一部がベンダープレフィックス無しで動作するようになっている一方、
新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあるようです。

ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、
今後の仕様策定の進展やブラウザのバージョンアップに備えて、
ベンダープレフィックス無しの指定を併記しておくほうが良いようです。

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

う～～～～ん。。動くデザインはかっこいいんだけれど、
ちょっと面倒かなあ。
すべてのブラウザで同じ動作がみられないと、クレームきそうだし。。悩む。。