CSS performance: UI with fewer images / Stoyan's phpied.com

CSS performance: UI with fewer images / Stoyan's phpied.com: "Often performance improvements come with their drawbacks, sometimes improving performance causes pains in other parts of the development process or strips stuff from the final product. Sometimes there's even a conflict where you have to pick: slow, unusable and beautiful or fast and looking like hacked with a blunt axe. But it doesn't have to be this way.

This post outlines some approaches to achieving common UI elements using CSS tricks in as many browsers as possible while using as fewer images as possible. Some of the tricks are brand new, some are very, very old, IE5.5. old. They all have in common the 'fewer or no images' mantra. Using fewer images comes with some pronounced benefits:

less time spent in Photoshop
lighter page, less HTTP requests, less image payload
fewer elements in the sprite to maintain (and sometimes fewer sprites) which means longer lived sprites with fewer updates and cache invalidation
generally easier maintenance - it's much easier to change a color value than to update and push a new image version
Sometimes some browsers may not be fully supported but that's ok - as long as there's progressive enhancement and the basic page is usable, people rarely notice 1px glows and other ornaments."