CSS prefix versus 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 turn to the browser that uses the prefix version, does it ignore this property without a prefix or apply the property twice, also processing the prefix version?

Answer 1

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

The browser will analyze the attributes in order. If, for example, webkit reads -webkit-transform, but then reads transformthat it also knows, it will overwrite the rule -webkit-transform. This method is called CSS Fallbacks and is the effect of cascading style sheets. It will be applied only once, after reading all the rules.

So, in your case, it will rotate 10degonce, and not 10degagain10deg

:

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

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

Hide result

"", "" .

Answer 2

css , , . .

, .