[Web Development Tut] Compress your CSS with PHP

[euantor]

When developing large sites, you can end up with giant CSS files with all your styles and everything in them. Why not compress the blighters and save yourself space, bandwidth and loading time? Now, you may be thinking "well, just remove whitespace, use shorthand, try not to write the same entry multiple times..." However, these methods can only help so much, yet you can still compress more.

It's very simple to do using just PHP - take a look below!


Step 1

First of all, let's start a new PHP file. So, make a file like gzip-css.php. Within this file, add this following code at the top;

Code:

<?php
    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);
?>

Let's take a look at what this code actually does...

• First, we use PHP's ob_gzhandler to send compressed data. We will first check to see if the browser requesting the file will accept 'gzip,deflate' encoding; if not then the file is sent without being compressed.
• We now send a header for the content type and character set for the file - in this case text/css and UTF-8.
• Next, we send a 'cache-control http header'.
• The final step is to send an 'Expires' header, to set an age on how long our cached file will last. This file will expire in one hour.
  

Step 2

Ok, so now let's create our stylesheet. We'll call it style.css and save it in the same directory as gzip-css.php

Code:

body {
    background: #d2d2d2;
    color: #2b2b2b;
    text-align: center;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

a:link {
    color: #232323;
    text-decoration: none;
}

a:visited {
    color: #232323;
    text-decoration: none;
}

a:hover, a:active {
    color: #232323;
    text-decoration: underline;
}

#container {
    color: #2b2b2b;
    padding: 20px;
    margin: 10px 20px 20px 20px;
    text-align: left;
    max-width: 100%;
}

#content {
    /* FIX: Make internet explorer wrap correctly */
    width: auto !important;
}

Step 3

Great, so that's our .php and .css files sorted (or our stylesheet). Now, let's actually make them interact. We do this using a .htaccess file. Add the contents below to a new .htaccess file and save it to the same directory as the gzip-css.php and style.css files.

Code:

AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
php_flag zlib.output_compression On

This .htaccess rule does 3 things;

• The first line makes all CSS files get sent to the PHP file before being sent to the client - hence compressing them before sending them.
• The second line makes the changes to the CSS file.
• The third line tells PHP to use its built-in negotiated output compression automatically for every page it parses.
  

Step 4

And now to actually include the stylesheet in your HTML document. You just do this using the usual method;

Code:

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

There we go. All done! Easy eh? If you want, you can even download the files I made during this tutorial below and take a look yourself!