Why should I use CSS3 buttons?

Question

I built a website recently, and decided to create buttons that depress on click with CSS3, pretty cool.

But is there really a valid reason to use CSS3 over a sprite, as only the modern browsers show the CSS3 buttons?

The client asked me this question, and all I could think of was less http requests, so loading would be slightly faster. I can see from a clients point of view that this is a pretty week answer.

Is there a better reason?

Or is there a fallback method that would be able to move a sprites background-position, or change the gradient and add a box shadow on a hover / focus?

Just writing that made me wonder if modernizer would be up to the challenge...

Answer 1

This is much more a ethical and business question than a tech question, but let's see some points.

First, I think your client should not get to know all tech details about implementation. He/she should know what he/she needs to know, and that's enough.

You shouldn't say "I'll make your site with CSS3, some new HTML5 elements, and nice javascript eye-candy effects" for a non-tech folk. Just say "I can make a good site for you."

If he question about what your are using or why your think this is a best approach, then you reply with benefits.

It is lightweight, brings less problems with compatibility, and is easier to maintain. => Reduce time his/her client will be waiting to website load, everytbody can see it, and will cost less in the future requirements.

CSS3 is not a new revolutionary stuff, you should face these technologies are evolutionary. All previous rules still apply, including fallback rules.

CSS Sprites are a technique made with CSS2, thus it should work with any browser, including some old ones (not sure about IE6).

Gradients are new. FF 3.5+, IE9 beta, Opera and webkit browsers display them. IE8 or older don't. Some thing for box-shadows.

For these, I just added some really simple rules as fallback.

When I develop, I put the link to main stylesheet on page's header, and then I use a IE conditional comment for load IE only stylesheets and scripts.

On this IE only stylesheet, I just add the hacks or fallbacks needed to make it a little decent. You have MS filters to handle that. My IE.css stylesheet look like:

.gradient {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff')";
}

.boxShadow {
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#666666, direction=135, strength=5);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#666666, direction=135, strength=5)";
box-shadow: 5px 5px 5px #666
}

Note that there are fallbacks rules even with these, to handle IE6, IE7 and IE8+. But it's tiny and ensure a better display.

Beside this I suggest you to read http://24ways.org/2009/ignorance-is-bliss

Modernizr is a good lib, but think if you really need it. You may be end using a bulldozer instead of a spoon.