I'm trying to place a bunch of css files into an external file in order to improve the page loading speed. I don't get any errors but the layout of the page is corrupted due to the missing css. Here is what I am doing. Given this in the page header
<link rel="stylesheet" type="text/css" href="ext/css/template.css" />
<link rel="stylesheet" type="text/css" href="ext/css/tabcontent.css" />
I replace it with
<link rel="stylesheet" type="text/css" href="ext/css_loader.php" />
and the css_loader.php file has the following code:
<?php
$css = array(
'ext/css/template.css',
'ext/css/tabcontent.css'
);
$mergeCSS = "";
foreach ($css as $css_file) { $mergeCSS .= file_get_contents($css_file); }
ob_start('ob_gzhandler');
header('Content-type: text/css');
header('Vary: Accept-Encoding');
echo ($mergeCSS);
I did the same for the javascript files and it worked correctly. If I display the loaded css, it appears to be there, though it is all one big block.
Is it possible to do this with css files? If so, can someone explain why it is not working?
