

Are We Taking CSS Too Far? - superduper
http://blog.echoenduring.com/2010/08/14/are-we-taking-css-too-far/

======
tptacek
It bothers the hell out of me that many web devs have decides that all HTML
and CSS should be hand-editable and comprehensible at a glance.

Obviously, it's vital that both those features be possible.

But it's not obvious to me that those features be required in all markup; on
the contrary, it seems far more useful for there to be a standard, predictable
strata of functionality that developers can target with compilers.

From that perspective, the ability to do pure-CSS buttons and icons is a win.
It's hard for a web developer hand crafting markup to apply CSS buttons, but
it's trivial for a developer using something like Sass to get a button as a
oneliner.

I'd sacrifice 10,000 extra lines of line noise markup in every design if it
meant I never had to open Photoshop.

~~~
metamemetics
> _the ability to do pure-CSS buttons and icons is a win._

CSS is not designed for assembly of vector graphics, we have SVG for that. SVG
is a well defined and logical format for web vector graphics. The ideal case
would be Firefox and IExplorer implement embedding SVG graphics with <img> to
catch up with Opera\WebKit. Also since SVG is xml based any web app could also
probably implement dynamic generation and cacheing for bizarre use cases.

~~~
mike-cardwell
I didn't realise Opera/Webkit would display SVG from an img tag! They don't
execute the embedded javascript though, you need to use an object tag for that
still.

------
nanairo
I agree with the author wholeheartedly.

I always assumed these were experimental of the "just 'cause I can" type.
Trying to show off how far CSS can go, but not really in a realistic usage.

I read here though that people believe this is a useful type of use. Without
getting into a flame-war if it is or isn't, I think the answer there is SVG:
that should be just perfect for these sort of usage.

~~~
mgcross
Unfortunately, IE 8 won't render SVG at all. I suppose graphics could be
designed in a vector-based tool like Illustrator that can export SVG for
compatible browsers as well as raster for lte IE8.

~~~
msy
raphael.js can take svg-style input (it's trivial to write a svg-raphael
converter) and display it in all browsers incuding IE using IE's VML support.
It's a hack but it's a damn nice piece of tech and allows us to move forward
with SVG use.

------
sjtgraham
"Are We Taking CSS Too Far?" I would say yes. I first had thoughts like this
when Webkit introduced CSS animations. Something like an animation seems to me
to be a behavioural concern rather than one of presentation, and thus belongs
in the JS layer.

Pragmatically speaking I don't mind CSS animations as much since they can do
things that are non-trivial to pull off convincingly in JS, e.g. 3D
transforms. I also understand CSS animations are, or imminently will be GPU
accelerated too.

~~~
rix0r
A nice compromise would be:

 _transformations_ in CSS (display concerns), _animations_ in JS (behavioral
concerns)

WebKit went ahead and did both...

------
rudd
I'm surprised that so many people here are saying that pure-CSS buttons are
actually a good thing, because they're programmatic. Sure, they're
programmatic, but the code behind them is really confusing. I'd much prefer to
use a sane drawing environment like an HTML5 canvas or the Raphaël library.
Raphaël is perfectly suited to this sort of thing. Anything you make in
Illustrator, you can make with Raphaël, and you get nice, clean code.

------
protomyth
Somedays I just wish we had used Postscript with hyperlinks instead of
HTML/CSS/Javascript.

~~~
jacobolus
Any further explanation? I think for most people with websites, postscript
would be an absolutely terrible choice: the barrier to entry is simply too
high.

(Note: I think PostScript, and stack-based languages generally, can be great
fun, but really not for the average “guy making a site about his dog” sort of
user)

~~~
protomyth
I am not as sure it would be such a horrible choice. Most people don't hand
code their site and a Postscript derivative would have probably got decent
support from Illustrator and the DTP crowd. It would have probably been easier
for the normal user because writing software to create the pages would have
been quite a bit easier. It would have spawned a lot more software instead of
the user-unfriendly "use a text editor" culture we have now. Also, having an
actual display model that was well understood by the creative crowd would have
been pretty nice.

------
sp332
If you want to minimize HTTP requests, or store everything in one document,
couldn't you embed a GIF or PNG in the HTML using MIME? I just checked, and a
PNG of the "profile" icon is about half the size of the CSS. (261 bytes vs.
560).

~~~
MichaelApproved
The problem with that method is it'll make the initial page load really
slowly.

Often multiple http requests are avoided because browsers only make a limited
amount of requests to a server at the same time. The best way to fight this is
with image sprites and css source files stored on another server. I believe a
simple sub domain would be enough to trigger more requests at the same time.
Something like files.domain.com that even points to the same site as
www.domain.com should do the trick. Load your site from www. And css/images
from file. Subdomain.

~~~
robin_reala
No, he’s talking about data URLs. They work in everything barring IE6+7.

------
wihon
Is there any way we can unite the global community and ditch IE? Or at least
make it catch up with everyone else? I've only been involved in the world of
web for a short time - but even for me IE is a massive clumsy thorn in my ass.

I agree with the author about the slightly over-the-top usage of CSS to make
graphics - but what bothers me more is the fact that IE may either fail to
render your creations properly (c.f. <http://bit.ly/aqv6jT> from the article),
or make perhaps better alternatives (like SVG) unecessarily painful.

------
_delirium
Hmm, this trend of replacing bitmap images with CSS vector graphics is
interesting but a bit strange. Is SVG on the browser dead, and CSS is
replacing it? It has the advantage of better support and a simpler spec, but
_much_ worse tool support than SVG, not to mention really not being designed
for vector graphics.

~~~
zokier
SVG didn't gain the needed momentum as it's approach was more revolutionary
instead of evolutionary. Also Internet Explorer, although I'm not sure how it
fits in this situation as it surely can't support all that fancy CSS required
to do advanced graphics either.

~~~
robin_reala
SVG is supported (and hardware accelerated) in IE9.

~~~
mike-cardwell
Also, SVG can be embedded directly in HTML5 now. Also, Firefox 4 seems to be
making progress on actually supporting SVG animations now.

I don't think SVG is dead, I think it's getting closer and closer to the point
where people will actually be able to start using it as was intended. Not
quite there yet though.

------
bittermang
Just because you can use a crowbar in the place of a hammer, doesn't mean that
you should.

The right tool for the job, and other such anecdotes.

~~~
sliverstorm
Ah, but it certainly means I _would_!

(You know. In the absence of a hammer)

------
mjterave
Yes.

------
cpr
No.

~~~
user24
Did you read the article? He makes a good argument why CSS icons are a Bad
Idea. In short, paraphrased:

CSS is about facilitating graphical display, it's not about creating the
graphics themselves.

I think that's a good point. I'm quite shocked to see someone's pushing CSS
Icons as an actual solution to a problem - what next, CSS video? It's possible
(an absolutely positioned div for each frame, and then just cycle the z
indices to animate (perhaps even sans-js using :hover!)), and would be a
lovely thing to hack around with, but as a serious "let's deploy this"? Whoa
there.

That's taking CSS too far.

~~~
tptacek
CSS buttons mean that web apps can create UI elements without (a) relying on
ugly, unreliable browser builtin sprites, and (b) having to handcraft graphics
for every label the application needs. It's not a small win; it reduces many
feature requests from 30 minutes down to 2.

~~~
earnubs
If you need to handcraft graphics for every label the application needs then
you are doing it wrong.

~~~
tptacek
We generate them with GraphicsMagick, but I've worked on my fair share of
projects with complicated web UIs, and it was definitely not the standard
practice I observed to automate this stuff (I got made fun of on this project
for taking a couple hours to do it). They made buttons in Photoshop.

