Date: 03 Aug, 2010
Posted by: admin
In: hints & tips|internet, web design & development|Search Engines, SEO & SEM
Reducing HTTP requests by combining CSS files.
So Google suggests to me that I combine my CSS files to save HTTP requests. How to do that?
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)>
[…] Pełny artykuł na: Combining print.css with other CSS files | flapjacktastic […]
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
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 […]