浏览器对CSS3和CSS2的支持？ 更重要的是，针对CSS2或CSS3进行设计？

Question

Does anyone have any updated stats regarding browser support for CSS3 vs CSS2? There are old SO posts from 2008, but we're curious how broadly supported CSS3 is now.

More importantly, should we design with CSS2 in mind or CSS3?

Thanks!

Answer 1

More importantly, should we design with CSS2 in mind or CSS3?

it's not an either or scenario, probably never will be, you can't have one without the other - CSS2 should be your base, CSS3 (modules) should be your enhancements, rounded corners, multiple backgrounds etc.. you can enhance the non CSS3 browsers with JS libraries to help but it should always degrade to a perfectly usable CSS2 site no matter the browser or the scripted enhancements

• so CSS2 with a bit of CSS3 fun ;)

Answer 2

It really depends on the features in CSS3 that you want.

Eg if you want to use rounded corners on elements, feel free to sprinkle them in (knowing that IE8/IE7/IE6 users will get a downgraded experience (Square corners))

.roundedCorners{
  -webkit-border-radius:5px;/* Safari, Chrome, Blackberry, etc. */
     -moz-border-radius:5px;/* Firefox, Camino, Flock, etc. */
          border-radius:5px;/* IE9, other browsers with ready implementations */
}

You'll just need to be aware that some users won't see your fancy stuff. Be sure to test in other browsers to ensure that the site/content is still usable.

Answer 3

Exist some js library that will help you to fill the lack of support of certain browsers. For example: http://selectivizr.com/ helps a lot with IE

And to check if browser support any specific CSS I use http://caniuse.com/ website. And naturally in base of my audience browser statistic and trned I decide what to use or not.

The important thing is: if you want to try to go and play with CSS3, please do it . The only thing that you have to be aware it is that whatever you do, be sure that it is easy to degrade in the case that there is no support for it (for example Mobiles do not have the same standard of web browsers).

The most important point is: DO NOT EXPECT TO SEE THE SAME WEB DESIGN IDENTICAL IN ALL THE BROWSERS . Accept that every browser has differences in rendering and do not fall in the misconcept of the print of making every copy identical. It is not possible with the web. Make them similar, but live with acceptance of the difference, and if you can do some more cool stuff for Chrome or FF, please do it (it is all up to you if you want to make the extra effort).

People of IE will not miss out the experience , they will not know the difference. When they will update or change the browser they will discover a new aspect that they didn't before, thinking that was more an update than their own limitation of browser.

Answer 4

This graph shows you the percentage on each browser so far this year worldwide:

http://gs.statcounter.com/#browser_version-ww-monthly-201101-201103-bar

Assuming that all browsers except IE (At the time of writing, IE9 had only just been released) support CSS3, then around 55% of users can use CSS3 and many HTML5 features.

In my opinion, the benefits outweigh the costs and the time is right to start using CSS3 and HTML5.