Zen and the Art of /.*/

The following is in response to a discussion we’ve been having at work lately which was sparked by these two posts:

Why CSS should not be used for layout

CSS and the meaning of life

Which was then followed up by a link to this post:

Recreating the button

A few thoughts:

While I think that is some seriously cool stuff (the Google button), it is almost as strong an argument for the counterpoint. That guy is doing some serious ninja acrobatics just to make a button that looks halfway decent and functions as any basic user would expect. And while I grant that his CSS implementation is better than the 9-cell table implementation, it is just as much an abuse of CSS as the original was an abuse of tables.

Note that his button was up to version 3.1. Version Three Point One. We’re talking about a button. A button.

Also, I doubt that it looks just as good in all browsers and if it does, it is probably constrained to its exact current design, less some color changes.

He relies on something called “display: inline-block”. No comment.

A few telling quotes:

“This created a one-pixel notch in each of the four corners, giving the subtle illusion of a small rounded corner.”

“I chose <b> because it was short, and semantically, it didn’t mean anything.”</b>

“There were many other steps in making these buttons a reality.”

“These buttons never would have made it into production code without the help of several Google engineers.”

“Two developers (no longer at Google) also contributed heavily to the original button code”

“He also created countless iterations of the button interactions for Gmail, and endured numerous reviews and feedback cycles to finally get them launched in the product.”

So, we have 5 highly-paid, highly-skilled, well-funded Google hackers who put their heads together to create… a button. Oh wait, no:

“There are numerous other designers, developers, and engineers at Google who touched these buttons at one point or another. They all deserve credit too. I’ve only given props to four of the most prolific people who made these buttons a reality.”

You’d have thought they had launched a spacecraft. But at least they built a rock-solid button that works in all browsers. Oh wait, no:

“These buttons don’t permeate the entire Gmail or Reader interfaces yet for all browsers.”

So, yes, this is a sweet hack, but a serious HACK. It is not a ringing endorsement for CSS. “Recreating the button,” e.i. re-inventing the wheel is not an impressive endorsement for a new technology. Tables and images have serious drawbacks. Pure CSS has some serious drawbacks. All implementations face browser issues. Such is the state of web development. Weigh the options given the current requirements and constraints and use the best tool for the job. Leave the religion to the churches–we have cool things to create.