Hacker News Reader

Comment by josefresco | Hacker News Reader

I love how the author includes a line within the article that pretty much sums up the insanity of using pure CSS to create buttons ... "a small truckload of CSS" A designer could replace that truckload of CSS with 1 image and 1 line of code.

We gotta stop sometimes and think .. what are we trying to achieve exactly? Strikes me almost as an extreme diet that excludes 100% of fat from your intake just for the sake of having no fat irregardless if it's healthy or causes you to lose weight.

But in the "cool project" nerdy line of thinking .. it's pretty neat.

View on HN

Well for one thing the buttons are scalable, unlike images. Also I imagine that the truckload of CSS still comes in way smaller than the required image(s).

If someone's willing to take the time to figure it out, it is not wasted. If indeed it is more efficient to draw buttons this way than to use an image, it makes sense to do this.

Three images, actually (normal, hover and active). Six if you have buttons in two different colors. Twelve if you need the buttons in two different sizes.

You need a truckload of CSS to define how a button looks but you only need to do it once. Creating arbitrarily colored and sized buttons is as easy as adding one or two lines of CSS. And at some point in the future we will actually be able to drop the prefixes and the CSS will become quite elegant and compact.

Well, you can still do it with one image (CSS sprites and kind of "sliding doors" technique), however an image is one more resource to maintain, and that "truckload" of CSS in reality is smaller than HTTP request headers of an addtional request for said image (even if responese is 304 Not Modified). Sure, you can properly set Expires into far future and save request for repeated visitors, but then you will need to come with a versioning scheme. All in all, CSS way is simpler and easier to maintain. Add some more bling with CSS transforms, e.g. some nifty color fade/shift on hover and it gets realy tough for an image based solution to stand a chance.

All valid points, I looked at it more from the maintainability point of view, not so much the speed angle. You will have to maintain a Photoshop file, have some mechanism in place to stitch together your sprites and export a truckload of different images. All that can be automated up to a point, but still. Seems like a lot of hassle.

That, and more and more browsing is done using easily zoomable browsers like Mobile Safari. It's becoming less likely that users will experience your site at its "native" resolution, so anything that moves away from poorly-scalable images is a good thing.

Reply on news.ycombinator.com