-
200728 Jun
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.
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.
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; }
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; }
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, andtext-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; }
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
-
01.
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!”
Or the client/customer will say, “But the other guy can make it look the way I want in all browsers!” I think it’s still early to be able to get away with that line of thinking.
-
02.
Hehe depends on the site you’re at John… We do the graceful stuff here at css3.info :)
Great piece Peter! Perhaps we can do a little tweaking on our new layout with the nth-selector thing?
-
03.
Un ejemplo de menú con pestañas con CSS3…
Un ejemplo práctico de la utilización de CSS3 para la creación de un menú con forma de pestañas. Está hecho basando en que funcione en navegadores que no soporten aún dicha versión de hojas de estilo…
-
04.
nice work! but expected at least IE7 to display them correctly…
-
05.
I wouldn’t recommend an example quite as drastic as this just yet for business clients! However, on personal sites there’s no reason why you couldn’t do this, and on client sites you could make a more subtle effect.
-
06.
This works great in Opera 9.5, except the rounded corners, which we don’t support yet. Well, it wouldn’t work anyway as in this example -moz-/-webkit- are used without the standard none prepended version. As the syntax is different between both Mozilla and WebKit, as hi-lighted in a previous post, it isn’t trivial for Opera to add border-radius yet. We have to make sure we implement the version that will finally be settled on in the spec. I personally think the Safari way is more flexible, but I understand why Mozilla did it the way they did.
-
07.
I forgot to mention, this demo could be made to work in Opera 9.5 (and probably the Nintendo Wii) without any extra mark-up by adding a SVG background-image to the div. SVG corners are a quite nice solution as they are scaleable, just like CSS rounded corners.
-
08.
Hi David,
The rounded corners in the fully enhanced version are done with multiple background images rather than border-radius; any news on whether O9.5 will support multiple background images?
BTW, can’t wait to see SVG background-image in action!
-
09.
@Peter: I have a vague remembering of WebKit supporting that… (SVG in background)
-
10.
@Peter: Why did you include the border-radius for webkit btw? WebKit supports multiple backgrounds…
-
11.
You’re absolutely right; I’ve updated the page to reflect that.
-
12.
-
13.
I don’t think WebKit supports SVG background images; at least I couldn’t get it to work in the latest nightly that I’ve tried.
Opera is looking into supporting more CSS3, including background-image. It depends on how mature the spec is and if it is likely to change. It also depends on what it takes to implement it with our current code-base. We do know it is one of the most requested features that web developers want, so that certainly weighs into the decision of what priority we will give it.
-
14.
You can make the hover effect working by changing “li:hover a” to “li a:hover”. That’s better because the hover effect should highlight the active area and not the surounding element (which may or may not be part of the active area).
-
15.
I don’t agree Thiemo… They’re buttons, the whole thing should be active.
-
16.
Hmm you’re prolly right, as the anchor spreads across the whole li :) Why did you make that choice Peter? :)
-
17.
You’re right, Thiemo, you could do that; this article wasn’t intended to be a ‘bullet-proof’ guide, however, more of a quick example to show what’s possible and to get people thinking about how to implement it. There was a lot more I could have done to this menu, but that wasn’t really the point.
I made the decision to put the hover on the li rather than the a just to show a little difference between IE6 and IE7.
-
18.
-
19.
Try to remove “li a { display: block; width: 100%; }” from the CSS. What you get is a box that turns white when hovering but does not react when clicking the mouse button. PS: Please remove my broken comments. Safari for Windows still has a lot of nasty bugs.
-
20.
I completely agree with your take on graceful degradation with regards to CSS3. I think when clients are involved it can be difficult but for internal systems, personal sites or your own stuff why not.
I’ve recently been working on our company site over at http://www.hedgehoglab.com and used a number of bits of CSS3. It might not look the same in all browsers (but how many non geeks actually use more than one?) but it was faster to develop, less bug prone and easier to maintain. My time in this case was more important than a cross browser identikit website.
-
21.
[…] article, Progressive Enhancement with CSS 3: A better experience for modern browsers, a rewrite of a piece I wrote for CSS3.info last Summer, which explains how to use cutting-edge CSS features to improve the user experience for […]
-
22.
[…] hacks to accommodate Internet Explorer 6 and other browsers that are not standards compliant. While graceful degradation (or progressive enhancement, depending on which philosophy you subscribe to) will continue to be a […]
- 23.
-
24.
Gracefull Degradation � sobre Acessibilidade | Boas pr�ticas de Desenvolvimento com Padr�es Web says:Comment » April 13th, 2009 at 11:33 pm
[…] Graceful Degradation – CSS3.info […]
-
25.
WEB 3.0 » Blog Archive » �As� que quer�as saber (casi todo) de CSS? says:Comment » April 18th, 2009 at 3:31 am
[…] Graceful Degradation – Peter Gasston […]
-
26.
Varför ska man använda jQuery från Google? | Andreas Karman says:Comment » July 23rd, 2009 at 12:34 am
[…] på din webbplats inte fungerar. Men gör man webbplatser utifrån devisen Graceful Degradation ska detta inte betyda någon […]
-
27.
[…] using progressive enhancement for the interactive components, unobtrusive Javascript, and graceful degradation of the pages for legacy browsers. Maybe used some of the attributes of ARIA. Sure that’s a […]
-
28.
[…] from here […]
-
29.
[…] apenas colocar uma cor de fundo no select para não destoar muito do desenho – Isto chama-se Graceful Degradation (que por sinal também merece um futuro […]
-
30.
Combobox – Formulários personalizados « RN Discas de Webdesign says:Comment » July 9th, 2010 at 6:30 am
[…] apenas colocar uma cor de fundo no select para não destoar muito do desenho – Isto chama-seGraceful Degradation (que por sinal também merece um futuro […]
-
31.
[…] uitgangspunt bij de toepassing van nieuwe technieken in browsers is graceful degradation: het zorgen dat ondanks het gebruik van nieuwe technieken, een site er ook op oudere browsers goed […]
-
32.
« The Redesign of the Dan’s Custom Plans Website :: Paul Crittenden | The Rabbit I Pulled Out of My Hat says:Comment » March 17th, 2011 at 10:04 pm
[…] I won’t go into much detail, there are many very good resources on the web that describe how to format the text-shadow property, but that line of code above gives the text a drop-shadow. Now, you can go overboard with drop-shadows. You should always be able to justify why you’re adding a feature like drop-shadows. In this case I think the drop-shadow sets the logo text apart with a little lift and also makes it easier to read. The good thing about the text-shadow property is that browsers that don’t support it simply ignore it. Internet Explorer 8 and earlier will simply display the flat text. Web designers call this kind of thing “graceful degradation.” […]
-
33.
-
34.
www.prince.gr | Αναδημοσίευση: Πειραματισμοί με CHECKBOXes και RADIOs says:Comment » July 5th, 2011 at 7:10 pm
[…] κι αλλιώς αγνοείται. Αν αυτό είναι αποδεκτό fallback (ή graceful degradation αν προτιμάτε), μπορείτε να σταματήσετε να […]
-
35.
Designing for mobile: Part II | chroni.ca | Women, technology, multilingualism, sustainability. says:Comment » July 18th, 2011 at 11:24 pm
[…] It contravenes the W3C guidelines and prevents graceful degradation. […]
-
36.
Kittens, bacon-ipsum and why we don't need to worry about the mobile web | Made by Many says:Comment » July 20th, 2011 at 1:01 pm
[…] of responsive web design, and even more on the guiding principles of progressive enhancement and graceful degradation… but it would seem these notions have been greatly ignored, and are frequently bundled into […]
-
37.
[…] So what about browsers which don’t support CSS 3, well there is a trend in the industry to reward the users with up to date browsers through Graceful Degradation. […]
-
38.
Responsive Design: Progressive Enhancement, Part Deux! | Aaron T. Grogg says:Comment » February 9th, 2012 at 1:41 am
[…] think of it as progressive enhancement. The term (and philosophy) progressive enhancement replaced graceful degradation back in 2003, but back then it was mostly pertaining to CSS and […]
-
39.
Diskussion um Fragmentierung völlig überbewertet… | Polente Online says:Comment » May 23rd, 2012 at 12:00 pm
[…] Enhancement und Graceful Degradation sind hier die Zauberwörter die helfen entsprechend zu reagieren. Natürlich bedarf das auch […]
-
40.
StageBlog | Phonegap & HTML5 Canvas: the Holy Grail to multi-platform development? says:Comment » December 28th, 2012 at 4:08 pm
[…] HTML5 canvas-element dus aan voor wie geïnteresseerd is in Phonegap-development ! Happy coding! Graceful Degradation How ‘Who stole the moon’ uses canvas to speed up performance in a ‘native’ […]
-
01.