Search code examples
csswebkitvendor-prefixbox-shadow

Is there priority for box shadow of different browsers? (CSS)

I just met a problem of box shadow.

1. Is there any priority of box-shadow?

for example: 

box-shadow: 0px 1px 1px 0px #292929;
-moz-box-shadow: 0px 1px 1px 0px #292929;
-webkit-box-shadow: 0px 1px 1px 0px #292929;

and

-moz-box-shadow: 0px 1px 1px 0px #292929;
-webkit-box-shadow: 0px 1px 1px 0px #292929;
box-shadow: 0px 1px 1px 0px #292929;

I saw many setting like the second one, why it's always "moz->webkit->basic setting"?

2. Why we need -moz-box-shadow and -webkit-box-shadow even if we have box-shadow?

Solution

  • To answer your second question first; how far back you want your browser support to go will determine whether or not you need to prefix a property and which prefixes to use. (You can check the browser compatibility table for box-shadow on caniuse.com.)

    With regard to the order; the order of the prefixed properties is irrelevant (personally, I prefer alphabetical order) as a browser will simply ignore any property it doesn't understand.

    The only important thing with the order is that the unprefixed property must be last as, if it were to be followed by a prefixed version that the browser understands, that prefixed version would override the unprefixed version, which could lead to problems if the prefixed version uses non-standard syntax.