What are -moz- and -webkit-

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  Could someone please explain these lines to me or give me a source where I could learn to implement lines like these

User · Accepted Answer

These are the vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer). Typically they're used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.

This allows properties to be set specific to each individual browser/rendering engine in order for inconsistencies between implementations to be safely accounted for. The prefixes will, over time, be removed (at least in theory) as the unprefixed, the final version, of the property is implemented in that browser.

To that end it's usually considered good practice to specify the vendor-prefixed version first and then the non-prefixed version, in order that the non-prefixed property will override the vendor-prefixed property-settings once it's implemented; for example:

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

Specifically, to address the CSS in your question, the lines you quote:

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

Specify the column-count, column-gap and column-fill properties for Webkit browsers and Firefox.

References:

User · Answer

What are -moz- and -webkit-   CSS properties starting with -webkit-  -moz-  -ms- or -o- are called vendor prefixes      Why do different browsers add different prefixes for the same effect     A good explanation of vendor prefixes comes from Peter-Paul Koch of QuirksMode      Originally  the point of vendor prefixes was to allow browser makers   to start supporting experimental CSS declarations       Let s say a W3C working group is discussing a grid declaration  which    incidentally  wouldn t be such a bad idea   Let s furthermore say that   some people create a draft specification  but others disagree with   some of the details  As we know  this process may take ages       Let s furthermore say that Microsoft as an experiment decides to   implement the proposed grid  At this point in time  Microsoft cannot   be certain that the specification will not change  Therefore  instead   of adding the grid to its CSS  it adds -ms-grid       The vendor prefix kind of says  this is the Microsoft interpretation   of an ongoing proposal   Thus  if the final definition of the grid is   different  Microsoft can add a new CSS property grid without breaking   pages that depend on -ms-grid      UPDATE AS OF THE YEAR 2016  As this post 3 years old  it s important to mention that now most vendors do understand that these prefixes are just creating un-necessary duplicate code and that the situation where you need to specify 3 different CSS rules to get one effect working in all browser is an unwanted one   As mentioned in this glossary about Mozilla s view on Vendor Prefix on May 3  2016      Browser vendors are now trying to get rid of vendor prefix for experimental   features  They noticed that Web developers were using them on   production Web sites  polluting the global space and making it more   difficult for underdogs to perform well    For example  just a few years ago  to set a rounded corner on a box you had to write   -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    But now that browsers have come to fully support this feature  you really only need the standardized version   border-radius  10px 5px      Finding the right rules for all browsers  As still there s no standard for common CSS rules that work on all browsers  you can use tools like caniuse com to check support of a rule across all major browsers   You can also use pleeease io play  Pleeease is a Node js application that easily processes your CSS  It simplifies the use of preprocessors and combines them with best postprocessors  It helps create clean stylesheets  support older browsers and offers better maintainability    Input   a     column-count  3    column-gap  10px    column-fill  auto      Output   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

[css] What are -moz- and -webkit-?

Examples related to css

Examples related to webkit