Method One

This method involves adding a small PHP script to your CSS document and replacing its 

.css

 extension with a 

.php

 extension.

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

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).

Method Two

Overview: This method involves placing the PHP script in a separate 

.php

 file and adding a set of rules to an .

htaccess

 file.

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

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.

Confirmed Browsers

  • 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

References

0 Shares:
Leave a Reply

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

sixteen − 9 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

Text Resizing With jQuery

Want to allow visitors to increase or decrease the text size (font size) on your website? I’m going to show you how - using jQuery (a great JavaScript library).

Cross-browser CSS3 box-shadow

Simple way for creating cross-browser box-shadow in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version).

Detect screen size with jQuery and apply a CSS style

Sometimes we need to format the content differently according to the screen resolution of the user. One of the ways to do this is to simply detect the screen width using the screen.width property and change the stylesheet.