Skip to content

ara pehlivanian

Web Standards, Web Culture, Web Everything.™

And now for a little progressive enhancement

So I finally got around to working on my feeds page. It wasn’t very impressive as you can see in the screen cap below.

Screen capture of old feeds page

Old feeds page

At first I had a hard time trying to figure out how to accommodate so many feed chicklets. I have 5 feeds times 8 chicklets each, that comes out to 40 little images that needed to be laid out in such a way so as not to look so busy. (Even more have been added since the writing of this post. At last count we’re up to 60 chicklets.) I finally came up with the current solution as illustrated in the screen caps below.

Screen capture of new feeds page in IE

New feeds page in IE

Screen capture of new feeds page in Firefox

New feeds page in Firefox

Screen capture of new feeds page in Firefox with one feed panel expanded

New feeds page in Firefox with one feed panel expanded

You’ll notice that one version has all the feed chicklets visible, that’s in IE. Firefox on the other hand has only the little orange XML icon visible and gives you the rest once you hover over it. Now I used the term progressive enhancement in this post’s title because–like this site’s rounded corners you only see in Firefox–you’re able to experience the show/hide functionality in Firefox due to its more comprehensive support of CSS2 (granted the rounded corners are a proprietary Mozilla feature but who’s going to wait around for CSS3? ;-). In other words, the better the browser the nicer the experience.

For bonus points try and find a “progressive enhancement” feature in this very post!

Sphere: Related Content

  • Comments closed

Buy my book

The Art & Science of JavaScript / SitePoint
The Art & Science of JavaScript

Advertisement

Firebug - Web Development Evolved

Advertisement

2 Comments

  1. Gravatar for Mike EbertMike Ebert says:

    Ara, you are still way ahead of me on all this document type/XHTML + XML/CSS2 stuff. I will do my best to understand everything you’re up to here…

    That being said, my answer is the use of the “.caption:before” and “counter(figure)” rules to add the “Figure #” to your captions.

    Man, do I love Firefox!

  2. Gravatar for AraAra says:

    Mike: You win! Heh, yeah CSS2 offers some pretty cool functionality. I just wish it was more evenly supported across the different browsers out there.

Sorry, the comment form is closed at this time.

Skip to navigation

More stuff by Ara elsewhere on the web

    Snook Approved!

    © 2005-2008, Ara Pehlivanian.

    Stock photography courtesy stock.xchng. This site uses Akismet to catch spam (54,754 caught since May 2006) is hosted by DreamHost and powered by WordPress.