Archives for December 2007

I can’t claim that this is a completely original idea. I’m certain that somewhere out there someone has come up with the same idea (probably several someones). Here is my way of creating lightweight XML/RSS Feed buttons using only CSS.

The goals in this project were:

1. Create an XML/RSS feed button without an image file
2. Use only CSS
3. Have the end result be smaller in file size than using an image
4. Be able to have the end result load with the page instead of an extra file

I began by actually downloading an XML button image: . The file size of the image is 429 bytes and using an image editor to sample the exact colors of the background and the borders. The colors were as follows:

• #FF6600 – background
• #FFC8A4 – border top
• #7D3302 – border right
• #3F1A01 – border bottom
• #FF9A57 – border left

Arial will do fine for the font, and it was obviously bold weight, white in color, and 11 pixels. The image size was 36 x 14.

With this information, I assembled the following CSS to get this button:

 

.cssbutton {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #FF6600;
    height: 14px;
    width: 36px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FFC8A4;
    border-right-color: #7D3302;
    border-bottom-color: #3F1A01;
    border-left-color: #FF9A57;
}

The above CSS is 602 bytes, so at this point, we’re actually heavier than the image itself. Since the goal here is to create a button of shear microscopic file size, every byte matters. So I went through this original CSS and reduced what is redundant, combined what could be combined, eliminated white-space, and used short-cuts when possible. This reduction yields the same result:

 

.cb{
    font:11px Arial,sans-serif;
    font-weight:bold;
    color:#fff;
    background-color:#f60;
    height:14px;
    width:36px;
    text-align:center;
    border:1px solid;
    border-color:#FFC8A4 #7D3302 #3F1A01 #FF9A57;
}

This gets us to 241 bytes, almost half of the size of the image file. That certainly qualifies as an improvement. But we can do better. The above does contain carriage returns and tabs for easy comparison to the original. Eliminating those extra bytes gets the size down to 185 bytes. Now we’re talking.

(Note: From here on, the file sizes do not include carriage returns. However, to make them easier to read in this column, I have displayed them with carriage returns. Running the CSS on a single line with no whitespace improves the file size considerably.)

Further size reduction is certainly possible if you are willing to give up the shading effect of the borders. Here’s an example:

 

This reduces the size to 147 bytes:

.cb{
    font:11px Arial,sans-serif;
    font-weight:bold;
    color:#fff;
    background-color:#f60;
    height:14px;
    width:36px;
    text-align:center;
    border:1px solid#7D3302;
}

Or eliminate the border all together and we get it down to 123 bytes, 28% the size of the image file:

 

.cb{
    font:11px Arial,sans-serif;
    font-weight:bold;
    color:#fff;
    background-color:#f60;
    height:14px;
    width:36px;
    text-align:center;
}

For my money, I like the extra colors on the borders. It makes the text look like the image file and we are still improving the size by almost a 50% reduction.

One thing to remember is that your mileage may vary. In a perfect test environment, such as an HTML file with just these examples and no other CSS, the above code is all we needed. However, to display the examples in this post, I had to add some extra properties to the CSS to overcome the inherited properties of the rest of my page.