CSS prefix vs. non-prefix, used twice?

Question

If you have a CSS property with a prefix:

-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

and reach a browser that uses the prefixed version, will it ignore the un-prefixed property or apply the property twice by also processing the prefixed version as well?

Answer 1

-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

A Browser will parse the attributes in order. If for example webkit reads the -webkit-transform but then reads transform wich it also knows, it will overwrite the rule of -webkit-transform. This technique is called CSS-Fallbacks and is a effect of cascading stylesheets. It will only apply it once, after reading the entire rules.

So in your case it will rotate 10deg once, and not 10deg and again 10deg

Another Example would be:

.test {
  height: 100px;
  background-color: red;
  background: blue;
}

<div class="test"></div>

It wont ever apply the color "red", as it is overwritten by "blue" in the same stylesheet.