-webkit- や -moz- などの CSS ベンダー プレフィックスとは何ですか? どのように使用すればよいですか?

CSS のベンダー プレフィックス: -moz- と -webkit- のガイド

CSS の領域では、次の行に遭遇する可能性があります。次のようなコード:

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

これらはベンダープレフィックス付きプロパティとして知られています。正式な標準化の前に実験的または独自の CSS 機能をテストするためにブラウザ ベンダーによって導入されました。

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

ベンダー プレフィックスは主に今後の機能のプレースホルダーとして機能します。これにより、ブラウザーは革新的なアイデアをサポートし、CSS 仕様に完全に統合する前に実際のユーザーでテストできるようになります。

共通ベンダー プレフィックス:

• - webkit- (Chrome、Safari)
• -moz- (Firefox)
• -o- (Opera)
• -ms- (Internet Explorer)

ベンダー プレフィックスを使用するためのベスト プラクティス:

最大限の互換性を確保するには、一般に、プロパティのベンダー プレフィックス付きバージョン、その後に標準化バージョンが続きます。例:

.elementClass {
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

このメソッドにより、プロパティの標準バージョン (border-radius) をサポートするブラウザーがベンダー プレフィックス付きバージョンをオーバーライドできます。

例: 列のプロパティ

あなたが言及したコードWebkit (Chrome、Safari) と Firefox ブラウザーの両方の列プロパティ (column-count、column-gap、column-fill) を定義します。これらのプロパティは、複数列テキストの外観とレイアウトを制御します。

参考資料:

• CSS 複数列レイアウト モジュール: https://www.w3 .org/TR/css3-multicol/
• 'ベンダー プレフィックスの擁護' (Meyerweb.com): https://meyerweb.com/eric/thoughts/2008/08/13/in-defense-of-vendor-prefixes/
• ベンダー プレフィックス リスト (Meyerweb.com): https://meyerweb.com/eric/thoughts/2007/09/03/vendor-prefixes-2/

以上が-webkit- や -moz- などの CSS ベンダー プレフィックスとは何ですか? どのように使用すればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。