CSS の -webkit- や -moz- などのベンダー プレフィックスとは何ですか?また、それらが使用される理由は何ですか?

ベンダープレフィックスについて: -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;

これらの線は次のことを表します。 ベンダープレフィックス付きプロパティ。特定のレンダリング エンジンに固有です。 -webkit プレフィックスは Chrome と Safari で使用され、-moz プレフィックスは Firefox に適用されます。

ベンダー プレフィックスの目的

ベンダー プレフィックスにより、新しい CSS または独自の CSS の実装が可能になります。 W3C による正式な標準化前の機能。これにより、ブラウザ実装間の潜在的な不一致にもかかわらず、早期導入が可能になります。

ベスト プラクティス

最初にベンダー プレフィックス付きのプロパティを指定し、次にプレフィックスなしのバージョンを指定することをお勧めします。これにより、ブラウザーで完全にサポートされると、接頭辞のないプロパティがベンダー接頭辞付きの設定をオーバーライドするようになります。

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

アプリケーション例

提供されている CSS の例では、プロパティ指定されたものは複数列に関連していますlayouts:

• -webkit-column-count: Webkit ブラウザーの複数列レイアウトの列数を指定します。
• -webkit -column-gap: Webkit の列間の間隔を定義します
• -webkit-column-fill: Webkit ブラウザの列内でコンテンツがどのように分散されるかを制御します。

同様のプロパティは、-moz を使用して Firefox に適用されます。プレフィックス。

追加リソース

• [CSS 複数列レイアウト モジュール](https://www.w3.org/TR/css3-multicol/)
• ['ベンダープレフィックス」 Meyer](https://meyerweb.com/eric/thoughts/2008/05/13/defense-of-vendor-prefixes/)
• [ベンダー プレフィックス リストマイヤー](https://meyerweb.com/eric/thoughts/2008/05/13/defense-of-vendor-prefixes/)

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