Hacker News Reader

Comment by Maro | Hacker News Reader

What are the pros/cons of using CSS instead of images?

Performance -- even if the CSS is the same size as the image, a single CSS file can return all the icons with a single HTTP request, vs having to make separate requests for each image.

Even with CSS Sprites, there are two requests - one for the CSS, another for the sprite image file.

You can embed images directly in css with data URIs as well: http://css-tricks.com/data-uris/

To see something like this in action, this HTML Mail.app clone demo (that I'm pretty sure hit the HN front page several months ago) uses data URIs for all its icons: http://ukijs.org/mail/index.html

CSS Sprites should be better, though. Less computer processing power.

You can avoid the extra request for an image using a data URI - http://www.phpied.com/data-uris-mhtml-ie7-win7-vista-blues/

The main advantage of CSS is that you can change the color and appearance of components without using a graphics package, and they might scale better. But that's about it.

It was a technical exercise rather than a proof of concept. The icons themselves are very simple and limited. I wouldn't recommend using CSS in this way for production work (other than perhaps for very simple arrows).

Even for simple arrows, I'd go with the multitude of unicode arrows.

This has the added benefit of screen reader support.

edit: I'm not sure why I can't reply to you below, but here are some of the unicode arrows:

http://img.skitch.com/20101119-n8558618t59wn8gdw5n6buax3d.me...

It's easy enough to get screen readers to ignore it, if it is truly presentational.

I'm not sure some simple arrows can be achieved with unicode characters...nor would you want a screenreader to pay attention to what is purely presentational.

Thanks, you're right, plenty of options - http://www.alanwood.net/unicode/arrows.html

But there doesn't seem to be one for the simplest: just a basic triangle.

Look here: http://www.alanwood.net/unicode/geometric_shapes.html

Unless you use data: URIs and base64-encode the images, which can result in a smaller CSS file than "pure" CSS while still eliminating extra HTTP requests. That depends on the complexity of the image and of the gradient set (or what have you) that would be needed to replace it. Optimization is always situational.

Oh great, I once felt the need of it, but did not it actually existed. I feel though that pure CSS solution would be better, since modifying the colors etc would be easier with pure CSS.

You can use image sprites and still control the colors using CSS! http://www.digital-web.com/articles/web_standards_creativity...

In theory, but looking across browsers shows that you'd never be able to use this in production without falling back to graphics, which adds to production, maintenance and degrades any performance benefits for a good portion of users.

It's a nice theoretical challenge, and may provide some benefits if you are building (mobile) device specific systems, but as a broad technique there is little production value at the moment.

For me main plus is easy way to change icon properties such as color with css or js. Bad browser support is main disadvantage for sure.

They natively scale to any size.

Not the ones in this implementation though.

If do a Ctrl-+, they do get bigger with no jaggies. So that is some level of scaling.

OTOH, I don't know that there is any way to take these icons and draw them at a larger size without creating new CSS.

Oh, it's because I have enabled "Text-only zoom" in Firefox. I expected the icons to be sized in "ems" so that their size would be relative to their element's font size.

Reply on news.ycombinator.com