conormulligan.com

A few years ago, one of the most important goals of responsible web design was to get your site looking identical, or as close to identical as technically possible, in as many browsers as possible. Typically, this involved writing valid markup and valid CSS, and then tacking on a panoply of hacks to make it work in Internet Explorer. This is still standard practice for a lot of designers, especially those who choose to or must support IE 6. However, a significant number seem to be much less doctrinaire about making sites look absolutely the same for absolutely every user, even as it's gotten substantially easier to do so. More important, it seems, is making websites look as good as possible in more capable browsers, then making sure they degrade gracefully and subtly when rendered using older engines.

Here's an example: the latest versions of Chrome, Firefox and Safari all support the CSS3 border-radius property¹. If you visit twitter.com with any of these browsers, some of the UI elements, including the main content area, will have rounded corners. It's nothing superfluous, and nobody would really miss it if it weren't there: which it isn't for Internet Explorer users. Instead of building a messy hierarchy of nested divs and images to get rounded corners like designers used to do, the twitter guys are forgoing the effect altogether in older browsers, and enabling it in modern browsers by simply adding a couple of CSS declarations. Almost everybody wins; the twitter designers get cleaner markup and save a small amount of bandwidth by not having to serve excess images, and a lot of users get pleasantly round corners and slightly faster page loading. The only loser is the guy with an old or crappy browser, and he has an easy upgrade path to the nicer site: download a better browser. Plus, all he's losing out on is a visual flourish that has no practical impact on how he uses the site, so if he chooses to keep using old and crappy software he can do so without being adversely affected.

I've noticed this becoming more and more common, particularly as Chrome and Firefox eat into IE's market share and more developers target mobile browsers². If you take a quick poll of the websites you visit most often, I'd wager that at least a few look better in Chrome, Safari and Firefox³.

I'm not suggesting designers are going to allow their work to look drastically different between rendering engines, but I won’t be surprised if everything starts to look a little bit staler in Internet Explorer as CSS3 usage creeps more and more into the mainstream.

Overall, I think this is a hugely positive trend. If more developers start using and field-testing CSS3, it should prompt users to demand more from their browser, and encourage vendors to support web standards promptly and thoroughly⁴.

Anyway, the moral of the story is this: don't be afraid to start using cutting edge web technologies before they gain widespread adoption. That said, some functionality is more suitable for use now than others; border-radius, text-shadow, @font-face and gradients⁵ are all good properties to play around with. If you need a quick guide to what's supported in each browser, check out html5readiness.com.

1. Some versions require the -moz and -webkit vendor-specific prefixes.

2. Mobile browsers are almost all based on WebKit, which is on the bleeding edge of web standards support. I don't think the impact Mobile Safari has had on HTML5 and CSS3 uptake should be understated.

3. This is doubly true for sites whose audience is largely made up of browsers that aren't IE. Also, I suspect that some big media sites like The New York Times and Newsweek are more reluctant to use emerging technologies because they have a greater stake is making sure that their sites remain consistent across all platforms. In other words, when you see The New York Times using text-shadow, you'll know CSS3 has reached critical mass.

4. To be fair, the major straggler, Microsoft, is making a big push to support HTML5 and CSS3 in IE9. Look out for it in 2011.

5. The syntax for gradients is fairly different in WebKit and Gecko, and both engines require a vendor-specific prefix. Gradients are supported in IE by way of filters; meaning cross-browser CSS gradients are entirely possible right now, if not quite as cleanly as CSS3 will eventually allow.