How to define the order in which CSS3 properties are written

Core Tip: define the order in which CSS3 attributes are written

Examples of different writing sequences

The first is the more intelligent and recommended wording:

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

Here's what we might not care about, the writing order that might cause problems:

. not-a-square {<br/>border-radius:10px;<br/>-webkit-border-radius:10px;<br/>- Moz-border-radius:10px;<br/>}

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

1. A long time ago: browsers that do not favour the prefix CSS3 also do not favor the pure CSS3 (Border-radius);
2. Not long ago: browsers only favor prefix CSS3, do not favor the innocent CSS3;
3. Now: Browsers not only favour the prefix CSS3 attributes, but also favor the innocent CSS3 attributes;
4. Wait until later: prefix CSS3 home with children, browser only favor innocent CSS3 attribute.

The picture below is a vivid portrayal of this trend.

Ii. illustration of the case

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

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

When a property exceeds a parameter value, the different properties produce the same effect.

The Innocent kind of writing (border-radius:30px 10px), is to make box left upper and lower right corner of the 30 pixel arc, the lower left corner and the upper right is a 10 pixel arc. And that kind of chop-suey prefix (-webkit-border-radius), then box rendering for each corner is 30 pixel width of 10 pixels high arc.

If you're using the latest Chrome browser (mine is Chrome6.0.472.62), or (Safari4 is still flat) Safari5, you'll see the effect.

Third, the conclusion

In fact, border radius is not the only instance, and 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, it is always wiser to put the "innocent" in the final finale.