posted by Matt Ward on Aug 14, 2010.
CSS is a remarkable technology, capable of doing things that I wouldn’t have even dreamed of when I was first introduced to it. There are all kinds of amazing demonstrations and experiments out there, but when we start talking about pure CSS icons in a production environment, have we started to go too far?
CSS is a remarkable technology, capable of doing things that I wouldn’t have even dreamed of when I was first introduced to it. And, with added support for rounded corners, box shadows, text shadows, rotation and a wide range of other possibilities, web designers and developers can accomplish all sorts of amazing things when it comes to applying a design to a website.
But are we starting to take things too far?
The design community is awash with all kinds of different “CSS experiments” where people attempt to do some pretty incredible stuff (and quite often succeed). In an article I wrote for Six Revisions a couple months ago, I listed five of the experiments that I found really interesting:
- CSS3 Transforms & @font-face Experiment
- CSS Posters
- Pure CSS Line Graph
- CSS3 Leopard-style Stacks
- Pure CSS Twitter Fail Whale
Each of these experiments takes a different approach. Some, like the line graph, have some practical applications in the real world, while others like the CSS fail whale are completely and entirely impractical. It’s certainly interesting to know that it can be done, but that doesn’t necessarily mean that it should be done.
Let’s Be Practical
I’ve been thinking this way for a while, but it was really cemented in my mind when I recently read Faruk Ateş recent article “Pure CSS Icons: Make The Madness Stop,” which I picked up on from a short post over on Think Vitamin. In his article, Ateş notes that “some people have started experimenting with CSS as a ‘design tool’ and it suddenly hit upon a large audience.” He also writes:
how usable are these snippets of CSS and markup, really? Is it easy to plug them into your website as you’re designing it? No. Is it easy to plug them into your website as you’re developing it? No. Is it easy to adjust them once they have been integrated into your website? No, no, no!
I have to agree wholeheartedly with this. Before this week, I’d looked at a bunch of the CSS experiments out there, and occasionally appreciated some of what they manage to do, but i had never really taken the time to examine the actual styles themselves. So, I took a gander at the code for these CSS social networking buttons:
Just as I expected, there are lines and lines of different styles, all just to create one icon. Is it impressive? Yes. Creative? Certainly. But it’s just not practical. This is also not an easy way to create icons. It probably takes long hours of careful consideration and experimentation to create these kind of graphics. I could create similar icons in Photoshop in less than an hour, and they would probably look better too (smoother, better anti-aliasing).
Finally, as Ateş clearly notes, the whole concept of maintenance becomes problematic. Adjusting an icon should be about moving pixels, not about changing CSS rules. It just screams at me as being the epitome of impracticality.
Of course, it should be noted that Nicolas Gallagher, the creator of the above cited icons does make note that “CSS is not necessarily the most appropriate tool for this kind of thing” (again, cited by Ateş).
While Gallagher’s icons are presented and framed mostly as an experiment, there is another set called “Peculiar” which is actually available for sale. Yes, that’s right, they are now selling CSS icons – and at $25 for just 45 icons, the price seems a little steep too. Here is the preview of the icon pack:
Honestly, I like the look of these icons. They are small, elegant and beautifully wroght, and so from a craftsman’s perspective, I tip my hat to Lucian Marin for his fine design work.
However, in the preamble to the Peculiar site, he writes “It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.” Now, I understand the need to cut down on HTTP requests to improve the overall responsiveness of and load times of our sites. Really, I get it.
But, before everyone starts running out and buying up CSS icons left, right and center, I just have to ask: is one more request really going to make that much of a difference? Because all you need is one. A single, well crafted CSS sprite can contain all of these icons, in multiple hover states if you need them too. Then, all your styling is just a matter of background positioning.
Also, I have to wonder how much bandwidth difference there would be. I’m not about to fork out $25 to download icons that I’ll never use, so I’m not sure how much styling there is involved with these little beauties. Based on what I saw from the Gallagher example though, I would imagine it would be a fair bit. Even minified, it’s probably still going to be a significant amount of data, and with the really minimal amount of colour data that would be involved with creating a CSS sprite of these icons, I just don’t feel that one extra HTTP request and a few extra bytes of information is really worth the hassle.
In the Spirit of Semantics
I’ll admit that I’m occasionally as guilty as the next guy for occasionally adding in an extra
<div> or <span> to be able to achieve something visually on a site that I can’t seem to figure out how to do otherwise (or at least can’t figure out how to do efficiently). I try to avoid it, though, and the last thing I want to do is to start filling up my code with all sorts of extra tags to help build CSS icons.
That’s just not semantic coding.
Now, looking at the Gallagher example, he does an excellent job of keeping his markup beautifully clean, relying heavily on the :before and :after psuedo-classes for apply his styling. So, from an HTML perspective, I would have to say this is semantic (though I’m sure that many other examples utilize some excessive HTML elements, just for the purposes of providing “hooks” for their styles).
That being said, semantics is a discipline all about of meaning, and semantic HTML is about writing code that supports the meaning of a document, while using CSS to dictate the visual rules by which that content is displayed. CSS is about taking the form and structure of the document and representing it in the browser. Or, to put it another way, it’s about facilitating the graphical presentation of content.
It’s not about creating the graphics themselves.
That’s the realm of vector-based and/or pixel crunching software like Photoshop, Fireworks, Illustrator and so on. And so, it seems to me that using CSS to create graphical elements like icons goes against the very purpose for which the technology was ultimately created. By doing so, it deviates from its own core meaning, and therefore strikes me as unsemantic, at the very least in spirit if not in a strictly literal sense.
Though it doesn’t form a perfect parallel, in some ways this issue of CSS icons (or other graphics) can be compared to using tables for layout. There are a few key reasons why tables for layout is a bad idea:
- Bloat – All the necessary table tags fill up your HTML, making it big and ugly and an absolute nightmare to manage. I used to use tables back in the day, and I hated it for this very reason
- Inflexible – Tables are rigid, unmoving things, and getting them to do anything even remotely complex was a huge pain. Empty cells and complex ROWSPAN and COLSPAN properties can only take you so far without becoming entirely unmanageble.
- Purpose – Most of all, we have to recognize that it just wasn’t what tables were designed to do. Tables exist in HTML for the purpose of presenting tabular data, not for creating layouts. Yes, you can, create layouts with them. Yes, with a bit (or a lot) of effort, you can bend them to your will, but it’s just not what they were created to do.
If you’ve been around the web design and devlopment industry for very long, you probably already know how much of a faux pas table-based design is considered. Well, when it comes to CSS icons, consider these thoughts:
- Bloat – All the necessary CSS declarations will really bloat up your style sheets, making them an absolute nightmare to manage. Wait, didn’t I just write those same words? Also, depending on how the icons are achieved, you might find your HTML bloating up with extra elements too.
- Inflexible – Again I admit that people have done some really incredible things with CSS, but compared with a real graphics program, CSS generated graphics are incredibly limited in what they can do.
- Purpose – As we’ve already discussed at some length, CSS wasn’t designed as a tool for creating graphics, despite the fact that people are able to do some pretty amazing things with them, like the Peculiar and social media icons we’ve already looked at. Impressive? Yes. The right tool? No.
Obviously, there are some key differences between CSS icons and using tables as a layout tool, but the similarities in these three areas are somewhat startling. I also think it works as a really excellent illustration of something that I pointed out back at the beginning of this article: that just because something can be done doesn’t mean that it should be done.
Of course all of this is my personal opinion, and I leave the final decesion up to you. If you think that CSS icons make sense for you to use in your own work, then feel free to take advantage of them. I’m also not trying to talk Marin out of making any money from his Peculiar icon set. If he can manage it, then more power to him.
This article was simply the presentation of my own thoughts on why I don’t thinks that CSS icons (or any other, similar graphic) are really a viable solution for displaying graphics on the web. I hope my points were clear enough, and that they provided some food for thought on this particular subject.
What about you? How do you feel about the idea if CSS icons? Do you think they are viable? Would you ever consider implementing them into one of your own websites?I’d love to hear your thoughts on this.
Note: Main article image supplied via ShutterStockPost A Comment
Also from Echo Enduring Media: