Confused by CSS prefixes

Question

Please, is here somebody who can explain me what is the reason to write for example:
-moz-background-clip: padding-box;
background-clip: padding-box;
? I saw this in many examples and it is weired for me. Why is there used prefix, when the value is same? Please excuse my bad English.

Answer 1

There is the CSS working group that decides which new features get added to CSS.
This process takes a long time; usually it will be clear which new features will make into the next standard but it takes months or years until it is "official".

Browser vendors will usually add all the new features early, so developers can use them early too!
But, since the standard is not yet finished and changes over time, different browsers will implement things differently; so that's why they hide it behind a prefix until the standard is clear.

That means there are:
-moz-background-clip (Firefox)
-webkit-background-clip (Safari)
-khtml-background-clip (Konqueror)
background-clip (The official standard!)

background-clip is pretty much "official" now. Firefox knows the unprefixed version since 2011, so the only reason why you still include it in your CSS is so really old browsers can use the feature too. You can probably drop the -moz-* version and nobody will notice.