KaoLog

ぽんこつwebデザイナーのスキルのメモ

ベンダープレフィックスについてまとめてみた

f:id:s2lybb:20170508225926p:plain

ベンダープレフィックスについてまとめました

そもそもベンダープレフィックスとはなにか・・・

ベンダープレフィックスは、css3を使用する際に必要となり、プロパティの前につけるキーワード(識別子)みたいなものです。

このベンダープレフィックスにより、全てのブラウザで動きを統一することができます。

実際にベンダープレフィックスを見てみましょう

-o-border-radius: 8px;
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

 

ベンダープレフィックスは全部で4つあります。

 

1:-webkit-

-webkit-

これはGoogle ChromeSafariに対して使われるベンダープレフィックスです。

 

2:-ms-

-ms-

これはInternet Explorerに対して使われるベンダープレフィックスです。

 

3:-o-

-o-

これはOperaに対して使われるベンダープレフィックスです。

しかし、Operaは現在、-webkit-を使用することになったため、現在、この-o-は使われていません。

 

4:-moz-

-moz-

これはFire Foxに対して使われるベンダープレフィックスです。

 

ベンダープレフィックスの記述の順番

ベンダープレフィックスの書き方のルールとして記述に順番があります。

-webkit-border-radius:8px; 
-moz-border-radius:8px;
-ms-border-radius:8px;
border-radius:8px;

ひとつひとつ説明していきたいと思います。

まず、-webkit-を、Chromesafari向けに書きます。

次に、-moz-によって、Firefoxにデザインを反映させます。

そして、-ms-によって、IEにデザインを反映させます。

最後に、本来のプロパティをかけます。

 

ベンダープレフィックスが必要なもの

css3が主流になっていくなかで、どんなプロパティにベンダープレフィックスが必要なのかを調べるためのサイトとして、Can I useがあります。

調べたいプロパティを入力すると、どのバージョンで使えるかを示してくれます。

以前まではベンダープレフィックスが必要だったものも、時が経つにつれ、ベンダープレフィックスが必要無くなるものもあるので、その都度調べることをおすすめします。