I figured people wouldn't be satisfied unless it worked in IE, so here you go.
USAGE: <div class="icon"><span class="icon-css"></span></div>
The Good
- No JavaScript
- Everything is wrapped in appropriate IE conditional comments.
- Icons are by default inline, but since they're
DIVs they could just as easily be block. In standards-friendly browsers, the icons line right up with normal-sized text so perfectly it's uncanny. IE needs a little padding on the right, but otherwise it's fine.
The Bad
- As we all know, Internet Explorer doesn't natively support PNGs, but you can get them to work using DirectX filters. If you can't suffer the stink and indignity of DirectX, I might suggest not using Internet Explorer.
- Loading all those DirectX instances (one per icon) can quickly eat into your available RAM. Particularly since each filter is holding a ~260k PNG file—even if you're only seeing 16x16 pixels of it. To clarify: this method is not nearly as cool as the "standards" implementation, but I already went through the trouble of doing the entire Silk icon group and I didn't want to leave the IE folks completely out in the cold.
The Ugly
The DirectX filter that allows IE users to use PNGs with alpha channels doesn't support background positioning. What that means for you is a big, ugly DIV wrapper around the SPAN. Such is the price for peaceful cross-browser coexistence.
If you know you won't have any IE users, I've included the original (faster, better, standards-friendly) version inside the /standards folder.
Final Warnings…
Update: I've included an additional test file (test2.html) that you can check out. This only has a handful of icons and won't bring your operating system to its knees.
The normal test file (test.html) contain 1,000 icons. That's one thousand individual icons. For IE users, that's like dropping an atomic bomb on your CPU. I can get it to run locally with 4GB of memory. I'm not saying you need four gigs of RAM to view the entire 1,000 icon test-suite in Internet Explorer… let's just say you probably shouldn't be burning DVDs when you click the link.
Remember, under normal circumstances, you should only have a few icons on a page at a time. I'm guessing the bulk of the performance overhead is in the DirectX filter itself, which would mean that this isn't much worse than any other PNG-fixed IE. There's just no getting around having to load the filter if you want transparencies. You have been warned.
SilkCSS-1.3.0.zip File Listing:
test.html- Silk Icon Pack v1.3 test file [Cross-Browser]
test2.html- Less system-abusive test file [Cross-Browser]
icons.png- Icon Tile
icons.png.css- IE 5.5/6 CSS file
icons.png.css- data:URI CSS file (non-IE) - Stacked classname
icons.png-alt.css- data:URI CSS file (non-IE) - Single classname
test-standards.html- Silk Icon Pack v1.3 test file - [Standards version, Stacked classname]
test-standards-alt.html- Silk Icon Pack v1.3 test file - [Standards version, Single classname]
/
/ie/
/standards/
