I really love the box-sizing property of CSS. In Chrome, IE8+ and Opera (don´t know since which version) this is supported. Firefox 4 seems to ignore it.
I know there is the -moz-box-sizing property, but do I really have to write it every time I want to change the box-sizing type?
Code
<html>
<head>
<style type="text/css">
.outer{
width:600px;
height:100px;
background-color:#00ff00;
border:1px solid #000;
}
.inner{
width:100%;
height:100%;
background-color:#ff0000;
border:1px solid #fff;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Answer
Firefox implements -moz-box-sizing with an extra value called padding-box (pretty self-explanatory). I suspect that the reason this property has been in "prefix hell" — if you will — is that the padding-box value, being introduced by Mozilla, was only recently added to the spec with no other implementations, and it may be removed from the spec if other implementations still don't surface by or during CR.
Unfortunately, Firefox 4 still requires the prefix, and has continued to do so for a good number of years:
.inner {
width: 100%;
height: 100%;
background-color: #ff0000;
border: 1px solid #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
That being said, Firefox has finally begun shipping with box-sizing unprefixed as of version 29. I believe the experimental padding-box value is still supported, but it's still at-risk. Then again, the odds that you will need to use padding-box are extremely low, so you probably have nothing to worry about. border-box is all the rage, and unlike padding-box isn't going away anytime soon.
So, in short: if you don't care about anything other than the latest version, you no longer need the prefix. Otherwise, if you already have the prefix, there's no harm keeping it around for a while.
Also see the documentation on MDN.