CSS Performance: UI with Fewer Images

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. They all have in common the “fewer or no images” mantra. Using fewer images comes with some pronounced benefits…

Enabling CSS RGBA Support in IE

One of the most frustrating things about working with newer CSS attributes is that while most modern browsers will support them in their latest versions, IE almost never keeps up. Such is the case with the RGBA color declaration which enables developers to specify an alpha transparency along with a color. This works great in the latest versions of all major browsers except IE. If the alpha transparency is 50% or greater IE will revert to the solid rgb color specified, otherwise it will revert to full transparency. I recently came across a little trick that uses the IE proprietary gradient filter which supports alpha channel colors. If you simply set both shades of the gradient to the same color you can achieve the same effect as the CSS RGBA attribute…

A Dash of Rosemary on Your CSS

Rosemary is an open-source modular cascading filter-based modification system for CSS files; or commonly recognized as the acronym, OSMCFBMS4CSS. Your CSS files are run through a series of filters that modify it one after another. These filters can be toggled on/off, rearranged, or all of them disabled completely to give you raw output. It provides a scalable CSS wrapper that you can continue to use no matter what version of CSS is supported (or unsupported)…

Cross-browser drop shadows using pure CSS

There’s an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. Do websites need to look exactly the same in every browser?

One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring additional HTML markup and one or more PNG images. Not to mention hacks for IE6 to get render PNGs properly. All of this begins to degrade page performance, when really the drop shadow is merely a secondary design flourish. CSS3 provides the box-shadow property to achieve just that. Thankfully Safari/Webkit has supported this for some time, and Firefox more recently with Firefox 3.5. Internet Explorer provides a DropShadow filter but this provides a hard-edged shadow unlike its CSS3 counterpart. By combining the Glow and Shadow filters however, we can achieve something that fairly closely resembles the rendered CSS3 shadow…