Combining print.css with other CSS files

Date: 03 Aug, 2010
Posted by: admin
In: hints & tips|internet, web design & development|Search Engines, SEO & SEM

Bookmark and Share

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)>

5 Responses to "Combining print.css with other CSS files"

[…] Pełny artykuł na: Combining print.css with other CSS files | flapjacktastic […]

cna training says:

Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!

Amazing post. I have bookmarked your site. I am looking forward to reading more

WP Themes says:

Nice brief and this fill someone in on helped me alot in my college assignement. Thanks you seeking your information.

[…] Combining & gzip compressing CSS files […]


About

Flapjacktastic is just a random collection of musings, hints&tips, notes, information ... a collection of stuff really that's overflowed from the brain of this husband, father, potter, business-man, geek ...

past posts