Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Are We Taking CSS Too Far?

blog.echoenduring.com

Post reply on HN
Print view View original

11–20 of 58 posts

Re: Are We Taking CSS Too Far?

#11

Post by soren_dahl »

tptacek wrote: post #5

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 compiler…

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

Re: Are We Taking CSS Too Far?

#12

Post by soren_dahl »

tptacek wrote: post #6
user24 wrote: post #3

Earlier quoted context omitted.

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 t…

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.

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

Re: Are We Taking CSS Too Far?

#14

Post by daleharvey »

user24 wrote: post #8
tptacek wrote: post #6

Earlier quoted context omitted.

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.

CSS Buttons are all well and good for simple styles and rapid prototyping. But what happens when your boss asks you to add an icon inside the button? Or stretch it vertically? Or add it to an email bulletin? And the time you claim to have gained by not having to fire up photoshop and knock out a few simple buttons, you'll lose again by having to test in different browsers. Also consider readability, maintainability,…

adding an icon inside a button is far simpler with css buttons, stretching it vertically is obviously miles miles easier with css than with images, email is just a whole other nightmare that I really dont think should even be considered when talking about sane html / css.

I dont understand how you can possibly think generating text inside images to be more readable or semantic, future proof or maintainable.

nor do I understand how you think things creating generating images programatically on the server is easier or nicer than coding up a a .btn class

the cross browser issues might have some possible point, but in reality most people are just going to be copying and pasting from someone else who has worried about these things (I regularly copy and paste the css from gmail buttons)

Re: Are We Taking CSS Too Far?

#15

Post by 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.

Re: Are We Taking CSS Too Far?

#16

Post by jacquesm »

soren_dahl wrote: post #11
tptacek wrote: post #5

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 compiler…

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

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.

Re: Are We Taking CSS Too Far?

#18

Post by _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.

Re: Are We Taking CSS Too Far?

#19

Post by MichaelApproved »

sp332 wrote: post #4

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

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.

Re: Are We Taking CSS Too Far?

#20

Post by user24 »

daleharvey wrote: post #14
user24 wrote: post #8

Earlier quoted context omitted.

CSS Buttons are all well and good for simple styles and rapid prototyping. But what happens when your boss asks you to add an icon inside the button? Or stretch it vertically? Or add it to an email bulletin? And the time you claim to have gained by not having to fire up photoshop and knock out a few simple buttons, you'll lose again by having to test in different browsers. Also consider readability, maintainability,…

adding an icon inside a button is far simpler with css buttons, stretching it vertically is obviously miles miles easier with css than with images, email is just a whole other nightmare that I really dont think should even be considered when talking about sane html / css. I dont understand how you can possibly think generating text inside images to be more readable or semantic, future proof or maintainable. nor do I…

Good points, esp re email. I'm not particularly wedded to either side of the debate really, but:

> generating text inside images

oh, nonono, I was thinking more in terms of INPUT.button{background-image: url(btn.php?button_attributes_in_json);}

> adding an icon inside a button is far simpler with css buttons

depends what wonderful CSS you're using to create your button.

> generating images programatically on the server is easier

you say 'programmatically' like I'm suggesting something beyond taking a few pre-made slices and combining them into one image before serving it up. I'm not.

Post reply on HN