Unobtrusive CSS icons
27 Jul 2010
css
javascript
jquery
unobtrusive icons
There can't be anything more straightforward than displaying icons beside links/buttons, can it? After all it's just a CSS class for generic icon with background-image inline style. Or maybe separate CSS class for each icon? After all, there's only so many of them. Or even partial view that takes image, caption, and link as parameters and spits out complete piece of HTML?
None of the above. They all suck due to either inherent ugliness, annoing restrictions, or lack of simplicity. All fail programmers' ultimate criterion – <blink>elegance</blink>. But there is one that excels where others fall short.
Enter convention
<style type="text/css">
.icon { padding: 0 0 0 20px; background: transparent left center no-repeat }
</style>
<a href="#" class="icon i-add">Add</a>
<a href="#" class="icon i-edit">Edit</a>
<a href="#" class="icon i-delete">Delete</a>
A convention whereby all elements with class icon i-something are transformed so that i-something part becomes background-image: url(/icons/something.png).
Nothing can be easier with jQuery.
$(".icon").each(function (i, e) {
var icon = e.className.replace(/.*i-/, '');
e.style.backgroundImage = 'url(/icons/' + icon + '.png)';
});
- Clean - no inline CSS clutter.
- Simple - completely flat learning curve.
- Powerful - no need to define separate CSS class for each icon.
Note: make sure your web server has no alias set for path /icons/ or you won't see any icons.
- bezkarny
why not in polish? o.O
- riddle
Shorter, more jQuerish:
$('.icon').css('backgroundImage', function() {
return 'url("/icons/' + this.className.replace(/.*i-/, '') + '.png")';
});
Anyway, that’s one point of view. Another would be “why the hell we need JavaScript for presentation?”
It sure is painful when you need to deal with hundreds of icons, but for a simple set of dozen or so, all you need is a clean sprite. Faster load time, clean HTML. There’s balance somewhere between hacks like these and putting every icon in a separate file.- fluxid
I'd rather write small script generating CSS files with class-to-icon mapping ;)
- d4rky
I'd just use PHP + generated CSS, but hell, I'm just a janitor here
- riddle
Generated CSS would be a cache fubar… but it could work in a scenario where we can divide the site into logical parts and generate just a few files here and there.
- Alan Gabriel Bem
It looks for me more like protyping than real life solution.
- stronger
@riddle - splendid! jQuery is just beautiful. And as per your question - why is it a problem when there's more JavaScript runtimes than grains of sand on entire Earth? ;-)
@fluxid - make sure to document that script, maintain it in the future, and teach your workmates how to use it. This clearly contradicts Simplicity rule.
@d4rky - had it been different project I would have done it your way. I blogged about such approach the other day - http://is.gd/dMVi6
@Alan - it's not prototype by any means ;-)- riddle
@Stronger We should care to separate content, presentation and behavior. Yes, in some cases it is necessary to optimize just one of them – I’ve seen user dashboard areas downloaded via Ajax to cache the whole page better. It’s rare and should be avoided.
You’re asking why should images be accessible to someone without JavaScript – because you’re thinking only old devices and paranoid users aren’t capable of running it. I’m asking something different – why should such basic functionality as image display be available only through the highest layer of front-end toolkit.- stronger
@riddle, can't agree more that separate things should go separately. Still, it is perfectly legal to have logic in more than one place. Core logic is different to view logic which in turn is different to behaviour logic, thus should be kept in different boxes. But can't justify the belief that content should be (X)HTML and nothing else, presentation a pure CSS, and behaviour DOM scripting.
I can see your point that such shameless cheat imposes restrictions to some. What I'm trying to get at is that doing things The Right Way (tm) is sometimes not commercially viable. You just have to draw line on the sand and we can only argue where it should lie, what goes in, and what stays out. Should Ajax stay out as well?- riddle
Yes, sometimes it’s not worth the pain. But in my opinion you would have to have around 100 icons to forfeit the CSS-only option.
As for Ajax, it can be serialized to page reloads and form submissions. Yeah, not everything can be stripped to pure “Web1.0” but in most cases it’s possible. Again, it’s just the best solution to all kinds of problems (and it feels right too) but should be applied where necessary.- stronger
While this discussion is more than enjoyable for me, I don't think we can overcome certain disagreement. As far as I am concerned, there is no reason why web application should not have Minimum Requirements etched on the tin, pretty much the same way fat-client applications have. Now, don't get me wrong - I'm not great fan of "Works only with IE6" banners. I'm only stating that from commercial perspective it makes sense to say "go below bare minimum and you will have no fun whatsoever" rather than burning man hours just for the sake of it. "Requires jQuery" is a sane minimum if you ask me. Likewise "Requires Flash/WebM" is a sane minimum for YouTube.