[解決済み] moz-とwebkit-とは何ですか？[重複しています]。

質問

-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のコードを見ていたら、こんな行を見つけました。私がCSSを学ぶために使ったチュートリアルでは、このような行は見たことがありません。この行はどのように説明されているのでしょうか？または、このような行を実装することを学べるソースはありますか？

どのように解決するのですか？

これらは、関連するレンダリングエンジンが提供するベンダープレフィックスプロパティ( -webkit は、Chrome、Safari。 -moz Firefoxの場合。 -o はOpera用です。 -ms Internet Explorerの場合）。一般的には、W3が最終的に明確化/定義する前に、新しい、または独自のCSS機能を実装するために使用されます。

これにより、各ブラウザやレンダリングエンジンに固有のプロパティを設定することができ、実装間の不整合を安全に考慮することができます。接頭辞は、時間の経過とともに、接頭辞のない最終バージョンのプロパティがそのブラウザに実装されると、（少なくとも理論的には）削除されます。

そのため、通常は、ベンダープレフィックス版を最初に指定し、次に非プレフィックス版を指定するのがよい方法とされています。これは、例えば、ベンダープレフィックス版のプロパティ設定が実装されたときに、非プレフィックス版のプロパティ設定が上書きされるようにするためです。

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

具体的には、ご質問の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;

を指定します。 column-count , column-gap と column-fill プロパティを Webkit ブラウザおよび Firefox で使用できるようにしました。

参考文献

• CSS Multi-column レイアウトモジュール .
• ベンダープレフィックスを擁護するために」（Meyerweb.com） .
• ベンダープレフィックスリスト（Meyerweb.com） .