Mon, June 22, 2009 On CSS3: ‘Graceful Degradation’ or ‘Progressive Enhancement’
To me, the two terms ‘Graceful Degradation’ & ‘Progressive Enhancement’ are a half-full, half-empty kind of thing. Regardless of your perspective, the idea is rock solid; use modern coding techniques, but never at usabilities expense.
Now, to be clear, what I am describing in this article is a very simple type of graceful degradation… or, maybe it’s not. But, it certainly isn’t complicated yesteryear browser sniffing nonsense. As far as Progressive Enhancement goes, people much smarter than me have written on the subject. Read Understanding Progressive Enhancement in A List Apart No. 269 — it’s a great read for understanding the difference between these two coding methods.
I’ve used a few really nice new CSS3 modules in coding this site: text-shadow, transition, box-radius and box-shadow. In this article, I’ll show a few examples with screenshots and such, and share some CSS code with you.
The First Example: Round Corners on a Navigation Bar
For web designers that like rounded corners on a container here and there (me), actually making them round represents a whole slew of challenges. More than I’m willing to write about right now—it just shouldn’t have to be that hard.
Truly a Godsend, border-radius is one of my favorite new CSS3 modules, you just specify a few simple selectors & keep movin’. If the browser can’t render them, it ‘gracefully degrades’ to a sharp square corner. Simple.
A very simple little snippet of CSS creates a rounded corner container — and if the browser doesn’t support it, a standard square corner is rendered. Now, if you have a style sheet for IE, you can go through the trouble of creating those rounded corners the hard way, or let them be square. On my site, I chose to let them be square. I also used some transitions on the hover action… mmm… transitions. Here is some sample code for border-radius and trasitions:
.navBar {border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;}
.navBar li a {width: auto; -webkit-transition-property: color, background-color; -webkit-transition-duration: 1s, .75s ;}
.navBar li a:hover {-webkit-box-shadow: 0 1px 6px #2A2A2A; padding: 35px 0px 13px 0px; text-decoration: none;}
Next: Text Shadow on Headings
Another welcome module of the CSS3 standard is text-shadow. The act of adding a simple shadow to text can really have a big impact on the overall presentation of a web page.
For example, with a dark, soft shadow beneath some text, it literally lifts up off the page. The inverse being a tight dark shadow above and a light one below ‘presses’ text into the page.
For now, only a few browsers support text-shadow. Nothing bad happens when the browser can’t render the effect - it just doesn’t show. Here is the painfully simple CSS code that renders the example above:
h1, h2, h3, h4 {text-shadow: 1px 1px 2px #FFF;}
Finally: Multi Column Layout (sweet!)
Multi Column Layout is going to allow designers to create web pages that look like your favorite magazines, newspapers, album inserts and other printed media… even books.
Here is a the kicker though - no more wrappers and containers and multiple divs and floats and positio—aaahhhhh! Just a few CSS selectors and columns are begotten.
And here’s some code for column-count, column-gap & column-rule:
.columnContainer {-webkit-column-count: 3; -webkit-column-gap:1.5em; -webkit-column-rule: 1px solid #FFF;}
In conclusion, keep your designs and layouts liquid - in the sense that you can offer elements on a page that look either this way, or that way. I’m not suggesting you must embrace Graceful Degradation, Progressive Enhancement, or some other technical standard — but, perhaps engage in some ‘Selective Coolnessivity.’
Web Design
Reader Comments (11)
In the "Round Corners" section of this post. You made a light comment about Safari's box-shadow ability. I just want to point out that Firefox can too.
.box-shadow-1 {-moz-box-shadow:1px 1px 3px 1px #BBBBBB;}I see you've also got transitions on the links. I'm just doing the same to my site right now.
I wonder when IE will catch up.
Hey C. -
That’s what I understood as well... however, I don’t see a shadow rendered on Firefox.
Michael -
I am loving the whole CSS3 transitions thing — so great. When will IE catch up... hmm... I’ll wager a guess at never?
Wow that border radius is kick a** been looking for something like that. Thanks so much :)
Ashley :)
We're on the same page. While some client projects warrant doing whatever it takes to make it look right, I enjoy letting LT IE8 users miss out on things like opacity and border radius on personal projects.
sidenote: way to put extra effort into those visual examples. lovely little .js hovers.
awesome post ;)
Hey, thanks Stephan - glad you like it.
Great post, I recently re-did my blog and incorporated a lot of CSS3 into it. Thanks especially for the easter egg, it is painful to see how easy that transition is done, coming from jQuery even.
Thanks so much :) Great post!!! :)
Using mobile devices such as phones and PDA's to access the internet is becoming more and more popular as technology is constantly advancing. As internet usage on mobile devices increases we will have to pay more attention to websites that attract mobile web users.