• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Browser-specific CSS features

psTubble27

Well-known member
#1
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?
 

Mike

XenForo developer
Staff member
#4
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).