Declaring CSS class attribute with " - "?

Question

Why are some attributes declared regularly while others require the hyphen?

.box {
    width: 500px;
    margin: 20px;
    border: solid black 5px;
    -box-sizing: border-box;
}

Answer 1

While your CSS isn't technically correct, what you're seeing is vendor-prefixing. Vendor prefixing is used for non-standard-compliant or not fully implemented specs of the W3C recommendation. These are apparent in some CSS3 specs that browsers are still in the process of implementing.

Some examples would be box-sizing, transform, transition.

Some common prefixes are

1. -moz- for Firefox/Mozilla
2. -webkit- for Safari/Chrome
3. -ms- for IE/Edge
4. -o- for Opera
5. -khtml- for Konqueror

You may want to see what the Mozilla Developer Network has to say about vendor prefixes.

Quote:

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties, so developers can experiment but changes in browser behavior don't break the code during the standards process. Developers should wait to include the unprefixed property until browser behavior is standardized.