Beautiful Degradation with Progressive CSS
Posted by GB Bowers on September 10, 2009
As I've taken tenure as the designer and web developer here at TeachStreet, I've been focused on a progressive approach to the technical end of web design.
When I started designing web sites in the late 90s, everyone seemed entirely focused on pixel-perfect design across every browser. Quite frankly, that's damn near impossible. It's hard enough in traditional print design to get things like colour correct, and that's ink and paper. Getting "perfection" in web design, especially in those days before web standards, is like printing the same design on copy paper, airmail paper, newspaper, and silly putty, and expecting it to look exactly the same.
So what does that mean? It means you have two choices: pull out your hair in frustration, hacking away the midnight hours until you figure out how to make IE7 render your code just like Safari or Firefox does; or you can follow the web standards, including the new ones, and be rewarded as browsers move toward consistency. The second choice may seem a bit crazy, and a bit obscene to usability purists who think I'm saying "if the site is broke, it's YOUR fault." Not at all: do it right, but do it smart. If the visual perfection is achievable in the modern browsers, but you lose a little of the "ooo! shiny!" slickness in older browsers, give the user what their browser can handle, without hindering the usability. This is beautiful degradation.
Okay, so that may seem great in theory, but doesn't that just sound like a sloppy version of the midnight hours of hacking I mentioned above? Well, no, because there have been a few new handy helpers developed recently to make things a lot easier.
One of them is Modernizr, from Faruk Ateş and Paul Irish. What does it do, aside from make our spell checking software underline its name? Oh, it simply runs some tests to see what "modern" CSS (and even HTML5!) bits the user's browser understands! AWESOME. So, instead of browser sniffing or conditional comments or underscore hacks, etc, we can define the style the way we want it, and create specific backup styles for those browsers that don't support our new fangled shiny stuff.
Example:
ZURB have a fantastic article on creating amazingly flexible buttons using box-shadow, border-radius, text-shadow and rgba (which is RGB colour with an additional value for an alpha channel opacity). I fell in love with the technique and you may recognise it around TeachStreet's pages (though not all—this is a big, complex site, so I'm slowly converting things over). I did, however, run into the problem that mocks all web designers.
Internet Explorer.
While I was fine with losing rounded corners and drop-shadows on the buttons (I will be researching efficient, flexible ways to bring them over, though), the lack of a border disturbed me. They looked like buttons in IE. Sort of. I could have just defined the border colours without rgba (read the ZURB article if you're not sure what I'm talking about), but then I'd be redefining the borders every time I made a button with a different body colour, or altered some existing button.
Here's where Modernizr steps in to help. In browsers that don't understand rgba, the colour is treated as transparent—as if you didn't say anything at all. In those same browsers, Modernizr tests and finds that missing support, and then conveniently adds classes to the <html> tag to tell you what's missing and what is supported. So after defining my awesome button (.button, in this case), I was able to say .no-rgba .button and define stand-in colours for the borders. They might not be quite as sexy as the rgba effect, but they add that extra layer of depth to make the button more, well, button-like.
There was an added bonus. I had initially fixed this problem with conditional comments and separate stylesheets. When I started using Modernizr, I realised that I'd ignored Opera in my testing. Version 10.0 lacks rgba and other nice CSS3 bits (though it is said to be coming), and had I focused on browser-specific hacks, the button wouldn't have benefitted in Opera. With Modernizr, I didn't even have to think about which browser supported what; I just dealt with the fall-back case. Brilliant!
Okay, so what did I gain? A silly border? Is that all? Nope. ZURB mention a nice little active state for their buttons, using top to push the button down a pixel when you click. This is pretty neat, but I took it one step further by using -webkit-transform: scale(.9); (and -moz-tranform and transform, for the future case). This made the button scale down slightly when clicked, making it look as though you were pushing it in. This can be seen in Safari, Chrome, and Firefox 3.5 on the "Teach" page, when you click the giant button. Of course, this doesn't work in all browsers, but the top method works where it doesn't. Thus, .no-csstransform a.button:active { top: 1px; } fixed us up in those cases.
I could ramble on and on about these techniques, and in fact I will if you let me. I offer a lil meet-up session to talk more about all this, for those of you web-types in Seattle. So if you love CSS like I do, and this intrigues you, let's grab a cup at Tougo and chat about it. I don't have all the answers (and freeloaders, this isn't a lesson on how to build website or fix all your bugs, and no I won't build your website for the $5 fee), but it's a fun topic to discuss, and hopefully I can teach you something useful.
Related Article
The Techniques Which Can Make Your Design Look Impressive
Zamir Anjum – September 08, 2011
-
In today's competitive world everybody is trying to win the race with his competitor through the products and services they offer. Even if products and services are the same, even then the thing which...
Read more »
