Overview: This method involves adding a small PHP script to your CSS document and replacing its
.css extension with a
Place the following PHP script into the top of the CSS document that you wish to compress. Then change the
.css extension to
.php, to arrive at something similar to:
compressed-css.php. Remember to use the new name when referencing the file.
<?php ob_start ("ob_gzhandler"); header ("content-type: text/css; charset: UTF-8"); header ("cache-control: must-revalidate"); $offset = 60 * 60; $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT"; header ($expire); ?>
Here is the same PHP script commented with functional explanations:
<?php // initialize ob_gzhandler function to send and compress data ob_start ("ob_gzhandler"); // send the requisite header information and character set header ("content-type: text/css; charset: UTF-8"); // check cached credentials and reprocess accordingly header ("cache-control: must-revalidate"); // set variable for duration of cached content $offset = 60 * 60; // set variable specifying format of expiration header $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT"; // send cache expiration header to the client broswer header ($expire); ?>
Functional Summary: The previous PHP function will first check to see if the browser requesting the file will accept "gzip-deflate" encoding. If no such support is detected, the requested file is sent without compression. Next, the function sends a header for the content type and character set (in this case, "text/css" and "UTF-8"). Then, a "must-revalidate" "cache-control" header requires revalidation against currently specified variables. Finally, an "expires" header specifies the time duration for which the cached content should persist (one hour in this case).
Overview: This method involves placing the PHP script in a separate
.php file and adding a set of rules to an .
A more discrete, unobtrusive method for compressing CSS involves two steps. First, save the script provided in the first method (above) as a seperate
gzip-css.php file and place it in a CSS-exclusive directory. Then, add the following ruleset to an .
htaccess file located in the same CSS-exclusive directory (i.e., the CSS directory should contain only CSS files):
# css compression htaccess ruleset
AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
php_flag zlib.output_compression On
Here is the same htaccess ruleset commented with functional explanations:
# css compression htaccess ruleset # process all CSS files in current directory as PHP AddHandler application/x-httpd-php .css # prepend the PHP script to all PHP files in the current directory php_value auto_prepend_file gzip-css.php # compress all parsed PHP pages from current directory # this rule is redundantly present as the first line of the PHP script php_flag zlib.output_compression On
Functional Summary: The .
htaccess rules above first instruct Apache to parse all CSS files in the current directory as PHP. After this, Apache is instructed to insert the contents of the "
gzip-css.php" file into the beginning of each PHP (i.e., CSS) file parsed from the current directory. And finally, Apache is instructed to compress automatically every parsed document in the current directory.
- Internet Explorer 5 and up: works great
- Netscape Navigator 6 and up: works fine
- Mozilla/Firefox: all versions seem to work
- Opera: does not cache compressed CSS