[CSS] be wary of writing order of CSS3 attributes

Source: Internet
Author: User

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

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.