« New workshop for Web Directions - Beginning Ruby on Rails | Main | Style Master testers wanted »

July 15, 2007

CSS3 support charts

While it might seem a little premature to be delving into CSS3 support in current browsers, when CSS2 support is far from perfect in some of them, both Safari and Mozilla, particularly Safari, have been adding support for some of the highest visual impact features of CSS 3. What's good to see about the support that is out there is that it inherently supports the idea of "progressive enhancement". By using text-shadow, border-radius, box-shadow and the like, where a browser supports these, the viewer sees the design in all its CSS3 glory. Where the feature is not supported, they simply don't know the difference.

I've put together some tests for the most commonly implemented properties of CSS3, and a chart of which browsers (Safari 2/3/iPhone, Mozilla, Opera 9, IE7) support them.

The test and charts are here.

All of the features can be used without much concern for their impact on usability and accessibility.

One case in which you need to be mindful is in the use of multiple backgrounds. In CSS 3 you can have several background images layered on top of one another for the same element. You do this by using comma separated values for the background property like this

background: url('backimages/green.png') no-repeat, url('backimages/orange.png') no-repeat, url('backimages/purple.png') no-repeat, url('backimages/aqua.png') no-repeat top left;

Unfortunately, Mozilla and Opera (but not IE 7) display no background image at all in this case. IE 7 displays the first image, as you might expect, but the first image is the front most one you want to display, which may not be the one you want to display if only one is to be displayed.

Adding a background image in the same statement doesn't work in Opera or Mozilla either.

As a workaround, create a statement with the same selector before this one in the CSS, then give it the background image you want to display if only one will be displayed. Because the specificity of this statement is lower than one with the same selector which follows, where the multiple background is supported the browser will use that property.

This still leaves the issue of what to do about IE, when the first background image is not the one you want displayed. If nothing else, make sure you have a background color, so that your text is legible.

On a related note, I recently wrote an article on just what screen real estate is available on the iPhone for pages in Safari, and about Safari's scaling behavior, and ways to work with it.

You might also find these sites useful if looking for more information about CSS 3 support in various browsers

CSS3.info "Everything you need to know about CSS 3" (and were too afraid to ask?)
Mozilla's documentation of their extensions to CSS
Qooxdoo's Webkit style documentation
Make the most of the iPhone SDK (we know now that the assumption that iPhone Safari has the same webkit as Safari 3 is not true right now. Surely some time soon via software upgrades?)
iPhoneWebDev. A mailing list, bog, examples and resources.

Any other good resources out there you know of? Leave a comment.

thanks

j

July 15, 2007 | Permalink

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341cbf7d53ef00e5503586568834

Listed below are links to weblogs that reference CSS3 support charts:

Comments

Thanks for that i was looking for,
Thanks alot.

Posted by: Logo Design | Feb 2, 2010 10:31:32 PM

Unfortunately, Mozilla and Opera (but not IE 7) display no background image at all in this case. IE 7 displays the first image, as you might expect, but the first image is the front most one you want to display, which may not be the one you want to display if only one is to be displayed.

Posted by: tinggi badan | May 10, 2010 1:45:00 PM

CSS3 took this two steps further, by adding the :last-child and :nth-child classes. The former is simply the last element to occur within its parent. The :nth-child element is more complex — allowing access to either a numbered element, or allowing you to cycle through multiples of a number. This means you could style every third row of a table differently, for instance.

Posted by: payday loans calgary | May 15, 2010 9:33:13 AM

Pretty long post but still useful because this cannot be changed for some time :)
Thank you!

Posted by: Hair Loss Products For Men | Jun 15, 2010 8:29:09 PM

I checked those charts but there are some new information about browsers mentioned. I think it is possible to make some new articles with fresh information.

Posted by: acne scar treatment | Jun 15, 2010 8:31:06 PM

Congratulations for that winning shot!

Posted by: Titanium Belly Rings | Jun 23, 2010 9:05:26 PM

Hey! Thanks for the Blog post! I’m finding it very fascinating. I’m going to bookmark this psot and return. can you tell me where i can find more information on this? Keep it up!

Posted by: Gold Plated belly Rings | Jul 2, 2010 12:50:50 AM

What a utilization of tools and effects you did, It's really amazing work, I am inspired by your work and obviously this blog is perfect.


Custom Logo Design

Posted by: Sam Pierce | Jul 15, 2010 7:26:58 PM

hello admin, I found your blog from yahoo and read a few of your other posts.They are awesome. Please keep it up!!

Posted by: Copy Wii Games | Jul 25, 2010 1:40:49 PM

Congratulations for that winning shot,thanks for sharing the post.


Posted by: Bob - Hughesnet Broadband | Jul 31, 2010 9:28:39 PM

Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.

Posted by: Web Design Sydney | Aug 18, 2010 8:09:57 PM

As a workaround, create a statement with the same selector before this one in the CSS, then give it the background image you want to display if only one will be displayed. Because the specificity of this statement is lower than one with the same selector which follows, where the multiple background is supported the browser will use that property.

Posted by: tava tea | Aug 25, 2010 4:41:13 PM

I am very much a beginner in this stuff and i want to create a website myself. Also the layout. i m nt interested in using free web builders available. So if someone can help me out with this issue. if any tutorials available with this so that i can learn to read css and create the layout.

Posted by: orange county tech support | Aug 26, 2010 2:23:28 PM

i enjoyed reading your blog. It was very interesting and informative.keep it up

Posted by: LOGO DESIGN | Aug 31, 2010 8:19:42 PM

this is very insightful, cheers

Posted by: business electricity suppliers | Oct 7, 2010 5:19:23 AM

The Version 3 of CSS has many exciting features that are being implemented. It has become very easy and simple for designers to create effects with CSS3. CSS3 will definitely benefit a lot for the web development community.

Posted by: learn css | Oct 22, 2010 5:44:58 PM

You’re here at this page because you’re probably looking for information for tinnitus miracle or a tinnitus miracle review and that is what i aim to provide. Let’s go through this review of tinnitus miracle to see if it does what’s it’s claimed to do which is to cure tinnitus. Firstly, i’d like to tell you why i’m writing this tinnitus miracle review. I had a tinnitus problem and like you, i was very cautious to buying a tinnitus miracle system from the internet but i did as my problem was beyond me and i needed any help i could get. So now after trying tinnitus miracle, i decided to write this review to help anyone that were in my shoes to get better informed. Cause at the product costing about $40, it’s not something that you want to lose your money for if it doesn’t work for you right?

Posted by: the tinnitus miracle review | Nov 2, 2010 7:05:42 PM

nice post my friend

Posted by: brian adams | Nov 25, 2010 1:23:40 AM

Logo design

It’s a very useful instruction. Thanks for the sharing this great experience with us keep up the good work.

http://www.logodesignmaestro.com/services/banner-design/

Posted by: Logo design | Jan 11, 2011 6:26:56 PM

Its like you read my mind! You seem to know so much about this, like you wrote the book in it or something. I think that you can do with some pics to drive the message home a bit, but other than that, this is great blog. A fantastic read. I will certainly be back.

Posted by: Logo Design | Feb 1, 2011 5:17:59 PM

CSS3 will definitely benefit a lot for the web development community. like the resources mentioned in your blog, this will be very useful to me. thanks for sharing

Posted by: Wordpress Development | Feb 4, 2011 7:05:24 AM

I prefer CSS rather than HTML

Posted by: hgold rates in dubai | Feb 17, 2011 2:06:29 AM

Forex robots are also known as Professional Advisors or EAs. This is a becoming monicker since they are performing within the capability of a real expert, advising on which trades to make and subsequently executing these trades automatically. As an knowledgeable advisor, Forex robots provide recommendation and details about when to execute a forex trade. The knowledgeable advisor will interpret and identify the buying and selling alerts which are derived from technically analyzing the Forex market.

Posted by: Forex Robots | Feb 27, 2011 5:12:26 PM

I found the perfect place for my needs. Contains wonderful and useful messages. I have read most of them and has a lot of them.

Posted by: Lottery Calculator | Feb 27, 2011 5:58:42 PM

You've got a splendid way of writing which I find exquisite! I just want it's not the last time when I've found so great info on this topic. That is great, quite useful information and beautiful design you've got here!

Posted by: college board | Mar 4, 2011 11:04:34 PM