こんにちは！インターン10月生のニシグチです！
今日はベンダープレフィックスについて調べたので、そのことについて書いていこうと思っています。
まず、そのベンダープレフィックスとは？
CSSに書いてあるこんなヤツです。
-o-border-radius: 8px;
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
これはborder-radius（角丸設定)を書くときに、-webkit-やら-moz-なんかをプロパティの前に書いてあるものなんですが、私が独学でWebを勉強し始めたときにこれを見て、ホントにどういう意味かわかりませんでした。
よくわからないけど書いとかないといけない謎の記述みたいな扱いをしてました。
この-o-など記述しているものは、ブラウザの種類を表しています。
-o- … Opera
-ms- … IE(Internet Explorer)
-moz- … FireFox
-webkit- … Google Chrome, Safari
これをborder-radiusの前につけ、最後に何もつけていないプロパティを書いています。
何のためにベンダープレフィックスを書いているのかといえば、CSS3がまだ草案段階だったときに、各ブラウザが試験的に導入してたものを使用する時に記述していたものです。
なので、今はベンダープレフィックスを書かなくていい事が多いみたいです。
というのも、ブラウザは段階的にCSS3のプロパティを実装していってるので、ブラウザによっては使えるものと使えないものが入り混じっている状況です。
最後にベンダープレフィックス無しの記述をする。
なので正式に実装していなかったプロパティが、ある日実装されることもあります。
そしてブラウザによっては実装されたことによって、ベンダープレフィックスで記述したものが正しく表示されない、なんてこともあるようです。
それを回避するために、最後にベンダープレフィックス無しのプロパティを書いて、実装された時に問題が起こるのを防いでいます。
なのでborder-radiusやbox-shadowなんかは、ほぼほぼブラウザが実装しているので、ベンダープレフィックスは不要のようです。
これを書くとその分、書く手間とデータ量が増えるので、実装されたプロパティのベンダープレフィックスは外すことが推奨されています。
しかしまだプロパティによっては対応していないブラウザもあるという事なので、それが使えるのかどうか調べないといけません。
というワケでベンダープレフィックスの話でした。
私が前に読んだCSSの本には、「とりあえず今はそれを書いておけ！」みたいに書いていたので、なんか苦手意識が生まれ、しばらく意味を調べもせず放置していました。
独学などしている方がおられましたら、今日のこのブログを見て、ベンダープレフィックスに苦手意識なんて持つことなくサッと通ってください。
それでは今日はこの辺で失礼します。
ニシグチ