In Amigo we’ve got percentage bars! This was the image that Jason came up with:
In turning this part of the design into something flexible on the website I saw two options; clever CSS, or ‘Lots of Images’. I decided that ‘Lots of Images’ was a bad idea:
- If they were generated in PHP you’ve got that extra overhead
- For each percentage bar you’d need to download another image - extra bandwidth & slower for the user
- Could get difficult for a designer to update (and, it’s an image after all)
… so clever CSS it is.
The Code
Okay, it’s not really that clever, it’s CSS not rocket science. It does however mean that no matter how many percentage bar’s will be displayed on the page the user will only need to wait for two images to be downloaded. I think it’s a nice solution that you might be interested in. Here’s the XHTML & CSS:
<img src="/images/percentImage.png" alt="9.5%" class="percentImage" style="background-position: -110.315px 0pt;" />
img.percentImage {
background: white url(/images/percentImage_back.png) top left no-repeat;
padding: 0;
margin: 5px 0 0 0;
background-position: 1px 0;
}
If you understand XHTML/CSS, you’ll see there’s two images involved. The first image is the border for the widget, inside of the border it’s transparent:
The second image is the bar’s color, split into two halves. The first 50% is the "full" color, the remaining 50% being the "empty" color:
What’s it doing
Notice, the alt attribute of the img tag (I’m with you Roger) is the percentage that the image represents for screen readers etc. - this is important information and we want to make sure it’s accessible!
The width of the img tag will always be the same regardless of the width of the background image we set in the CSS, knowing this we can position the background to the top left (as default) and set it not to repeat. The background-position is set to 1px so that the image fits within the border in the first image, however, we could make the image a little large if we wanted to.
The inline style handles what pecentage we want to display in the box by changing the position of the background-image. In our case a PHP script handles all the math for us (which is why it’s a little too exact, however I believe browsers will round that to the nearest pixel).
I’ll throw a few other thoughts out there for anyone interested in using this method:
- When inline styles become redundant in the XHTML standard
- Page Zoom (IE7) - how would that change the display of this widget
