[CSS] be wary of writing order of CSS3 attributes

Reprint Zhang Xin Xu: http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84% e4%b9%a6%e5%86%99%e9%a1%ba%e5%ba%8f/

Example of a different writing order

The first is a smarter and more recommendable notation:

. not-a-square {    -webkit-border-radius:10px;    -moz-border-radius:10px;    border-radius:10px; }

Here are some of the things we might not care about that might create a problem in the order of writing:

. not-a-square {    border-radius:10px;    -webkit-border-radius:10px;    -moz-border-radius:10px;  }

In fact, according to our logical thinking, the back of the writing should not have a problem ah. For example, Firefox supports border-radius:10px, and supports-moz-border-radius:10px; attributes, and there's no problem in front of overwrite. But, in fact, things are not as simple as we think.

1. Long time ago : Browsers do not favor the prefix CSS3 also not favor pure CSS3 (Border-radius);
2. Not long ago : The browser only favor the prefix CSS3, not the CSS3;
3. now : Browser not only favor prefix CSS3 attribute, but also favor innocent CSS3 attribute;
4. wait until later : prefix CSS3 on the home to the children, the browser only favor pure CSS3 attribute.

is a vivid portrayal of this trend.

Ii. Description of the case

The ideal is always good, the reality is always bleak. Now, the WebKit core browser not only supports the Border-radius property, but also supports the-webkit-border-radius attribute, which itself is nothing, just ... See below:

. not-a-square {   //The two guys are not doing the same job.    border-radius:30px 10px;   -webkit-border-radius:30px 10px;}

When a property exceeds a parameter value, the effect of different attributes is not the same.

The naïve type of writing (border-radius:30px 10px) is to let box upper left and right corner of the 30 pixel arc, the lower left and right is a 10 pixel arc. And that bastard's prefix notation (-webkit-border-radius), the box rendering for each corner is 30 pixels wide 10 pixels high arc.

As shown in the following:

If you're using the latest chrome (my Chrome6.0.472.62), or (Safari4 still flat) Safari5, you can click here: CSS3 different writing attributes affect the demo, you can see the effect shown above.

Third, the last conclusion before the Mid-autumn festival

In fact, border radius is not the only instance, the Background-image gradient in CSS3 seems to have the same experience. I think there will be people in the future. These differences are all listed. However, in any case, it is always wiser to put the "innocent" in the final finale.

Finally, I wish you a happy Mid-Autumn Festival!

Reference article:
Ordering CSS3 Properties
http://css3please.com/

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=1117

[CSS] be wary of writing order of CSS3 attributes