CodeStore.net comments on "Using Image Sprites To Add Icons to HTML Input Buttons"

Reply from Patrick Kwinten

Patrick Kwinten — Wed, 21 Sep 2011 01:46:53 -0500

or use XPages and add an icon reference in the properties box?

Reply from Ferdy

Ferdy — Tue, 20 Sep 2011 15:16:14 -0500

Jake,

First of all, both approaches work and are just fine. The image approach is robust and creates a great, consistent result. The small downsides are the image's download size and the inflexibility.

Still, I'd like to make an attempt on selling CSS3 to you. Here's a few reasons:

- You don't need hacks. At the most you need a few vendor-extensions in your CSS. They're not pretty, but they're not hacks. In fact, vendor extensions are the standardized way to do this as long as the implementation is not final yet.

- CSS3 can accomplish the look you are after. I see rounded corners, shadows and an inner gradient. CSS3 can do all of this. The big bonus is that you can change the color, size, rounding, etc without needing to create a new image.

- If you use vendor extensions you'll be surprised how many browsers you cover. And guess what, it is not going to suck for unsupported browsers. They'll still get a button, a colored one, with a label.

The last idea is actually the most important concept. The idea that a design needs to look 100% the same across browsers is dated. Better browsers get a better experience, lesser browsers still get a good experience. Unless, of course, you have a client that insists on pixel perfect IE6 support. In that case you make it visible how much such a request costs. I bet they will think a square button is fine.

To show you how incredibly subtle these differences can be:

http://www.ferdychristant.com/blog/archive/DOMM-83SSEX

Reply from Jake Howlett

Jake Howlett — Tue, 20 Sep 2011 14:57:39 -0500

I respect your opinions and knowledge Ferdy so I'll take it as read that CSS3 is a better option. I'm yet to be completely sold on the idea though. Probably because I've not used it extensively. From what I have seen though I don't think it can reproduce the niceness of an image yet. Not across all browsers in a consistent fashion anyway. See the second link in the main article to the post about creating realistic button images. It talks about adding an inner border and a semi-transparent half-sized rectangle overly on a simple gradient background to make it look truly button-like. While the same thing can probably be achieved with CSS3 I'd imagine it would involve a lot of messy hackery. For now I think I'll stick with using images.

Reply from Sam

Sam — Tue, 20 Sep 2011 10:09:39 -0500

Great trick! There's a project I have right now where I can plug this right in. If you could upload the sample database, it would be much appreciated. Thanks, Jake!

Reply from Ferdy

Ferdy — Tue, 20 Sep 2011 10:05:29 -0500

Personally, I'd get rid of that blue graphic and code the gradient and rounded corners in CSS3. For IE, you can use the gradient filter.

The icons are fine, but even those can possibly be replaced with Unicode characters to make it completely image-free.

I use this quite a lot:

http://css3button.net/

Reply from Jake Howlett

Jake Howlett — Tue, 20 Sep 2011 09:45:00 -0500

Good points! Both worth bearing in mind.

Why are you commenting? Maybe to remind me that people are listening ;-) Also because it's not just me that reads the comments. You're helping enlighten others - not just me.

Reply from Satourne

Satourne — Tue, 20 Sep 2011 08:29:32 -0500

Hello,

interresting but there's a limitation with the button width (and it's value) ...

With HTML5 you can use a background with the icon and add rounded corners to the button but i think you know that ...

Using image sprites requires less HTTP requests than several images but i think you know that ...

So why am i replying to this post ? ...