Browser-specific CSS features


Well-known member
Is it recommended to still use browser-specific CSS features? For example, to implement a box-shadow, one might have a code like:

-moz-box-shadow: 0 0 4px 1px #bdbdbd;
-webkit-box-shadow: 0 0 4px 1px #bdbdbd;
box-shadow: 0 0 4px 1px #bdbdbd;
There being a special set of options for the Mozilla Firefox browser, and for the Webkit browsers (Chrome and Safari).

Yet in xF, the CSS used for the default styling for buttons is this:
text-align: center;
box-shadow: 0px 1px 4px 0px rgb(200,200,210);
text-shadow: 0px -1px 2px white;
outline: none;
line-height: 23px;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
Should we still concern ourselves with browser-specific CSS implementations in our own code?


XenForo developer
Staff member
We only do it for certain rules: border-radius, box-shadow, text-shadow, box-sizing, transform, columns, and rgba borders (so IE works, ignoring the alpha channel). We also make rgba backgrounds work in IE (so IE works, supporting the alpha channel).