7 ms·
Are We Taking CSS Too Far?
- cpr 16y agoNo.
- user24 16y agoDid 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 16y agoCSS 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.
- user24 16y agoCSS 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, future-proofing your code, semantic html. edit: and if the ability to autogenerate arbitrary buttons is important, knock up a server side script to create the graphics for you. Really. That's much nicer than doing it in CSS for all but the simplest of cases.
- daleharvey 16y agoadding 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)
- user24 16y agoGood 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.
- daleharvey 16y ago>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. heh its not "hard", but its already a hell of a less convenient than what I just do now with css.
- earnubs 16y agoIf you need to handcraft graphics for every label the application needs then you are doing it wrong.
- daleharvey 16y agothere is always this point at which you start automating things, you have 1 or 2 "discount stickers" or whatever. then you start using them a lot, and at some point it becomes worth it to build a tool to automate it rather than do it by hand. with css you do it once and its pretty much already automated, you just add a class to each "discount" or "tag" button you want. On a side note I really despise the "you are doing it wrong" meme, it virtually always means "you arent doing it with the same concerns I have".
- tptacek 16y agoWe 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.
- sp332 16y agoIf 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 16y agoshort answer: base64. See: http://stackoverflow.com/questions/1124149/embedding-background-image-data-into-css-as-base64-good-or-bad-practice http://stackoverflow.com/questions/1124149/embedding-backgro...
- MichaelApproved 16y agoThe 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 16y agoNo, he’s talking about data URLs. They work in everything barring IE6+7.
- sp332 16y agoIf 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.
- tptacek 16y agoIt 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.
- earnubs 16y agoI'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).
- jacquesm 16y agoI 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.
- w1ntermute 16y agoIs that a practical option right now when support of legacy browsers is still a necessity?
- uxp 16y agoI think it is highly practical, since one very skilled designer and CSS programmer with enough programming skill (or a team) can create a template that many other less skilled and less experienced designers can then take and use at will. The template, while being rather complex compared to the hand-coded and "beautiful" markup that Thomas was talking about, can also have enough dumb logic in itself to degrade gracefully on legacy browsers.
- protomyth 16y agoSomedays I just wish we had used Postscript with hyperlinks instead of HTML/CSS/Javascript.
- jacquesm 16y agoPort 83 is free as far as I can see, I'm game. HPTP? Or Content-type: text/hyper-postscript?
- protomyth 16y agoIt 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,
- jacquesm 16y ago> 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. But we can do that just as easily today. > Would the web have been here if the net port restricted like it does today in the days of gopher? There are very little port restrictions. The only ones that I am aware of that are routinely enforced are http and mail servers running on end-user lines and mail server other than the ISP ones connected from those lines. Anything else is fair game. > f 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, Display postscript is a very impressive language, it takes some getting used to though. But it is a lot more flexible and orthogonal than HTML will every be.
- jerf 16y agoPDF 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.)
- nanairo 16y agoI 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 16y agoUnfortunately, 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 16y agoraphael.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-cardwell 16y ago1.) 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.
- nanairo 16y agoIsn'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 16y agoJust 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 16y agoAh, but it certainly means I would! (You know. In the absence of a hammer)
- sjtgraham 16y 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 16y agoA nice compromise would be: transformations in CSS (display concerns), animations in JS (behavioral concerns) WebKit went ahead and did both...
- _delirium 16y agoHmm, 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 16y agoSVG 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 16y agoSVG is supported (and hardware accelerated) in IE9.
- mike-cardwell 16y agoAlso, 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.
- rudd 16y agoI'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 16y agoYes.
- wihon 16y agoIs 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 http://bit.ly/aqv6jT from the article), or make perhaps better alternatives (like SVG) unecessarily painful.