CSS3

  • 200728 Jun

    Graceful Degradation

    by Peter Gasston

    Posted in Browsers, CSS3 Previews, Declarations

    Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.

    Fluid Thinking, by Peter-Paul Koch

    With CSS 3 so tantalisingly close (and yet so far away!), it’s fun to play around with some of the new cosmetic features. In fact, we can even start to implement them on websites – as long as provision is made for users with older browsers.

    I’ve made a quick example of a horizontal, tabbed navigation using CSS 3, which degrades gracefully for older browsers.

    Here’s the markup:

    <ul>
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Tre</a></li>
<li><a href="">Qua</a></li>
</ul>

    The CSS is quite lengthy, so view the source of the example page and you’ll get some idea of what I’ve done.

    If you’re using IE6, you’ll see just a row of plain, grey boxes which don’t animate when you mouse over them. IE7 and Opera users get a slightly better experience, with the text going white when hovered:

    li:hover a { color: #fff; }

    Opera

    Firefox and Safari 2 users get it better still, with border-radius and multiple backgrounds respectively supplying curves to the tabs:

    li {
url('corner_fff_topleft.png') no-repeat top left,
url('corner_fff_topright.png') no-repeat top right;
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
}

    Firefox

    It’s when you get to Konqueror (and, presumably, Opera 9.5), however, the new styles really kick in; use of the nth-child declaration allows for alternating colours, and text-shadow give a slight illusion of depth when hovered:

    li:nth-child(1n) { background-color: #9f9; }

li:nth-child(1n):hover { background-color: #0c0; }

li:nth-child(1n):hover a { text-shadow: 2px 2px 2px #000; }

li:nth-child(2n) { background-color: #6f6; }

li:nth-child(2n):hover { background-color: #090; }

    Konqueror

    This was a very quick and easy example, but I’m sure you can imagine much more creative uses for graceful degradation. It’s a useful technique if you have the time to implement it, and comes in very useful when trying to persuade people to upgrade to a better browser: “If you think that website looks good now, take a look at it on my computer!”

    You can skip to the end and leave a response.

  • Comments

Leave a Comment

(will not be published)

Subscribe to our RSS

OUR SPONSORS

Advertise here?
CATEGORIES
FRIENDS
Meta
TAG CLOUD

©2009. All Rights Reserved. WordPress Consulting by W3 EDGE