I am available for freelance work - HIRE ME

Are We Taking CSS Too Far?

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:

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:

Social media icons created entirely with CSS

Social media icons created entirely with CSS

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ş).

HTTP Requests?

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:

These icons are created entirely using CSS

These icons are created entirely using CSS

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.

Tables Again?

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:

  1. 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
  2. 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.
  3. 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:

  1. 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.
  2. 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.
  3. 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.

Conclusion

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 ShutterStock

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Aug 14, 2010

Ramm says:

Very nice reading, i’ve been thinking about this a lot too. I’m one of those who try to keep everything as simple as i can, but this goes far beyond complicated.

I was also planning on write about it, will have to link to your article.
Note: is the article content posted twice?

Aug 14, 2010

Matt Ward says:

Thanks Ramm. Be sure to le me know when publish your article. I would like to read it.

And no the content was not supposed to repeat. Had an issue publishing from my iPhone. All fixed now though.

Aug 14, 2010

Merlin Gore says:

Great article! Is there a reason it’s repeated 3 times though? :)

Aug 14, 2010

Matt Ward says:

Yes. The reason was that Iessed up publishing from my iPhone. All fixed though.

Aug 14, 2010

Seemly says:

Wow, this article hit home so much it felt like I read it 3 times!

Oh I did. (I think maybe 2 of the 3 versions of this post need to be removed) =)

I too have been seeing many of these impractical examples of CSS3 of doing it just because you can.

Im a firm believer in doing no more than is required to achieve the best result.

And making a fail whale, social icons or whatever out of pure css is just not practical and provides no point. At all.

Just use sprites or even a single image for each icon. It’s ok to do something that actually has a point and is maintainable.

Maybe (hopefully?) people will now stop showcasing such a pointless tripe.

Chris

Aug 16, 2010

Dave says:

I don’t agree that “pointless tripe” is the right way to look at these experiments.

Agreed, they are not useful in a real world situation, but they are instructive all the same.

Without pushing the technological boundaries (and our expectations of them), we are shortchanging ourselves of what we will see from the future of CSS, HTML and JavaScript: think of the effect that Flash websites had on jQuery and JavaScript widgets we all see as commonplace now.

Personally, I’d like to see coders continue to push boundaries with experiments such as these, but that there is a corresponding text segment attached that attempts to forestall any client expectations that these are “what/how it should be done” in a real web site or application.

As designers and developers, we still have the burden to educate our eye-candy absorbing clients about the realities of what’s possible.

Aug 14, 2010

densePIXEL says:

Very interesting read. When I first saw the fail whale a while back, I thought to my self – “Would anyone actually use this”. I think your article really gives the reasons.
The CSS is too complicated, and if the management of the website was passed onto someone else, without the same level of CSS skills, they would find it very troublesome.

Aug 14, 2010

Matthew says:

One argument I’m missing (or may have read over) is that of cross-browser support and graceful degradation.
While an icon is an icon – possibly with an alternate text for textual devices – the CSS may very well need to be adapted for specific OS/browser/device combinations (if not now, then in the future).
Conclusion: while experimenting for the sake of ‘because we can’ will surely push the boundaries of CSS, but always think about the practical use and alternatives. The extra request for a sprite outwheighs the CSS-approach by miles when it comes to maintainability and reliability.

Aug 15, 2010

Matt says:

Just wanted to comment that I wholeheartedly agree with everything you’ve said in this article. Thank you for putting it together.

Aug 15, 2010

Sunny Singh says:

Finally an article to stop the madness. I love CSS3 because it lets me design in the browser and lets me easily manage the simple things, like rounded borders and such.

However I completely agree that CSS shouldn’t be used to create graphics. CSS3 is meant to make life easier by letting you easily change things and have less bloat in your HTML, not the opposite.

The reason many do such experiments is simply to see how far they can push the limits of CSS, but overtime it’s gonna get old. Thanks again for writing this article.

Aug 15, 2010

Kilian says:

You’ve nailed it.

I found these CSS experiments initially interesting for what they were: crazy experiments, fun geekery. But that anyone would seriously consider CSS for graphics creation is where I stop laughing.

If http requests for small icons is really a concern for some, then use CSS sprites, just as google, yahoo and the whole bunch do as well.

Aug 15, 2010

rawj says:

I find the article a bit harsh, although I agree that this css playing is impractical.

On the other hand kudos to people exploring tools not designed to be designed with. Why not challenge yourself and try one of these “pointless” pieces? I sure you’ll get a sense of accomplishment out of it, and maybe inspire someone else to try something non-standard.

Aug 15, 2010

Gaurav Mishra says:

Had a nice time with the reading
Talking about the css icons
I don’t feel very practical and comfortable to use them in production environment.

Icons as a hobby experimental stuff are good. And always better to push the boundaries to create more space

Aug 15, 2010

Theo says:

Great article, kind of eye/mind opener to me as you make some good points in it, thanks!

Aug 15, 2010

Justyn Clark says:

Great post. Totally agree with your point that just because you can it doesn’t always make sense. Interesting from an experimental POV but not commercially viable.

Aug 15, 2010

Lewis Nyman says:

There’s no reason why CSS icons can’t scale, moving from px to % based designs allow you to them to scale infinitely without quality loss, something you can only currently do with SVG, which is not fully supported by all major browsers.

Maybe there is a use for them, as a practical example see The CSS Gmail Buttons:
http://stopdesign.com/archive/2009/02/04/recreating-the-button.html

There’s nothing wrong with creating images in CSS as a creative exercise, I’m sure as this progresses we can find practical uses.

Aug 15, 2010

Ygam Retuta says:

I wanted to try my hand at CSS3 crunching but when I saw the codes full of RGBs , offsets,etc, I backed off a bit. Now they’re making us do more complex calculations than margins and paddings, I thought. I was astounded to see the Roman Cortes’ pure css coke can but I never really thought of doing something similar in any of my web projects. Another point to raise is that CSS without the “three” already takes a lot of labor to read, how much more when really complex figures(numbers representing offsets and RGBs) add in? I hate to see the day where I am handed down a layout that has lots of images but says “pure CSS3″. Oh dear…

Aug 15, 2010

Felix Leong says:

I wholehearted agree with you article here. I believe the CSS3 experiments should be treated as such: experiments. And I really liked when you conclude your case with HTML table layouts.

I would imagine SVG may be a better fit in the fail-whale usecase when auto-size scaling is required.

Aug 15, 2010

Dinu says:

This probably shouldn’t be taken too seriously. I don’t think anyone in their right mind would use CSS icons, much less purchase them.

It’s always fun to discover and experiment with new possibilities though.

Aug 15, 2010

msnfc says:

Good post. I thought I was the only one thinking what a waste of code these css-icons are.

I think that there’s a css-paranoia these days and it seems the trendy thing to do.

I mean creating icons with css? WTF?
Creating tables with css (50 divs upon divs instead of a single table to show tabular data)?

The good news is that it’s just that, a trend. It’ll go away as fast as it came.

Aug 15, 2010

Ben C says:

I agree, recreating anything more than the very simplest of vector images in CSS is just not practical and there are more appropriate tools for that job. I appreciate that most examples of it are really just exercises in what is possible with the latest CSS properties, but I would rather see people showcasing those capabilities using amazing but practical complete page designs, in the way the CSS Zen Garden did for CSS 1.

Aug 15, 2010

Nicolas Gallagher says:

Hi Matt, I agree with the general sentiment of Faruk’s article. For months I’ve been voicing my lack of interest in CSS tech demos that have no useful output and rely on presentational HTML. However, there are several points that you and Faruk have made that I disagree with and will blog a response to. One small detail, my surname is spelt “Gallagher”.

Aug 15, 2010

kevadamson says:

I agree with you Matt. Good post.

I think when you also bring browser prefix into it as well (-moz- -webkit-), and also the age old “support for IE” issue, some of these solutions are just impracticable, as maintenance becomes a real chore.

I too have have jumped in deep with CSS3 and come to some of the same conclusions. I guess it’s a case of trial and error at these early stages so, as developers, we reach a balance, and we aren’t just doing things for the sake of it.

I could go on and on, but I too have a post in mind somewhat related to the above.

Thanks :)

Aug 15, 2010

danny Santaana says:

I agree with the specific example of icons but I think it’s imortant to remember that, as you mentioned, the vast majority of these kinda posts and investigations are experimental, and I think that experimentation is essential to finding out the limits, and therefore possibilities of CSS. Whether or not they are production solutions is really up to the common sense of the designer or developer.

Aug 15, 2010

Sam says:

Your site is gorgeous. Thanks for the read.

Aug 15, 2010

Mark says:

Interesting article. You sure have my mind racing at the moment. I agree with you, I think things have gone a bit far, as far as CSS is concerned. On the other hand everyday something new has been developed and it wont be long until something else comes along.

Aug 15, 2010

Mike Stark says:

I agree that many of these CSS experiments are impractical, I think it is absolutely fantastic that people are pushing the envelope with new techniques. Many experiments may be completely useless in the real world, but we might just happen upon something really fantastic.

So Keep it up all you “CSS Scientists”!

Aug 15, 2010

Rick says:

Thank you, I couldn’t agree more. I like the fact that you can do so much with CSS these days but it just feels like we are trying to use the wrong tool. After all you “could” dig a ditch with a spoon, but why would you want to.

Aug 15, 2010

Jeff Doppke says:

Great article, couldn’t agree more.

I think that all of the experiments are interesting, but if they used in real world situations, it’s definitely taking it too far.

CSS and HTML do have background-image and image abilities, why not use that as it seems more appropriate, not to mention less bloated and probably leading to better semantics and cleaner code.

That’s not what CSS was intended for, in my opinion.

Aug 15, 2010

MarkeeB says:

Here here!
CSS just isn’t right for graphics; it should really just be for layout & styling. As much as I admire the skill involved, this type of thing is completely unusable.

Aug 15, 2010

Justin says:

Pointless tripe? Not really. In learning CSS3 I decided to play around with the different shapes it could create. From this spawned the idea of creating simple company logos that can scale. I learned a lot from this, like what can, should and shouldn’t be created using CSS. It was my fun way of getting my hands dirty with the new techniques.

Should someone look at what I did and take it and use it on their site? If they want, it’s up to them. But maybe someone will see what I did, view the source and take a piece of it and run with it and create something totally different and useful.

I don’t think people should ever stop experimenting or publishing their experiments. However, selling these experiments and not labeling them as such gets us in a some murky water.

Aug 15, 2010

Will Paccione says:

Thank you, thank you, thank you. CSS is unbelievable, but you’re exactly right about the code bloat and the time it would take to do this.
All because we can create graphics with them, doesn’t mean we should. Great article.

Aug 15, 2010

Michelle says:

Totally agree.

I don’t have a problem with the many CSS experiments floating around, it’s fun to see what people can do in a spirit of investigation but the minute things like this paying-for-CSS-icons issue crop up and people start to think they’re for real-world use is the minute it’s gone too far.

They’re impractical, not in the spirit of CSS, but most importantly using them in an actual site is just plain pointless.

Aug 15, 2010

Catherine Azzarello says:

I love the fact that there are CSS nerds who have harnessed CSS and made icons. Because they could.

That said, you’re absolutely right about the practicality (or lack thereof) of CSS icon use in real projects.

Aug 15, 2010

Jason Cho says:

Well written article.

It is true that many ‘css experiments’ are impratical, but I have to say that developers should be encouraged to take CSS as far as they can.

Though impractical, the creativity of such conceptual projects may lead to better and useful techniques.

But for now, I don’t think I will use CSS Icons on my website. :)

Aug 15, 2010

Glupus says:

Totally agree with you, it seems like we are now at a point similar to that of the introduction of the blink tag, animated gifs and flash. Just because the capabilities exist does not mean they enrich the end users experience. We need to remember the basics of good interface design as we move forward with CSS 3. Let’s keep the nerdy, cool, obscure examples between those who will appreciate it and not put the internet through another animated gif like design catastrophe. Great article!

Aug 15, 2010

grinding mill says:

Please keep them coming. Greets!!!

Aug 15, 2010

West Coast Design Co. says:

Excellent article Matt,

I have to admit however this entire subject seems just like bragging rights, would be neat for a portfolio, however I am not too sure how this would perform on a clients site.

“soo this is going to cost you a few more hours because were incredibly convoluted”

That said, I am still extremely interested in converting my entire site into pure CSS lol.

Aug 16, 2010

Martin Chaov says:

Completely agree. The firs time I stumbled upon those CSS3 icons I though that this is the biggest and most useless show off I’ve seen for a long time.

I like the idea of creating them, but not for using them.

Aug 16, 2010

Tom B. says:

You can say that CSS3 graphics are the new Pixel art, that was the new ASCII art.

I totally agree with you that most of these should stay in the “Cool Concept” drawer.

They are bloated non-semantic html structures, that besides being an interesting brain exercise have no real value compared to the alternatives – Canvas, SVG and Base64 encoded images.

btw –
Have anyone tested the performance/cost trade-of of using CSS only techniques?

I mean, the bigger the DOM is, the slower the page loads and the JS DOM functions are. Also, this has a lot of advanced experimental CSS that has it’s own performance issues and it takes a lot more time to create and tweak than good old bitmap/vector images.

I wonder if it pays off in any way.

Aug 16, 2010

KHT says:

None of the CSS3 experiments are meant to be practical, they are purely for entertainment purposes. So its not that I disagree with you but there is no argument to begin with.

Aug 16, 2010

Ravikumar V. says:

nice article. but a bit large one :)

Aug 16, 2010

Ryan McGrath says:

Finally, about time people started talking about this. It was getting to be a bit ridiculous.

Aug 16, 2010

Carlos says:

I´ve been thinking about this myself for a while and I have to agree 100%. Using CSS as a Fireworks like tool simpy goes against the whole purpodse of CSS in the first place. It makes thing unmanegable (or at least VEY difficult to) and adds unnecesary clutter IMO.

Aug 16, 2010

Birgit says:

good points here.

that’s exactly what I thought when I saw the CSS icons last week. it’s nice to see what can be done, but I also think that we should leave graphics to graphic files :)

Aug 16, 2010

Jeremy Carlson says:

Now I don’t feel like the wolf without a pack. I wrote an article a while back (http://jc-designs.net/blog/2010/05/cool-css3-tricks-why-i-wouldnt-do-it/) about this sort of thing. It was more about the time involved to do things like this, and practicality of them. Didn’t even think about it saving http requests.

People are now using CSS to cross over into areas that are better handled by other software/code. The bloat is the big factor for me. I have looked at a ton of CSS3 drawn items, and while I admit they are beautiful and awesome, my main thought it, how long did it take them to do that? How many lines of code?

Icons? Really?? I can imagine the amount of CSS for that. Orrrrr…You could do like you suggest, and create a sprite. Saving HOURS of time. I am certainly NOT going to pay for icons made in CSS.

Aug 16, 2010

Jorge Luis Jaral says:

Excelent article; I couldn’t agree more with You, we are definitely passing by a peak CSS3 moment and everything should get back to normality in the following months… Hope so.
Greetings from Mexico.
:¬)

Aug 17, 2010

Kris Noble says:

Absolutely agree on the practicality and semantics aspects – I would probably never use any of those “pure CSS” logos/icons in a real site, but I think they do have significant value in helping to encourage people to use the latest techniques.

Kind of like what the CSS Zen Garden did way back when, these little experiments can show people exactly what’s possible with modern CSS and inspire them to try new things.

For example, while you might not use Nicolas Gallagher’s icons, you might resolve to experiment with gradients and rounded corners on your form inputs.

Aug 17, 2010

Radu says:

Indeed these CSS experiments have little to no practical application so they’re not exactly useful in dropping into a project.
But (you knew it was coming) I can find two (pretty good) reasons why these experiments are a good thing:
1) by pushing CSS as further than it was meant to, both the creator of the experiment as well as those that take the time to analyze what’s going on with the code gain a better understanding of CSS and, ultimately and sometimes unconsciously, improve their skills;
and
2) designers who play with CSS and twist it into something it wasn’t meant to do resemble sculptors that use weird and unsuitable materials (like car parts or ice); they do it for the art of it, they do it because you can’t hold creativity back;

CSS experiments is where designers turn into artists a bit and get away with it.

Andrew Tetlaw put it best: “awesome, but useless”.

Aug 18, 2010

Mason says:

KHT is correct. This was an experiment. I think it important to make it clear this (and Ateş’) article is directed towards other Web designers/developers, and not Gallagher. As you both cited, he was not encouraging this method.

Additionally, the Pure CSS Speech Bubbles (http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html) from which he drew inspiration for his specific CSS icon experiment is a great example of a “should do” for Webbies.

Aug 18, 2010

colin says:

Can someone make me an “Under Construction” animation using only CSS? I feel like that’s due for a revival.

Aug 19, 2010

Crash says:

I think Eric Meyer must be going out of his head. The idea that CSS is creeping into the design arena is pushing the bounds of the classic separation between markup and style.

Great article. I’ve had the same reaction to some of the “all CSS” icons, or images or various other things available. You think, “that’s cool” then you see the code and barf all over your screen.

Remember when code was supposed to be beautiful?

Aug 19, 2010

Niclas says:

Thank you for writing this text! Very interesting and comprehensible!

Aug 19, 2010

Steve Dennis says:

Hey guys, as the guy who created the CSS fail whale I absolutely agree that the use of CSS for illustration, icons, whatever, is completely impractical. No question there whatsoever.

What I don’t agree with is saying that these exercises are pointless. These things are called ‘experiments’ for a reason. We do them to try and discover the capabilities and boundaries of what the technology is currently capable of, and by doing so, help gain a better understanding of where we *can* use these techniques in practical ways.

Think of something like the LHC (not that it’s a fair comparison lol). Smashing particles together serves no practical purpose. But it helps people (hopefully) understand the fundamentals of things so that they may be able to transition their knowledge to practical applications later down the track.

That’s all we’re doing. Just experimenting. Don’t make it out to be more than it is.

Thanks :)

Aug 19, 2010

Mohanraj says:

Amazing article! with well defined points. It clear that it’s impractical to use Pure CSS concept.

Still need to have a second thought, since it’s just a new born baby.

Aug 19, 2010

Andrew Champ says:

Well said. Never really put thought into it, but you were right about everything you mentioned. *Hat’s off to you*

Aug 20, 2010

Ollie says:

Hi Matt,

nice reading, I must agree with you. At the moment some of the features are very impractical because when you add a shadow here, a rounded corner there, your CPU usage jumps up to 97 % and browser slows down to snailspeed. I hope this is only a temporary drawback otherwise I can see a CSS3-block addon on the horizon. There is surely a lot of potential here and it’s up to one’s judgment whether to use CSS3 or not.

Just as Andy Budd said: there are many ways to do one thing, but not all of them are the right one.

Aug 20, 2010

Stevo says:

Sure its not practical, but that’s the beauty of it.

CSS is poised to overhaul the web and make the kind of effects that used to be reserved for applications like flash and activeX (shudder) free, accessible and open to all, and who knows what the possibilities will be?

We need guys like CSS icon designers to remind us that CSS is changing and we should embrace it and start thinking about what the real implications of this change are.

Aug 20, 2010

Vincent Roman says:

I wholeheartedly agree with you. The things some people do are completely nuts, and the real purpose gets lost the minute you ask someone else to take what you have done and get them to use it.

Another thing is that by the time you focus on this kind of idiotic minutae you start to look focus of the wood from the trees.

Thanks for hammering the nail firmly and most certainly down.

Aug 21, 2010

Lucian says:

You guys don’t understand it at all. Bloat? Useless? I have to disagree with you. There are several advantages for CSS icons:
* no additional HTTP requests (CSS file can be gziped a lot)
* instantaneous browser drawing of icons in web apps (from a UX designer point of view this is an amazing advantage, the feel of a desktop app)
* no loading (and then drawing) for a large CSS sprited image or several images
* infinite customization for template systems, think about Blogger or Twitter – no need to generate new GIFs for changing the color of icons
* icons can be animated (eg. battery icon from Peculiar) – on hover or other JavaScript calls
* 3 empty DIVs won’t matter on a web app because its pages won’t be indexed by Google or they can be injected with JavaScript

About what you said, you don’t need to download Peculiar – it’s already there for everyone to experiment with. And the money part is for the time I used to put together this little project.

Aug 22, 2010

dsdeur says:

Nice artivle! I do agree with you.

Another reason to not using them on real website is: All these things use css3. The fact is that many people use old versions of internet explorer (and other browsers) and will see alot of messud up stuff.

However, I think it’s good to expiriment with these techniques, it helps you to really understand them. Like sad before it might let to something that is in fact usefull for “real” use.

Aug 22, 2010

Paul says:

Very interesting article, capturing things very acurately.
To me CSS icons are insanity. I’m sorry, but they are…

On a different note:
I had to edit the CSS on this page in order to read it. White text on black background gives me sore eyes after about 2 minutes.

Aug 30, 2010

J-rom says:

Yep, that’s why you have sprites of icons on sites like http://www.flickr.com: http://l.yimg.com/g/images/photo-sprite.png.v5

Aug 31, 2010

Luke says:

When I see these experiments, they blow my mind, i’ve done some of my own out of boredom. This was a great read, to me using less HTTP request excuse won’t cut it for me, hosting prices are falling and offering more, speed difference is not noticeable in this day and age either, not to mention at the moment those icons will not work cross browser either.

I say it again, great read, awesome website too.

Sep 3, 2010

Rob Foxx says:

Very well put. I’ve never been a fan of CSS willy waving. Just because you can do something with CSS, it doesn’t mean you should.

Sep 26, 2010

Regina says:

Very helpful, thanks for this!

Oct 23, 2010

mc2w says:

Somthing I’ve thought about myself. Sure, the new CSS is powerful, but lets just not go overboard with it. I can understand experiments because that’s what they are; experiments, but selling css icons? Ridiculous.

Nov 23, 2010

Ron Evans says:

Yes, we are taking CSS to far. If I hear that CSS-Nazi rallying cry, “Tables were never meant for design…” one more time I’m going to scream.

CSS wasn’t created to render images. Therefore CSS images are as bad as tables. Same thing for unordered lists and li tags. They were meant for quick facts within a composition. And yet CSS Nazi’s use them wholesale for Navbars, layout and you name it. CSS is not the Jesus Christ of web design. CSS images!? How about fixing vertical alignment first? And in the meantime we can just use I dunno, Gifs, Jpegs and PNG’s for images. (Call me semantically crazy.)

Dec 5, 2010

Anonymous says:

For the most part, we’re not taking CSS too far. Rather, people taking HTTP requesting limiting too far (who cares, most modern web browsers pipeline). CSS and HTML aren’t meant to create such definite images either (well, not in a practical sense). Going back to the argument of tables for layout: in terms of semantics, it’s horrible.

A more practical solution in most cases would be SVG. These demos are about of what we *can* do, rather than what we should.

Jan 17, 2011

Caryn says:

As a designer (and notably NOT a developer) I find these kinds of posts more informational than relative to what I have experience with. That being said, it’s fascinating the comparisons and even the possibilities of where these advancements may end up going in the future. Definitely excited to see what kinds of things will end up killing us Designers someday! haha

Jul 19, 2011

Andrew Peacock says:

After reading through the comments I realize I’m in the minority in my opinion, but I must disagree with the post title. I don’t believe we’re taking it far enough. The limits should be pushed, they need to be pushed. The experiments that are floating around the web are awesome, but that’s just what they are for now, experiments. There isn’t an easy way to implement them or an efficient way to use all of them, but it’s good to see what the technology can do.

It’s up to the designer to know that the things floating around the web aren’t meant to be used in client websites, and that they should use the tried and true methods.

On a side-note, pure CSS buttons really aren’t that difficult to use, most of the time its simply putting in one class where you need them to be. And, arguably, they’re easier to maintain than sprites if you know the code because you only need to tweak a few numbers instead of saving off a new version.

Jul 19, 2011

kubarium says:

I don’t get this HTTP Request part really. Wouldn’t adding a lot of lines of code to create these icons increase the file size which results in having bigger file sizes therefore higher bandwidth traffic? I’d rather have the hit on CPU than have to pay the traffic.

Aug 2, 2011

Edwin says:

I too feel many of these CSS experiments are impractical and I find it refreshing that new techniques are being developed. How many of the experiments would be practical in the real world? However I suppose there’s means to an end if we stumble across something groundbreaking along the way.

Aug 2, 2011

Martin says:

I don’t believe we’re taking it far enough. The limits should be pushed, they need to be pushed…

Sep 3, 2011

Tanja says:

Hey interesting article, I think the question about “taking it too far” is as up-to-date as never before. I would love to see an update!

Jan 10, 2012

Thierry says:

I completely agree with this article and I believe the CSS3 experiments should be treated precisely as such – experiments. I also very much liked your conclusion with HTML table layouts.
Another point to raise is that CSS without the “three” already takes a long time to read, how much more timw will it take when really complex figures are included.

Jan 13, 2012

Michaela says:

I’m just not a big fan of the CSS Icons like you already said they really blow up the code. I’m a very big fan of just keeping it simple… The design aspect is not as important as the content of a website. People tend to forget about this fact :-)

Leave a Comment

Copyright © Echo Enduring Media 2009-2014