☰

What are -moz- and -webkit-? [duplicate] Ask Question

tag-icon • tag-icon css webkit
What are -moz- and -webkit-? [duplicate] Ask Question 
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

I am a beginner at CSS and when I was looking at some CSS code the other day, I found these lines. In the tutorials I used to learn CSS, I have never seen anything like these lines. What is the explanation for these lines? Or is there a source where I could learn to implement lines like these?

ベストアンサー1

-webkitこれらは、関連するレンダリング エンジン ( Chrome、Safari の場合、-mozFirefox の場合、-oOpera の場合、 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

参考文献:

おすすめ記事