ベンダー プレフィックス: ブラウザ エンジン プレフィックスが必要なのはなぜですか?

ベンダープレフィックスとは何ですか?

ベンダー プレフィックス - ブラウザー エンジン プレフィックスは、CSS プロパティの前に置かれる小さな文字列で、そのプロパティが特定のブラウザー レンダリング エンジンでのみ認識され、有効になることを保証します。 Google Chrome と Safari は WebKit レンダリング エンジンを使用し、Firefox は Gecko エンジン、Internet Explorer は Trident エンジンを使用し、Opera は以前は Presto エンジンを使用していましたが、後に WebKit エンジンに切り替えました。ブラウザ エンジンは通常、他のエンジンのプレフィックスでマークされた CSS プロパティを実装しません。ただし、WebKit ベースのモバイル ブラウザは非常に人気があるため、Firefox などのブラウザもモバイル バージョンで WebKit エンジン プレフィックスでマークされたいくつかの CSS プロパティを実装しています。

ブラウザ エンジン プレフィックス (ベンダー プレフィックス) とは何ですか?

-moz- /* Firefox および Mozilla ブラウザ エンジンを使用するその他のブラウザ*/
-webkit- /* Safari、Google Chrome、その他の Webkit エンジンを使用するブラウザ*/
-o- /* Opera ブラウザ (初期) */
-ms- /* Internet Explorer (必ずしもそうとは限りません) */

ベンダープレフィックスが必要なのはなぜですか?

これらのブラウザ エンジン プレフィックス (ベンダー プレフィックス) は、主にさまざまなブラウザで新しい CSS3 プロパティ機能を実験またはテストするために使用されます。それは次の3つの点に要約できます。

• まだ標準化されていない、あるいは今後も標準化されない可能性のあるCSSプロパティを試してみる
• 新しい標準 CSS3 プロパティの実験的な実装
• CSS3 の新しいプロパティに対する同等の意味論のパーソナライズされた実装

これらのプレフィックスがすべて必要なわけではありませんが、通常は追加しても問題はありません。プレフィックスなしのバージョンを最後の行に置くことを忘れないでください。

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-境界線の半径: 10px;
境界線の半径: 10px;

いくつかの新しい CSS3 プロパティは長い間実験的なものであり、一部のブラウザではすでにこれらのプロパティのプレフィックスの使用が停止されています。 Border-radius プロパティは非常に典型的な例です。最新のブラウザはプレフィックスなしの Border-radius 属性をサポートしています。

ベンダープレフィックスを必要とする CSS3 プロパティ

ベンダー プレフィックスを追加する必要がある主なプロパティは次のとおりです。

• @キーフレーム
• 移動と変換のプロパティ (transition-property、transition-duration、transition-timing-function、transition-delay)
• アニメーションのプロパティ (animation-name、animation-duration、animation-timing-function、animation-delay)
• 境界線の半径
• ボックスシャドウ
• 背面の可視性
• 列のプロパティ
• フレックスプロパティ
• 遠近法プロパティ

リストはこれで終わりではなく、今後も増え続ける予定です。

ベンダープレフィックスの使用

ベンダー プレフィックスが必要な場合は、プレフィックスを最初に配置し、標準プレフィックスを最後に配置するのが最適です。例えば：

/* シンプルなプロパティ */
.myClass{
	-webkit アニメーション名: fadeIn;
	-moz-アニメーション名: fadeIn;
	-o-アニメーション名: フェードイン;
	-ms-アニメーション名: フェードイン;
	animation-name: fadeIn; /* プレフィックスなしのものを最後に置く*/
}
/* 複雑な属性キーフレーム */
@-webkit-keyframes フェードイン {
	0% { 不透明度: 0; } 100% { 不透明度: 0; }
}
@-moz-keyframes フェードイン {
	0% { 不透明度: 0; } 100% { 不透明度: 0; }
}
@-o-keyframes フェードイン {
	0% { 不透明度: 0; } 100% { 不透明度: 0; }
}
@-ms-keyframes フェードイン {
	0% { 不透明度: 0; } 100% { 不透明度: 0; }
}
/* プレフィックスのないものについては最後に置く */
@keyframes フェードイン {
	0% { 不透明度: 0; } 100% { 不透明度: 0; }
}

インターネットエクスプローラー

Internet Explorer 9 は、CSS3 の新しいプロパティの多く (すべてではありません) をサポートしています。たとえば、IE ではベンダー プレフィックスなしで border-radius プロパティを使用することもできます。

IE6 から IE8 は CSS3 をサポートしていません。残念ながら、これらの低バージョンのブラウザを使用しているユーザーはまだ多くいます。したがって、CSS3 をサポートしていなくても、Web サイトのデザインが適切に表示されるかどうかを確認してください。 border-radius、linear-gradient、box-shadow などの一部のプロパティについては、CSS3Pie を使用できます。これは、Web サイトのルート ディレクトリに配置する小さなファイルで、これにより、ページが IE6 および IE8 でこれらのプロパティをサポートするようになります。