More Rounded Corners with CSS
2007 Update
A new technique, Even More Rounded Corners With CSS, has been published; it uses a single image instead of slices, and still supports PNG + alpha transparency etc. Check it out.
2006 Version
Admit it. You know it, your Mom knows it and even your Grandmother probably knows it by now: Rounded corners, borders and drop shadows (while nothing new) are all the rage these days on the "Web 2.0, fully Ajaxed, Ajax-enhanced, Ajaxified*" Web 2.0-era Web.
As I write this, I am in the midst of Web Development on the new Yahoo! Photos (unofficially version "3.0" internally, I just call it a "dream job,") which could theoretically have no shortage of rounded-corner dialogs using equally-round borders, drop shadows and perhaps even gradients. (Side disclaimer: The code and design examples shown are my own, and are not necessarily Yahoo!-related.)
From a Web Development perspective, these kind of design requirements can still bring the occasional headache. How does one standardize code and approaches to building potentially-numerous variants of rounded-corner boxes, allowing for fluid design and retaining flexibility for future updates, without going crazy?
What We Don't Want
As Web Developers, the usual ideals apply when writing code to meet a design goal.
The Usual Web Developer Ideals:
-
Keep markup semantic and lean.
Minimal, if any, extra cruft and "hook" elements.
-
No inline presentational images.
Related to above; don't litter markup with inline rounded corners, for example.
-
Fixed-width/height design is generally bad.
Goes against flexibility, scalable layout etc. Keep change and varying space requirements in mind at all times.
-
Javascript means "slower."
Elements could be dynamically added, but that introduces external dependencies (Javascript) and potential performance issues. I tried this in 2003, and I don't recommend it; I have since moved on.
-
Tables for layout are bad.
Layout is one thing, rounded corners are an even more heinous crime - that's so 1997.
Been There, Done That.. Still Not Solved.
Many hours, late nights and coffee have undoubtedly been spent and drank, respectively, working on the problem of "give me a fluid box with rounded corners." I can personally attest to this. (See BoxLib.)
A lot of other approaches (do a search for "css rounded corners") use CSS hacks, inline images or even Javascript to accomplish the desired behaviour. Some have programmatically tried to generate corners via one-pixel div elements using Javascript; while perhaps a minor technical feat, they are ultimately kludgy, slow and perhaps unreliable.
It is my opinion that the cleanest solutions for producing design and layout will focus on CSS and well-formed, flexible and "copy-paste"-able-type markup: No javascript, no hacks, and more reliable results. The only real requirement is providing enough elements for CSS to apply background images, borders, margins and padding to - and in the case of rounded-corner dialogs, the nesting of elements for the "Sliding Doors" method.
Providing The Right Hooks
Most design problems with CSS involve a desire to have multiple, stretched or fluid background images on a single element. Unfortunately, current standards don't provide this sort of affordance. Thus, we are left with nesting elements and other techniques which allow the kind of effects we want. For example, Douglas Bowman's simple yet ingenious Sliding Doors method, uses a parent element with a single nested child in order to provide CSS "hooks" for two background images - thus forming a left and right "cap" which can realise, in a fluid matter, a varying number of designs.
Header, Body, Footer
An approach like this may be more valuable than others, because Web Developers want to write code that can meet potentially-changing design requirements. Ideally, one of many styles of rounded-corner box could be swapped out with any other using this method, without having to modify the HTML.
The method is quite simple: The whole dialog is vertically split into three slices, each being an instance of the "Sliding Doors" method. Each "left" section (elements with CSS classes .hd, .bd and .ft,) has a corresponding nested "corner" or "cap", CSS class .c which merely overlays the left with a right-positioned, non-repeating background image.
On Fluidity
This method is horizontally fluid relative to the size of the left background image applied to .hd, .bd and .ft. Using PNG, a 1600-pixel-wide image can be cut with a minimal file size. If you're concerned about users hitting this limit, cut larger images or set a max-width on the .dialog class.
Vertically, the same scaling applies - the images cut will need to vertically expand to cover the maximum height case. For the example shown here, the header and footer are fixed-height and all content is centered inside the body.
PNG and IE 6: Goodbye, and Good Riddance
Some wise developer said a while back, "IE 6 is the new Netscape 4." With IE 7 coming soon to replace an aged browser near you, hope is on the horizon for using alpha-transparent PNGs to their full potential without the crippling DXAlphaImageLoader and filter: crap that has plagued our CSS and bloated our Javascript for the last five-or-so years. In other words, using them as regular images and background images as we've been used to -- in fact, my PSP's web browser handles PNG alpha transparency better than IE 6.
IE 5, 5.5 and 6 all have restrictions on alpha-transparent PNGs; elements applying them must "have layout", can be stretched or cropped but not tiled (a huge setback in my opinion,) and can render elements seemingly-"disabled," invisible to events and clicking. My suggestion is to downgrade IE 6 to GIF where applicable, and save yourself a lot of time and trouble in the process with low-to-minimal cost. One would hope that alpha transparency is not that crucial to the operation of your site.
In Closing
This is just my current thinking, a combination of an adoption of existing ideas alongside a few new ones; the Sliding Doors method has worked quite well for rounded corners, so it makes sense to apply it to creating fluid rounded boxes with borders and drop shadows as well. SVG and Canvas are bringing vectors to possible mainstream use, it will be interesting to see where those respective technologies go. In the meantime, us HTML/CSS/Javascript developers have an existing toolset and browser base to work with, and naturally common support wins overall.