Call me!
cell: 612-730-9540

css.compress.php

Project Winter 2014:

Manas Tungare's css.compress.php.

I created this page to test Manas Tungare's css.compress.php script and how it could cut down my CSS file size and reduce pages load time by minifying my CSS file. This script also allows you to add mutliple CSS files to be combined and minified on the fly. You can find the PHP script at https://gist.github.com/manastungare/2625128.

The Code Reveal:

First: The HTML


<link href="css/css.php" rel="stylesheet" type="text/css" /≫

Instead of including the link for my CSS stylesheet I replace it with alink to the css.php file.

Lastly: The PHP


<?php
/**
* On-the-fly CSS Compression
* Copyright (c) 2009 and onwards, Manas Tungare.
* Creative Commons Attribution, Share-Alike.
*
* In order to minimize the number and size of HTTP requests for CSS content,
* this script combines multiple CSS files into a single file and compresses
* it on-the-fly.
*
* To use this in your HTML, link to it in the usual way:
* <link rel="stylesheet" type="text/css" media="screen, print, projection" href="css/css.php" /≫
*/
 
/* Add your CSS files to this array (THESE ARE ONLY EXAMPLES) */
$cssFiles = array(
"style.css"
);
 
/**
* Ideally, you wouldn't need to change any code beyond this point.
*/
$buffer = "";
foreach ($cssFiles as $cssFile) {
$buffer .= file_get_contents($cssFile);
}
 
// Remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
 
// Remove space after colons
$buffer = str_replace(': ', ':', $buffer);
 
// Remove whitespace
$buffer = str_replace(array("\r\n", "\r", "\n", "\t"), '', $buffer);
$buffer = ereg_replace(" {2,}", ' ',$buffer);
 
// Enable GZip encoding.
ob_start("ob_gzhandler");
 
// Enable caching
header('Cache-Control: public');
 
// Expire in one day
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
 
// Set the correct MIME type, because Apache won't set it for us
header("Content-type: text/css");
 
// Write everything out
echo($buffer);
?>

At first this didn't load up my CSS right and the page was displaying almost as if there was no stylesheet attached - "almost" is the operative word because some of my CSS was displaying properly. I read the comments below and read a remark made by barnettjw:

"Stripping out all spaces seems to break CSS descendant selectors, instead replace 2 or more spaces, with a single space."

Change this:

$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);

To this:

$buffer = str_replace(array("\r\n", "\r", "\n", "\t"), '', $buffer);
$buffer = ereg_replace(" {2,}", ' ',$buffer);

So I made the change and the page becomes styled correclty.

When I tested load speed in both Chrome and Firefox the load times for two pages - the page you are on now css.compress.php and for PHP Include page - both have almost the same elements. The minified css (css.php) load times were slightly longer than for unminified (style.css) but the file size for css.php was smaller than style.css.

My conclusions are, well, inconclusive. Perhaps I can find a better solution.

Contact me

If you would like to speak with me more about my qualifications, experiences and what I can do for you please feel free to contact me.