Discuss the articles posted on Dev.Opera.
By stopsatgreen 
Wednesday, 9. January 2008, 17:45:41
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 )
By chrismills 
Wednesday, 9. January 2008, 19:07:01
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.
By chrismills Wednesday, 9. January 2008, 19:09:00
A ha! Bug fixed. Quicker than I expected ;-)
By henryjames Sunday, 13. January 2008, 12:31:22
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.
By BlakesHeaven Friday, 11. April 2008, 09:21:24
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.
By motorfest Monday, 26. May 2008, 13:33:27
It that needs me, I had problems of show transparency in IE7!
Now corrected everything this article.
Respect Peter Gasston
By evilopera Friday, 30. May 2008, 11:32:46
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??
By DanSmith Thursday, 10. July 2008, 11:41:11
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 ;-)
By fiveminuteargument Thursday, 29. January 2009, 11:51:39
It would be nice to have a real-life example, particularly because it would help you to iron out the bugs beforehand:
1. "firstchild" is not a valid pseudo-class; "first-child" is
2. To remove the horrible blue rectangle that appears on the left of the list in certain browsers (e.g. FF3), you need to reset the padding to 0.
Other than that, a great article - love the final result graphic.
- fma
By chrismills Thursday, 29. January 2009, 12:06:53
Originally posted by fiveminuteargument:
1. "firstchild" is not a valid pseudo-class; "first-child" is
Ah - thanks for alerting me to the missing hyphens; I've fixed it now.
Originally posted by fiveminuteargument:
2. To remove the horrible blue rectangle that appears on the left of the list in certain browsers (e.g. FF3), you need to reset the padding to 0.
If you look at the source code (see link at the top of the article for the link to download it), you'll see that this is done in the reset stylesheet. Do you think I should mention it explicitly in the article? The main focus of the article in on the progressive enhancement, and such cross browser issues are taken as read really for this one.
By fiveminuteargument Thursday, 29. January 2009, 13:11:35
Ah, thanks for the 'reset' clarification. I guess, because there was no example, I assumed that copy+pasting the markup and CSS would generate the expected result. I tend to do this a lot with 'tutorial' pages, even when a download option is available. I realise this isn't necessarily 'normal' behaviour, but it seems less effort, somehow, especially when I'm working through a multiple step process, as this article presents.
I think it /could/ help others to at least mention the reset, although it's not the main focus, as you say.
Cheers.
