I love the blueprint CSS framework, I’ve been using it for a while, and it’s a very useful time saver.

The only thing that bugs me about it’s usage is the nagging I keep getting from YSlow and PageSpeed about reducing the amount of http request in the page.

Since blueprint CSS uses at least two http requests (one for screen media, the other for print), and as much as four (IE version and show grid image), I thought of a small way to enhance this a bit.

Meet the @media CSS selector

Using the @media CSS selector, we can differ between different medias for CSS rules.

Example:

1
2
3
4
5
6

@media  screen, projection {  
    body { background: #CCC; }  
}  
@media print {  
    body { background: #FFF; }  
}  

That allows us to embed the print CSS into the main blueprint CSS saving one http request.

Embedding images in the CSS as base64 encoded images

All modern browsers (Except IE below 8) can display images embedded in the CSS or Markup.

Example:

1
2
3

.showgrid {
    background:url(data:image/png;base64,idsadsaVERYLONGBASE64String=)
}  

There’s actually an online utility converting images to the base64 format, see here. This saves us another http request!

As always, IE finds a way to ruin things..

The only extra http request left is the IE specific CSS.

You could solve this with some server side logic, however, this is not recommended, as won’t help your caching.

Besides, whatever is solvable at client side, should be solved there!

The final CSS :

Download | Gist (Do fork and improve!)

Enjoy