2021/02/03

CSSのベンダープレフィックス【現役エンジニアが解説】

PROGRAM

今回は、CSSのベンダープレフィックスについて、3種類に分け、簡単に解説していきます。

-ms-

-ms-はInternet Explorer用のベンダープレフィックスです。

なお、Edgeは現在、Chromeとほぼ同様のため、-ms-は使えません。

.hoge{
    -ms-transform:rotate(45deg);
 }

上記のコードでは、Internet Explorer用のtransformプロパティを指定しています。

-moz-

-moz-というベンダープレフィックスはFirefox用となります。

-moz-はFirefox独自のベンダープレフィックスで、他のブラウザでは使えません。

.hoge{
    -moz-transform:rotate(45deg);
 }

上記のコードでは、Firefox用にtransformプロパティにベンダープレフィックスを付けています。

-webkit-

ChromeやSafari用のベンダープレフィックスとして-webkit-が使えます。

-webkit-はChromeやSafari以外に、現在ではEdgeにも使うことができるようになっています。

.hoge{
    -webkit-transform:rotate(45deg);
 }

上記のコードでは、-webkit-のベンダープレフィックスを使い、ChromeやSafari用のtransformプロパティを書いています。

• facebook
• Tweet
• Read Later