Declaring a CSS class attribute with "-"?

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

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

      

+3


source to share


2 answers


Until your CSS is technically correct, what you see is the vendor prefix. The vendor prefix is โ€‹โ€‹used for non-standard or incompletely implemented W3C recommendation specifications. They are evident in some CSS3 specs that browsers are still in the process of being implemented.

Some examples: box-sizing

, transform

, transition

.

Some common prefixes

  • -moz-

    for Firefox / Mozilla
  • -webkit-

    for Safari / Chrome
  • -ms-

    for IE / Edge
  • -o-

    for Opera
  • -khtml-

    for Konqueror


You may be wondering what the Mozilla Developer Network has to say about vendor prefixes.

Quote:

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

+3


source


These are experimental CSS attributes and not officially defined or supported. In your case, box-sizing

see the Browser Compatibility section on MDN.



Also, I don't think there is a browser that supports it -box-sizing

like you suggested -webkit-box-sizing

, either -moz-box-sizing

.

0


source







All Articles