Progressive Enhancement with CSS 3: A better experience for modern browsers

In this article, Peter Gasston of css3.info blazes through some neat ways of progressively enhancing your designs using CSS3 properties.

( Read the article )

Just to let you know, at the moment there is a parser bug which is cutting out a small section of this article. It's between the 2nd image and the

li { opacity: 0.9; }

li:hover { opacity: 1; }

code block.

Immediately following the code block is a caption - "Figure 2: The list now has coloured backgrounds and bolder text, and the first link is highlighted in a different colour."

Followed by a paragraph saying "IE7, Firefox, Safari and Opera all display like this."

Then a new heading saying "Adding more emphasis"

Then one last missing paragraph saying "The next step is to add a little more emphasis, by using a property that IE doesn't recognise: Opacity. We don't need to use any special selectors for this, as IE will simply ignore any properties it doesn't support:"

Apologies for this. We'll have that parser bug fixed asap.

A ha! Bug fixed. Quicker than I expected ;-)

Nice presentation! I must admit that possibilities provided by CSS3 are really appealing to me. Can't wait to have more browsers supporting it in future.

Hi, The reason I am here is that my horizontal navigation menu works fine in all browsers, except Opera.
If you can extend your artical to show what is needed to make your vertical menu into a horizontal menu it would help me and make for a fuller article.

In Opera it seems to insist on doing it verticaly.

Many thanks, David.

It that needs me, I had problems of show transparency in IE7!

Now corrected everything this article.

Respect Peter Gasston

Css3 it very well.

I am much incomprehensible for me things.
1. say please as possible to hide a picture in text with through technology of Css3 of selection a color???
2. Who knows how to do a pop-up window by Css3, that it was supported in all modern browsers??

Sounds great - after years of dumbing down the build to create something that looks the same on all the target browsers (which always include IE6/7) I'm getting to the point where a sprinkling of degradable CSS effects seems a lot more appealing than the inevitable truckload of CSS background images and extra markup (spans/divs) required to get the same effect in radically different browsers.

Trouble is, when you're working for clients who spend 1/2 of their budget on fine-tuning the frontend design, it seems a little unrealistic to expect them to happily settle for 1/2 of the design in popular mainstream browsers (like IE7), even when this method of building has obvious benefits such as faster downloads and ease of maintainence in the future.

I often think that it's not a lack of standards-compliant browsers that are holding developers back, but the design-obsessed clients who fund us, who put visual appeal ahead of all other considerations when developing a website.

With the constant battle for the attention/wallets of web users, I don't see this situation changing any time soon - rendering these cutting-edge techniques unfit for public consumption, and instead restricted to the blogs and homepages of frustrated developers everywhere.

P.S. Thanks for another great online resource. Sorry about the rant ;-)