plebeosaur.us

After taking a peek beneath the covers of the beautiful WordPress 2.7 admin interface and reading John Allsopp’s Shiny Happy Buttons article on 24ways.org, it’s become abundantly clear that the next great web design era isn’t going to wait around for Internet Explorer. The future is going to be a bit more rounded and IE will be, well, square.

For far too long, web designers have had to deal with a lack of real-world design tools in CSS. In their place, we’ve used kludgy HTML, images, and even JavaScript to accomplish basic visual treatments such as transparency, shadows, gradients, and, yes, rounded corners. Every solution using this old toolset calls for an uneasy compromise of appearance vs. semantic markup vs. development time vs. file count/size.

Why can’t we just ask the browser to provide a 5px radius in CSS in whatever color/width/shape we want and get on with our day? We can.

Welcome Border Radius

Firefox has supported a border radius property for some time now (-moz-border-radius) and Safari recently came out with their own experimental syntax (-webkit-border-radius). Furthermore, the CSS Working Group recently announced some pretty robust support for the border-radius property which means the usually standards-leading Opera should be getting around to roundness soon as well.

Using border-radius today provides nice, rounded corners and shaves a ton of development time (no more round-trips to the image editor or nesting HTML for flexible dimension boxes).

The problem, of course, is that 70% gorilla in the corner. So, what about IE? The yet-to-be-released IE8 is finally getting things right with CSS2.1 (a good thing) and moving their proprietary properties into -ms- vendor specific extensions (also a worthy effort). Yet it doesn’t look as though the IE team will be tackling border-radius until IE9 (2 years?).

Progressive Visual Enhancement

So at this point we have two options when it comes to going all CSS on rounded corners: we can whine and cry about how IE sucks (been done already) and wait for IE to get around to border-radius or we can take progressive enhancement to the next level.

Let’s take the latter route. Starting today, let’s throw out all the crappy, nested HTML; the countless, un-scalable images; and the overly-complicated JavaScript work-arounds. Let’s start fresh…

1. Lay a foundation of basic borders—square, un-adorned, solid borders. Every browser shall see squared edges by default. No problemo.
2. Then throw in some rounded corners for Firefox and Safari and anyone else that’d like to join the party. Kewl.
3. Lastly, add a dash of gradient to Safari as prescribed in Shiny Happy Buttons. Brilliant!

Sweet. No one gets hurt, the cool kids get the nicest looking stuff, and those squares that want to join the cool kids just have to download a free browser. What could be better?