Are We Taking CSS Too Far?

http://blog.echoenduring.com/2010/08/14/are-we-taking-css-too-far/

by superduper • 16 years ago

71 57 16 years ago

blog.echoenduring.com

cpr• 16 years ago

No.

user243• 16 years ago

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.

tptacek3• 16 years ago

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.

sp3322• 16 years ago

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

jessor• 16 years ago

short answer: base64. See: http://stackoverflow.com/questions/1124149/embedding-backgro...

MichaelApproved• 16 years ago

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_reala2• 16 years ago

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

sp3322• 16 years ago

If you want to see it, put this in your address bar:

  data:image/png;base64,
  iVBORw0KGgoAAAANSUhEUgAAAAoAAAAOCAYAAAAWo42rAAAAAXNSR0IArs4
  c6QAAAL9JREFUKM%2BNkE2KhDAUhMvMUoQQyCK6yE30Jp5C5LmbC%2Bkm5E
  Au9BDZ1Cy604Md%2BqegoEg%2B3ksFvCulRBGh957ee4oIU0r5mshBRAjg4
  mVZStA5V4DOuQeocFdVVXiWUuo%2F5zCOYwFezp7LWGtprS3KVCSJL%2FRY
  va4r%2Br6HMQbGGAzDgG3brqunaSoaZ8%2FzfPueEMJLKDvGyJ%2FjOH73f
  X%2F7vvM8gbquP05smoZKa%2F2xsdYaCCGwbduX07quY4yRf337vKb8xjnB
  AAAAAElFTkSuQmCC

After base-64 encoding and including whitespace, it's still only 408 chars for the PNG.

tptacek3• 16 years ago

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.

earnubs3• 16 years ago

I'm not entirely sure I understand your point. All of these examples were likely designed in PhotoShop (or Gimp) and then realised as PNGs, GIFs or in this case CSS. Beyond that adding a button is pretty simple regardless how you do it; however, how that button is rendered, which is the point, is certainly simpler with an image (and can be made trivial for developers with appropriate use of CSS).

jacquesm3• 16 years ago

I think what tptacek is getting at is programatically describing the button which then gets created in an automated way rather than manually creating it using a graphical tool such as photoshop.

metamemetics• 16 years ago

> 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-cardwell3• 16 years ago

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.

protomyth3• 16 years ago

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

jacquesm3• 16 years ago

Port 83 is free as far as I can see, I'm game. HPTP?

Or Content-type: text/hyper-postscript?

protomyth3• 16 years ago

It would be cool to try something like this, but I also wonder if the web is "it". With all this talk about net neutrality, it sometimes gets lost that the cool thing was being able to invent a new service on a new port. Would the web have been here if the net port restricted like it does today in the days of gopher?

If you were going to do this.... I would probably go with something more persistent in a protocol (more X windows than http). Flip the axis (0,0 top left) and ... well a lot of things from display postscript ... might be fun,

jerf• 16 years ago

PDF basically has the necessary features to do that already. Nothing actually stops you.

(Before you say "Ewww, PDF", recall PDF is basically Postscript, and most of the reasons you would say "Ewww, PDF" would still apply. I did say "most", there are some exceptions. Now, if you want to say, "Ewww, Adobe", I'm right there with you.)

jws2• 16 years ago

At the rendering level Postscript and PDF are similar, but Postscript is a complete language. You could send semantically structured content and do appropriate layout on the client device all from inside Postscript.

You'd probably want to write in some other language or tool and use Postscript as an object language, like in the day of printers.

The huge difference is that the evolution of the media would be in the hands of the content creators, not the browser writers/choosers.

I would try this fork of the multiverse.

jacobolus• 16 years ago

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)

jpr• 16 years ago

> postscript would be an absolutely terrible choice: the barrier to entry is simply too high.

You say that like it's a bad thing.

protomyth3• 16 years ago

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.

arethuza2• 16 years ago

Have you ever used a hypertext environment built around PostScript? I worked with one for a few years in the early 90s (HyperNeWS).

While this was very powerful and hugely entertaining from a geek perspective it was never going to be suitable for a wider audience - primarily due to the nature of PostScript itself. Don't get me wrong, I really liked PostScript as a programming language, but you have to admit that it isn't something that most people would be happy working with.

jff3• 16 years ago

I use postscript all the time--as an automatically generated result of my LaTeX files. A decent set of LaTeX macros would let you make basic text+hyperlinks postscript web pages without too much trouble, I'd think.

nanairo2• 16 years ago

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• 16 years ago

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• 16 years ago

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.

mike-cardwell3• 16 years ago

1.) apt-get install imagemagick

2.) convert image.svg image.png

3.) Profit

Sometimes if I want a simple GIF knocking up, it's quicker to open vi and write the SVG, then use imagmagick to convert to GIF, than it is to open a proper paint program.

nanairo2• 16 years ago

Isn't IE 9 going to come with full SVG support? Or did I dream that?

Anyway my point was only that SVG will solve this problem soon (say a year or so).

bittermang• 16 years ago

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• 16 years ago

Ah, but it certainly means I would!

(You know. In the absence of a hammer)

sjtgraham• 16 years ago

"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• 16 years ago

A nice compromise would be:

transformations in CSS (display concerns), animations in JS (behavioral concerns)

WebKit went ahead and did both...

_delirium• 16 years ago

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• 16 years ago

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_reala2• 16 years ago

SVG is supported (and hardware accelerated) in IE9.

rudd• 16 years ago

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.

mjterave• 16 years ago

Yes.

wihon• 16 years ago

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.

Are We Taking CSS Too Far?

Related Stories