今日から1年の最後の月！

2022年の終わりがだんだん近づいてきましたね！

でも、日本のCOVID-19の終息はなかなか見えてこないんですね…

マスク生活はいつまで続くねん？

そろそろマスク生活から脱却したいのに！

世界のみんなを見たらほとんどマスクしてない人多いわ！

日本だけマスク生活をつつけてたら余計にしんどくならへん？

そろそろ、政府の役員たち、そろそろマスクなしの生活しても大丈夫ですって発令してほしいものです！

さてと、本題に入ろう！

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

Vendor Prefix…ベンダー接頭辞のことで、試験的・非標準なCSSプロパティに対して付けられます。

CSSの接頭辞に使われるプロパティ

• -webkit- (Chrome, Safari, 新しいバージョンの Opera, ほぼすべての iOS ブラウザー (Firefox for iOS を含む)。基本的に WebKitベースのブラウザーすべて)
• -moz- (Firefox)
• -o- (WebKit 導入前の古い Opera)
• -ms- (Internet Explorer と Microsoft Edge)

ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。

将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。

ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子（vendor identifier）でブラウザの種類を特定します。

また、CSS3を使用するときに、各ブラウザが認識させるために、ベンダープレフィックスを合わせてプロパティを設置しとかないとダメです。

例）角丸を付ける場合
（現在のブラウザでは当たり前のように認識していますが、昔のブラウザでは認識できなかったところが多かったです。）

.box{
	border:1px solid #333;
	-o-border-radius:5px 5px 5px 5px 5px;/* Operaのブラウザを認識させる */
	-ms-border-radius:5px 5px 5px 5px 5px;/* IE, edgeのブラウザを認識させる  */
	-moz-border-radius:5px 5px 5px 5px 5px;/* Fire Foxのブラウザを認識させる */
	-webkit-border-radius:5px 5px 5px 5px 5px;/* Google Chrome, Safariのブラウザを認識させる */
}

上記のようにベンダープレフィックスを加えて各ブラウザごとに認識させるためのコードを使用しておりました。

CSS3の中で新しいプロパティが増えていきますが、各ブラウザを認識させるためには、絶対にベンダープレフィックスを合わせて記述しとかないとダメです。

もし、各ブラウザごとに機能が普及したらベンダープレフィックスを合わせて記述する必要がなくなります。

各ブラウザの実装状況を調べるなら、こちらサイトの中から参考するといいでしょう。

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

では、また！