Category: Web Apps
We launched a new feature on a site I am working on, and to highlight the new feature we decided to put one of those new images right next to the link. The link to the new feature is in several places, so the new image was going to have to be in several places.
There were a couple of issues with adding the image, but the most painful one being that at some point the feature wouldn’t be new anymore and someone was going to have to go and remove all the images later (the application isn’t totally in an MVC style framework at present so there are several places to update).
Instead of adding the new image next to the links, we fudged it with CSS. We just created a new class for the new feature links – .newfeature or whatever – and in the class definition added the new image with background and padding. For example:
.newfeature {
...
background: url(/images/new.gif) no-repeat;
padding-left: 30px;
...
}
Then when the feature isn’t new anymore, we can just remove the background and padding from the CSS class.
It’s a simple solution, but we almost overlooked it. It obviously wouldn’t work all the time, but I think it was a nice technique that will save some time later. Moral to the story: CSS is used for styling ;)