WordPressのテーマ作成（2）　CSS3にチャレンジ　ベンダープレフィックス

Tweet

WordPressのデザインを作成する前にまずCSS3を身につけたいと思います。
（テーマ作成のカテゴリに入れていいのか迷いましたが、
テーマを作成するための一連の流れなので「テーマ作成」カテゴリに入れました。）

CSS3を使ったことがないとはいえ、時々CSS3のソースを見かけることはあります。
そこで気になっていたのが
-moz-や-webkit-
の部分。
調べてみてベンダープレフィックスと呼ばれる物だとわかりました。

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

ベンダープレフィックスとは、linear-gradientプロパティの場合でしたら、
以下のような記述の中の-moz-や-webkit-の部分です。

background: -moz-linear-gradient(top, rgba(18, 55, 86, 0.82), rgba(18, 55, 86, 1)) ;
background: -webkit-linear-gradient(top, rgba(18, 55, 86, 0.82), rgba(18, 55, 86, 1));
background: -o-linear-gradient(top, rgba(18, 55, 86, 0.82), rgba(18, 55, 86, 1));
background: -ms-linear-gradient(top, rgba(18, 55, 86, 0.82), rgba(18, 55, 86, 1));

これは、「正式に採用されていない、ブラウザ独自の拡張機能です」ということを明示するためのものだそうです。

ベンダープレフィックスは対象のブラウザによって指定の仕方が違います。

-moz-　Firefox
-webkit- Google chrome、Safari
-o- Opera
-ms- IE

CSSに記載する際には、通常のプロパティとベンダープレフィックス有りの両方を記載した方がいいようです。

疑問点が解消されたので、次回から実際にCSS3を試していきます。

にほんブログ村 パソコン・周辺機器

Tweet