3 ms·
What are the pros/cons of using CSS instead of images?
by Maro 16y ago
What are the pros/cons of using CSS instead of images?
- deleted 16y ago[deleted]
- niels 16y agoEasily change color and size...
- synnik 16y agoPerformance -- even if the CSS is the same size as the image, a single CSS file can return all the icons with a single HTTP request, vs having to make separate requests for each image. Even with CSS Sprites, there are two requests - one for the CSS, another for the sprite image file.
- andrewnez 16y agoYou can embed images directly in css with data URIs as well: http://css-tricks.com/data-uris/ http://css-tricks.com/data-uris/
- kree10 16y agoTo see something like this in action, this HTML Mail.app clone demo (that I'm pretty sure hit the HN front page several months ago) uses data URIs for all its icons: http://ukijs.org/mail/index.html http://ukijs.org/mail/index.html
- csomar 16y agoCSS Sprites should be better, though. Less computer processing power.
- necolas 16y agoYou can avoid the extra request for an image using a data URI - http://www.phpied.com/data-uris-mhtml-ie7-win7-vista-blues/ http://www.phpied.com/data-uris-mhtml-ie7-win7-vista-blues/ The main advantage of CSS is that you can change the color and appearance of components without using a graphics package, and they might scale better. But that's about it. It was a technical exercise rather than a proof of concept. The icons themselves are very simple and limited. I wouldn't recommend using CSS in this way for production work (other than perhaps for very simple arrows).
- chrisbroadfoot 16y agoEven for simple arrows, I'd go with the multitude of unicode arrows. This has the added benefit of screen reader support. -- edit: I'm not sure why I can't reply to you below, but here are some of the unicode arrows: http://img.skitch.com/20101119-n8558618t59wn8gdw5n6buax3d.medium.jpg http://img.skitch.com/20101119-n8558618t59wn8gdw5n6buax3d.me... It's easy enough to get screen readers to ignore it, if it is truly presentational.
- necolas 16y agoI'm not sure some simple arrows can be achieved with unicode characters...nor would you want a screenreader to pay attention to what is purely presentational.
- necolas 16y agoThanks, you're right, plenty of options - http://www.alanwood.net/unicode/arrows.html http://www.alanwood.net/unicode/arrows.html But there doesn't seem to be one for the simplest: just a basic triangle.
- moe 16y agoLook here: http://www.alanwood.net/unicode/geometric_shapes.html http://www.alanwood.net/unicode/geometric_shapes.html
- stan_rogers 16y agoUnless you use data: URIs and base64-encode the images, which can result in a smaller CSS file than "pure" CSS while still eliminating extra HTTP requests. That depends on the complexity of the image and of the gradient set (or what have you) that would be needed to replace it. Optimization is always situational.
- thevivekpandey 16y agoOh great, I once felt the need of it, but did not it actually existed. I feel though that pure CSS solution would be better, since modifying the colors etc would be easier with pure CSS.
- philfreo 16y agoYou can use image sprites and still control the colors using CSS! http://www.digital-web.com/articles/web_standards_creativity_png/ http://www.digital-web.com/articles/web_standards_creativity...
- weego 16y agoIn theory, but looking across browsers shows that you'd never be able to use this in production without falling back to graphics, which adds to production, maintenance and degrades any performance benefits for a good portion of users. It's a nice theoretical challenge, and may provide some benefits if you are building (mobile) device specific systems, but as a broad technique there is little production value at the moment.
- bnr 16y agoThey natively scale to any size.
- remi 16y agoNot the ones in this implementation though.
- smackfu 16y agoIf do a Ctrl-+, they do get bigger with no jaggies. So that is some level of scaling. OTOH, I don't know that there is any way to take these icons and draw them at a larger size without creating new CSS.
- remi 16y agoOh, it's because I have enabled "Text-only zoom" in Firefox. I expected the icons to be sized in "ems" so that their size would be relative to their element's font size.
- yatsyk 16y agoFor me main plus is easy way to change icon properties such as color with css or js. Bad browser support is main disadvantage for sure.