Tips & Tricks

Compress CSS Files using PHP

Here is the nice trick to compress your css files using PHP in easy way. For this trick you do not need to rename your .css file .php files.

Currently I was seaching for the CSS compression tricks and found several methods. Some of those methods needs to rename my .css files to .php files and place the compression code in all file.

But in trick you do not need to rename the css files and you can get it done by one PHP file only.

Let’s see how it works:

You need to create one PHP and place the below code into that PHP file.

[cc lang=”php”]

[/cc]

Update:

[cc lang=”php”]
$lastCssModificatedAt)
{
$lastCssModificatedAt = $cssModificatedAt;
}
}

if(filemtime($cacheFilename) >= $lastCssModificatedAt)
{
return true;
}
}
return false;
}

/* include all CSS files */
// include(“style.css”);
// include(“fonts.css”);
// include(“print.css”);

$cssFiles = array(“style.css”, “fonts.css”, “print.css” );

// This can be changed whatever you want
$cacheFilename = md5(implode(“”,$cssFiles)).”.css”;

$cssCompressed = “”;

if(!checkCacheIsOk($cacheFilename, $cssFiles))
{
$cssCompressed = buildCache($cssFiles);
writeCache($cacheFilename, $cssCompressed);
}
else
{
$cssCompressed = file_get_contents($cacheFilename);
}

echo $cssCompressed;

[/cc]

This method uses the output buffer function to make it work. From here You can know about Output Buffer Explained.

Note: You do not need to rename you .css files to .php.

Shares:
  • […] rest is here: Compress CSS Files using PHP | Expert PHP Developer Share and […]

    Reply
  • Beyta
    August 29, 2011 at 9:48 am

    sorry… when need to load that file? need to place in head or just include on the load page?

    Reply
    • Avinash
      August 29, 2011 at 6:36 pm

      you can simply include the file like

      // in this file you can place the above code.
      include(“cc_compress.php”);

      Reply
  • Karoly Bujtor
    Karoly Bujtor
    August 29, 2011 at 2:20 pm

    This code can be enhanced some caching to improve performance.

    Maybe you can replace output buffering and include() calls with file_get_contents() to prevent code injection through css files.

    Reply
    • Avinash
      August 29, 2011 at 6:34 pm

      Suggestions are most welcome :)
      Can you please share the code which you are suggesting?

      Reply
      • Karoly Bujtor
        Karoly Bujtor
        August 29, 2011 at 11:38 pm

        Well… I thought about something like that:

        Reply
        • Avinash
          August 29, 2011 at 11:56 pm

          Hi Karoly,

          Thanks for the suggestion. I have placed your code in post content as a update.

          Reply
  • vir0e5
    September 6, 2011 at 11:42 am

    like this…. i want to your share using form…. to comprees it,,,, :)

    Reply
  • Thomas
    Thomas
    September 10, 2011 at 12:27 pm

    Hi ! This code is awsome to use , thank you . First time all worked as ecpected.
    At the moment, i use your code as follow (header has been removed to inline the css):

    ob_start();

    echo “”;
    include(“/www/whatever/css_compress.php”);
    echo “”;

    ob_end_clean();

    This works perfect and now and JS should be compressed same way.

    Reply
  • Thomas
    Thomas
    September 10, 2011 at 12:29 pm

    ok, your script removed the text behind echo

    echo ” ” ;

    Reply
  • Guest
    Guest
    February 15, 2012 at 11:32 pm

    Awesome!!

    I replaced:
    …with only:

    Your script eliminates 2 HTTP calls and compresses the single call while reducing CPU use on future calls via server-side cache.

    Please note: You need to make the folder where the PHP script is writable for the script or the cache file will not be written (but the output is still echoed to the browser).

    Thank You!

    Reply
  • Sam
    Sam
    April 21, 2013 at 11:03 am

    you system fail with this code:
    is possible upgrade please?

    $css=’h2{
    color:#aa0000;
    text-shadow:#aa0000 1px 1px 2px;
    /*
    /* W3C no acepta esto pero funciona con IE
    filter:/*progid:DXImageTransform.Microsoft.dropShadow(color=#000,offX=99,offY=99)*/
    progid:DXImageTransform.Microsoft.Alpha(opacity=99)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=1.4,enabled=’true’);
    /*font-size:5em;*/
    */
    */
    font-size:12em;
    }
    .perdido{
    /* perdido o cualquier otro estilo se pierde… */
    color:#fff;
    }
    ‘;
    $css=preg_replace(‘!/*[^*]**+([^/][^*]**+)*/!’,”,$css);
    echo $css;

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *