web-dev-qa-db-ja.com

-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を学ぶために使ったチュートリアルでは、私はこれらの行のようなものを見たことがありません。誰かが私にこれらの行を説明してもらえますか、または私がこのような行を実装することを学ぶことができる情報源を私に教えてください。

csswebkit
136
idude

これらは、関連するレンダリングエンジンによって提供されるベンダプレフィックスプロパティです（Chromeの場合は-webkit、Safariの場合は-moz、Operaの場合は-o、Internet Explorerの場合は-ms）。通常、それらは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;

WebkitブラウザとFirefoxにはcolumn-count、column-gap、およびcolumn-fillプロパティを指定します。

参考文献：

150
David Thomas

-moz-および-webkit - とは何ですか？

-webkit-、-moz-、-ms-または-o-で始まるCSSプロパティはベンダープレフィックスと呼ばれます。

同じ効果を得るために、ブラウザが異なるとプレフィックスが異なるのはなぜですか？

ベンダープレフィックスの良い説明は、Peter-Paul Kochの QuirksMode から来ています。

もともと、ベンダープレフィックスのポイントは、ブラウザメーカーが実験的なCSS宣言のサポートを開始できるようにすることでした。

W3Cワーキンググループがグリッド宣言について議論しているとしましょう（それは偶然にもそれほど悪い考えではないでしょう）。さらに、ドラフト仕様を作成している人もいますが、詳細の一部に同意しない人もいます。私たちが知っているように、このプロセスには時間がかかるかもしれません。

実験としてMicrosoftが提案されたグリッドを実装することを決定したとさらに言いましょう。現時点で、Microsoftは仕様が変更されないことを確信できません。そのため、CSSにグリッドを追加する代わりに、-ms-gridを追加します。

ベンダプレフィックスは、「これは進行中の提案に対するマイクロソフトの解釈です」と言っています。したがって、グリッドの最終的な定義が異なる場合、Microsoftは-ms-gridに依存するページを分割することなく新しいCSSプロパティgridを追加できます。

2016年現在の更新情報

この投稿が3歳のとき、これらの接頭辞は単に不必要な重複コードを作成しているということをほとんどのベンダーが理解していることを言及することは重要です。 1つの効果をすべてのブラウザで機能させるために3つの異なるCSSルールを指定する必要がある場合は、不要なものです。

thisVendor Prefixに対するMay 3, 2016に対するMozillaの見解についての用語集で述べたように、

ブラウザベンダは今実験的な機能のためにベンダの接頭辞を取り除こうとしています。彼らは、Web開発者が本番Webサイトでそれらを使用していることに気付き、地球規模のスペースを汚染し、アンダードッグがうまく機能することをより困難にしていることに気付きました。

例えば、ほんの数年前に、あなたが書かなければならなかったボックスに丸みを帯びた角を設定するために：

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

しかし、ブラウザがこの機能を完全にサポートするようになったので、本当に標準化されたバージョンだけが必要です。

border-radius: 10px 5px;

すべてのブラウザに適したルールを見つける

すべてのブラウザで機能する一般的なCSSルールの標準はまだないため、 caniuse.com のようなツールを使用して、すべての主要ブラウザでルールのサポートを確認できます。

pleeease.io/play を使うこともできます。 PleeeaseはあなたのCSSを簡単に処理するNode.jsアプリケーションです。プリプロセッサの使用を単純化し、それらを最高のポストプロセッサと組み合わせます。きれいなスタイルシートを作成したり、古いブラウザをサポートしたり、メンテナンス性を向上させるのに役立ちます。

入力：

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

出力：

a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
}
46
Raman Sahasi