読者です 読者をやめる 読者になる 読者になる

かきのマネー

お金と良いモノ

CSSのベンダープレフィックスは必要?不要?

スポンサーリンク

カスタマイズ

こんにちは!かきたろー(@kakitaroo_)です。

 

カスタマイズのために、CSSの勉強をちょこちょこしています。

その中で「ベンダープレフィックス」っていうものがあります。

聞いたことない人にはなんのこっちゃわからんと思いますが、CSSを書くときに必要だったものです。

過去形にしている理由を書いていきます。

 

ベンダープレフィックスとは

 

代表的な例では

.border-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

みたいに -webkit- などハイフンで囲まれているものがベンダープレフィックスです。

CSS3などで採用される新しい機能をどれだけ使えるかブラウザによって異なるので、対応させるためにそれぞれ必要になるものです。

 

意味は、

-o- = Opera
-ms- = Internet Explorer
-moz- = Mozilla Firefox
-webkit- = Webkit (Google Chrome など)

これに加えて、ベンダープレフィックス無しも記述しておくべきです。

なぜかというと、いずれベンダープレフィックスなしで動作するようになるからです。

そのときにベンダープレフィックスなしのものがないとエラーが起きます。

 

これを初めて知った時の感想

めんどくさっっ!

 

ベンダープレフィックスなしで動くかどうか 

このページを見ればわかります。

Can I use... Support tables for HTML5, CSS3, etc

 

すでにかなりの機能が動作するようになっていますね。

 

なくてもいいんじゃない?

ブログで使うようなCSSならなくてもいいんじゃないかと思います。

Chrome、Safari、Firefox、Edge以外の古いブラウザは切り捨ててもいいのでは?Operaとか使ってる人いるの??

ないほうがコードが少なくてすっきりしますよね。

 

つい最近ベンダープレフィックスの存在を知ったような素人の意見ですが、間違ってたら教えていただけるとうれしいです。