What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » Compress CSS with PHP

Compress CSS with PHP

Start your CSS files with this PHP (and name it style.php):

<?php
    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
?>

body { color: red; }

Then call your CSS with the PHP file name:

<link rel='stylesheet' type='text/css' href='css/style.php' />

Subscribe to The Thread

  1. Ben

    Some older browsers choke when CSS files don’t have the .css extention. It’s the same with Javascript files.

    Perhaps use .htaccess to rename it to style.css

    Reply ↓
    • elandy2009

      Anyway nobody cares about old browsers when developing Web sites.

  2. TeMc

    @Ben: Or rename the file to .css and use .htaccess to interpretate is as PHP ;-)

    Reply ↓
  3. TeMc

    @Ben: Or rename the file to .css and use .htaccess to interpretate it as PHP ;-)

    Reply ↓
  4. Roflo

    I believe it’s good practice to call ob_flush(); at the end of your script.

    Reply ↓
  5. DougS

    how do you know so much stuff

    Reply ↓
  6. Jacob McDonald

    I’m glad to see my submission got up on the site.

    Reply ↓
  7. Hassan

    I get “Cannot modify header information” error. Any idea?

    Reply ↓
    • David

      You may be outputting something before the call to header().

      Usually this is because of a new line or space before the very first <?php tag

  8. Bloggerschmidt

    Thanks for the snippet. The line

    <pre>header(“Content-type: text/css; charset: UTF-8″);</pre>

    should be

    <pre>header(“Content-type: text/css; charset=UTF-8″);</pre>

    Reply ↓
  9. cpWicked

    What are the advantages if i compress css?:)

    Reply ↓
  10. Michelle John

    i think you can also use gzip or defalte mod options if you are using apache server.

    Reply ↓
  11. Keshav Naidu

    What is the uses ?
    -thanks in advance.. :)

    Reply ↓
  12. Ahmad Awais

    What are the advantages of it? I am using Minify stuff?

    Reply ↓
  13. Peter

    you could use it like this:

    <?php
$base_color = "#COFFEE";
?>

a {
color: <?=$base_color?>;
}
    Reply ↓
  14. Dalibor Sojic

    This script has disadvantages. The main disadvantage is caching.

    On first visit, php will set expire date to “future”, but… if you make change into the CSS, will not reflect to returning visitors, because they already have cached CSS.

    Reply ↓
    • BAM5

      True, but there are other methods of caching, such as setting an ETag header and changing that whenever you change the contents of the php output so as to update the browser’s cache. Or better yet, do a checksum of the output buffer and set that as the ETag that way you never have to touch the php code, although that has disadvantages because you’d have to render the css and hash it each time to compare the ETag from the client.

      http://en.wikipedia.org/wiki/HTTP_ETag

      <?php ob_start ('ob_gzhandler'); ?>

body { color: red; }

<?php
$output = ob_get_clean();
$etag = md5($output); // or crc32($output) which is faster but not as unique
$headers = getallheaders(); // May not work on non Apache Servers
foreach($headers as $header => $value)
	if($header == 'If-None-Match' && $etag == $value){
		header($_SERVER['SERVER_PROTOCOL'] . ' 304 Not Modified');
		exit();
	}
header('ETag: '.$etag);
header('Content-type: text/css; charset: UTF-8');
echo $output;
?>
    • BAM5

      Quick note, I didn’t test the above code so it may or may not work.

  15. Syed Shah

    But any way good and very important specially when google bot visit its also check how quick is your website. I dont think this is a disadvantage. Its all upto you how to use it.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~