What does it mean when a css property starts with a dash? [duplicate]

Answer 1

-webkit- and -moz- here are called vendor prefixes; they generally indicate a browser-specific feature of CSS, or one that’s under development/still a draft and can’t be considered a standard yet. When these features are used “ahead of time”, the only way to make it work in every browser is sometimes to provide a different rule with a different prefix for each one — that’s what you see in the project. The idea is that eventually, though, the feature will be standardized, browsers will drop the prefixes, and life will go on.

-webkit-gradient, for example, was the first way to define a gradient in CSS, but was replaced by a completely different linear-gradient and radial-gradient syntax.

A convenient way to find out what browsers support a certain feature and what prefixes you need if you’re using it before a definitive standard or global unprefixed browser support is Can I Use….

Some common prefixes are:

• -webkit- for WebKit-based browsers, including Chrome/Chromium and Safari
• -moz- for Firefox
• -ms- for Internet Explorer (9 and up)
• -o- for Opera (pre-WebKit)

Answer 2

They are called vendor prefixes. Different browsers have different prefixes:

• -webkit- - Webkit based browsers such as Safari and Chrome
• -moz- - Gecko based browsers such as Firefox
• -ms- Internet Explorer
• -o- Presto based browsers such as Opera

Vendor prefixes are used to denote experimental CSS features. They are used when a specific property or spec is not considered stable, and may change in the future. By using a prefix, the browser can experiment with that feature without the risk that developers will make use of the property and sites will break if the behaviour or syntax changes. Once the spec becomes final, the prefix is removed, and some browser will remove support for the prefixed version.

The official guidance from the W3C is that prefixes should be used until the spec from which the property or feature is from reaches Candidate Recommendation.

The general best practice is to use all vendor prefixes one after another, and the unprifixed version last.

Mozilla and Chrome (now they're moving to the Blink engine) have changed policy to hiding the feature behind a flag, rather than using a prefix. This means the feature will not be available to use unless the user enables that flag.

For more information, see this wiki page from the CSS Working Group: http://wiki.csswg.org/spec/vendor-prefixes