问题
Does the placement of a CSS property/value matter when it is being used as a "fallback" for browsers not compatible with a certain CSS3 property/value?
For example, the CSS3 calc() function only works with certain browsers. Let's say I want to have a div whose width is 1/3 its parent. I could use width:calc(100%/3) to achieve this with browsers that are calc() compatible. Then, for browsers that are not compatible, I could use width:33.33% as a fallback.
My question: does placing the width:33.33% above or below the width:calc(100% / 3) make a difference in its effectiveness? Would one hierarchy work, while the other would not?
That is, would ordering my CSS properties like this:
div.column {
width: 33.33%; /* Fallback in case the browser does not support calc() */
width: -webkit-calc(100% / 3);
width: -moz-calc(100% / 3);
width: calc(100% / 3);
}
Be different than ordering them like this:
div.column {
width: -webkit-calc(100% / 3);
width: -moz-calc(100% / 3);
width: calc(100% / 3);
width: 33.33%; /* Fallback in case the browser does not support calc() */
}
回答1:
Yes, the order matters. Browsers will use the last rule they understand, so your second example would negate the calc() call for browsers that understand it.
As the W3 states:
...if two declarations have the same weight, origin and specificity, the latter specified wins.
回答2:
Yes it matters, "fallbacks" should be placed first.
The reason: Browsers will apply the last supported declared style only, so if for instance you have this:
div {
width: 400px;
width: 300px;
width: 200px;
width: 100px;
}
...only 100px will apply. This is common when vendor prefixes are involved:
div {
-moz-property: foo;
property: foo;
}
In this case, Mozilla browsers will apply the standard property if it's supported, and fall back to the vendor specific -moz-property otherwise (if it's supported). The actual order of vendor prefixes does not matter, as a browser typically won't support multiple vendor prefixes.
来源：https://stackoverflow.com/questions/14914822/does-the-placement-of-a-css-property-value-matter-when-it-is-used-as-a-fallback