By Andrew Tetlaw

Add More Sparkle with CSS3

By Andrew Tetlaw


Have you noticed that when EA Games release a new title they often simultaneously release the game for every gaming platform from PS3 to Nintendo DS?

There are huge differences in the capabilities of those devices and yet they adapt the games to suit each one. They change the visual design and gameplay while maintaining the games’ core experiences, themes, and branding. They focus on giving each customer the best experience for their chosen gaming device.


I can relate this to CSS development. Issues regarding IE6 support aside, we seem to be in a fantastic situation where we have a capable collection of browsers, all with a decent level of CSS2.1 support: Safari, Firefox, Opera, Chrome and Internet Explorer. In fact, this is the first time I can remember when there are 5 browsers available, all with a mature and compatible level of CSS support.

Over the last few years, best-practice CSS development has shifted from graceful degradation to progressive enhancement. And buoyed by the progress of modern browsers and the demise of older browsers, the excitement about what is possible right now is increasing. More and more designers are considering how to provide the best user experience possible for each browser without risking compatibility.

Here are a few examples I’ve come across recently:

Media queries allow fine control over how CSS rules are applied based on the features of the device on which your web page is being displayed. Device width, color, resolution and more can all be queried for. Reinhold Weber has created a demonstration of how the combination of media queries and CSS3 columns enables you to provide an optimized experience to Firefox, Safari, and Chrome users. The technique increases the number of text columns according to screen width.

Jonathan Snook has demonstrated a text rotation trick using the CSS3 transform extension in Safari, Chrome, and the latest version of Firefox. As a bonus he also demonstrates that by using the proprietary Microsoft filterproperty you can also support Internet Explorer.

Tim Brown achieves a pure CSS text-gradient in Safari while Markus Stange has some fun with box shadows in his post “Fun with Box Shadows.” Markus produces some impressive effects for buttons in Firefox 3.5 and there is also some support for box shadows in Safari and Chrome.

I used the -webkit-box-sizing property in my Adobe AIR application in order to force an element to take 100% width while excluding the width of its borders and padding. Ordinarily the borders and padding would have extended the width of the element to greater than 100% — an often encountered annoyance. Now the box-sizing property has widespread browser support as James Hopkins explains.

CSS text shadows, which have always been supported by Chrome (and much longer by Safari [since version 1.1]), are now supported by the latest versions of Firefox and Opera. Westciv has an excellent CSS text shadow generation tool that you can play with. You can also have some fun with the CSS gradient generation tools, currently supported by Safari and Chrome.

The list goes on: rounded corners, custom fonts, and RGBA colors. It certainly is exciting!

But, as exciting as this stuff is, it still has to be cost effective to be worth the effort. So I’d be interested to hear if anyone is using progressive CSS enhancement in any way in their daily work? If you do so in client work, how do you sell the idea to clients? If a client can see an enhancement demonstrated in one browser, do they demand it in all browsers? And if you have any live examples let us know how you did it.

  • I’ve been using text-shadow quite a bit lately (and only with text that won’t unreadable if a browser doesn’t support it) and on my latest site I also used RGBa for a rollover background-color (to allow the pattern behind to still show through). In browsers that don’t support RGBa, they just got a solid colour. The client didn’t/doesn’t know there was any difference because it wasn’t included in any mockups and it’s quite a subtle change anyway.

    I’ve also used rounded corners on a couple of occasions on smaller, not-so-obvious elements where the difference between rounded and square corners isn’t so noticeable.

    I’ve also used @font-face once as a fallback for those browsers without js enabled (Cufon was used) but aim to be using it a lot more in the future and will be keeping a close eye on things like Typekit, Kernest, Font Deck etc.

  • @Tyssen, so am I right in thinking you’re just doing it, but without drawing the client’s attention to it?

  • Yep, that’s right.

  • Yeah little bits and pieces – text-shadow, rounded corners, button gradients – that kind stuff; nothing mission critical for web work.

    But for application work, that’s totatally where it kicks in. AIR applications are one good example, Firefox extensions are another – there you have the freedom to use the most progressive techniques; and believe me, it makes *so much* difference! It makes some things much easier, other things possible at all – in the upcoming 1.1 update to CodeBurner, for example, I’m implementing a little “x” delete icon in the search box, and that requires a flexible parent container to the textbox, and for the textbox itself to have 100% width; but given that it also has padding hich varies by platform, it would have been imossible without -moz-box-sizing.

    You learn too that Firefox has some very nifty properties that it uses for internal UI styling that would be very nice if we could use on the web at large. -moz-box-flex anyone? :)

  • Unfortunately, most of our client base still uses IE6, and they demand pixel-perfect sites in it (and identical designs in IE7 and Firefox).

    For personal sites I can look forward to using some of this stuff (simple things like rounded corners are enough to make me happy!), but for business, not for a long time.

  • Justen

    I’ve been using CSS3 and HTML 5 features a *lot* in the past couple months on pet projects, but I mostly avoid it for live sites. I don’t do a lot of front-end design these days, mostly backend programming for applications, so it’s nearly a non-issue for me. Nonetheless I love the options they give me for UI styling when I’m not worried about what it looks like in IE or when a nasty looking fallback is not too harmful.

    IE is so bad in the realm of JS performance that I don’t see it as a serious platform for web applications anyway, and as much as I hate a tacky “works best in” tagline it’s nearly unavoidable if you’re doing anything complicated client-side. I can either provide 80% less functionality and keep the experience the same in IE, or I can provide the extra features with the caveat that they look like crap and run slow as dirt. I say, screw ’em and give ’em a firefox, chrome, safari, whatever logo (talk to the logo, the dev don’t give a damn).

  • modpluz

    for me, i’ve been using rounded corners for quite some time now and i must confess, these CSS 3 features are really cool and i can’t wait till when major browsers support them fully.

Get the latest in JavaScript, once a week, for free.