I love the blueprint CSS framework, I’ve been using it for a while, and it’s a very useful time saver.
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
@media CSS selector, we can differ between different medias for CSS rules.
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.
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 :