Browser-specific CSS features

[psTubble27]

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?

 

[Paul B]

XenForo automatically applies all of the browser specific derivatives.

 

[psTubble27]

Ah excellent, thanks!

 

[Mike]

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).

 

[psTubble27]

Does xF apply the browser-specific derivatives for CSS entered in the bottom textarea?

 

[Mike]

Bottom text area of a style property? Yes.