Reducing HTTP requests by combining CSS files.

@media in CSS

how to combine CSS files

So Google suggests to me that I combine my CSS files to save HTTP requests. How to do that?

Joining print and normal stylesheets

It’s quite easy when you have separate stylesheets (CSS) for print and regular styles to combine them into a single CSS file. This would work for other @media [media] sections too like mobile.css files. Here’s an example cropped from a live site:

@media all
{
* {font-family:Helvetica, Geneva, Verdana, sans-serif;border:0;margin:0;padding:0;}

body {background:url(/images/bg-3edge-b3.png) center 0px no-repeat; color:#000; }
#hd { width:974px; height:55px; overflow:hidden; padding:10px 20px 0; margin:0 auto; }
[…]

} /* end @media all */

@media print
{
* { background: #fff!important; color: #000; font-family: ‘Times New Roman’, serif; }
#main, #textBlockContainer {width:auto!important; margin:auto!important; }

h1 { display: none!important; }
[…]

} /* end @media print */

Once you’ve added in your print.css styles like this you’ll want to remove the media attribute (not just the value) from the main CSS file so that any UA picks up the link-ed CSS file.

<link rel=”stylesheet” href=”common-style.css” title=”common styles” media=”all” />

So, you delete the bit in red.

Done. One more optimisation, few more microseconds of download speed ;0)>