CSS is more flexible than it’s ever been, it allows us to create well designed interfaces without the need for exporting as many images as we used to. But are we neglecting the use of images and vectors for the sake of it?

There was a time when front-end developers had to master the art of butchering semantic code to achieve the results they wanted. Chopping up 9 images into a 3×3 table was common practice for anyone who wanted to achieve rounded corners.

Thankfully we now live in the future, where properties such as border-radius have given us:

• Cleaner markup
• Faster loading times
• Reduced development time

CSS properties are now so flexible it’s possible to replicate a detailed mockup without using any image assets at all. Look at this example of a full icon set generated without using any images or sprites.

It’s an impressive experiment for someone who remembers creating 3×3 tables, but is it just a clever technical demonstration or does it have any practical application in web design today?

Let’s take a recent example. I wanted to convert my mockup into markup and CSS. I had designed a ribbon.

Inspired by the CSS-only icons I thought I’d try using CSS properties and pseudo elements to achieve the desired effect without sprites or vector images.

It worked, kind of. But at what cost? It took much longer to develop using trial and error to trick the properties into displaying something they weren’t intended for. I was fiddling with border properties to create a ribbon shape and layering up drop-shadows to create border effects, which also meant I couldn’t get it pixel perfect. Take a look at the sharp edges for example.

Because I had effectively hacked the CSS to create this element I couldn’t use other properties accurately, such as applying a drop-shadow.

There are benefits to CSS-based styles such as scalability across devices and resolutions but the pro’s don’t outweigh the con’s.

If I used a sprite or vector graphic it would have:

• Looked closer to the design
• Taken less time to code
• Added no significant weight to the download time
• Made no difference to the markup
• Been compatible with a wider range of browser versions

Sprites may not be ideal in a time where designers are expected to export multiple assets for different resolutions, but as someone who wants to achieve pixel perfection I favour the consistent results over bulky CSS and hacked properties.

Years ago, front-end developers bodged the markup to create the elements they wanted because it wasn’t possible any other way. Now we have more than one way of achieving our goal semantically and efficiently.

For me, the icon experiment tells us we can do wonderful things with CSS that we couldn’t before but I think the important thing is to strike a balance and not to reject images for the sake of it.