Home/ Questions/Q 3226730
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T16:29:29+00:00

I built a website recently, and decided to create buttons that depress on click

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0