[AWESOME] CSS Compression on the Fly

[marcus@localhorst]

Holla,

You know the Problem, a CSS File will grow in these Xhtml/CSS-tableless layout-days up to 30kb (or more?) with all the comments and hacks.

So maybe you like to compress them -> http://www.cssdrive.com/index.php/main/csscompressor/

this remove all unneeded whitespace/linebreaks (and combine selectors if you like, but beware!)

But what if you sometime has to change your frontend.css? you have one line of code and it's hard to find the value you need to change!
That's not what I really want I'm lazy - so I thought about compressing CSS on the fly. but before start to code myself I take a google search - and voila! there is the simpliest way you can imagine!
http://www.ibloomstudios.com/articles/p ... ompressor/

The logic behind is: add a little php code to your CSS file which load and compress the styles in the output_buffer and then tell the webserver via htaccess that the specific css file will send throught the php parser.
f*cking clever?! yes! I think so!

Here how to get it run in phpwcms:

go to template/inc_css/frontend.css and add the following code to your CSS File

On top:

Code: Select all

<?php
  //header('Content-type: text/css');
  // only this works for me!
  header('Content-type: text/css; charset=utf-8');
  ob_start("compress");
  function compress($buffer) {
    // remove comments
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    // remove tabs, spaces, newlines, etc.
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
?>

between this is your VALID!!!! CSS Code! (better no css hacks here - put it in an extra file!)

on last line:

Code: Select all

 <?php ob_end_flush();?>

Next step is setup a .htaccess file in your template/inc_css folder to tell the server of parsing css as php! (because you have phpcode in your CSS file!)

write this in it:

Code: Select all

<Files frontend.css>
  SetHandler  application/x-httpd-php 
</Files>

the server will now parse frontend.css as php file and compress the code and send it to the browser as CSS (with header('Content-type: text/css; charset=utf-8');)

if you like to use more CSS files like me - one for containerlayout, one for formatting, you can take this code in this .htaccess file:

Code: Select all

<FilesMatch "(layout|frontend)\.css$">
  SetHandler  application/x-httpd-php
</FilesMatch>

thats all and works very well for me! And so thanks goes to the guy who share this idea: http://www.ibloomstudios.com/articles/p ... ompressor/

but


PLEASE BEWARE!


You should know what you do!
If you are using funny CSS Hacks in your main CSS File your layout may be f*cked up!

And Oliver G. is right when he said - he cannot recommend this in times of broadband and external-once-loaded-css-files which are cached by browsers! But I need that and I know the urge of over-optimizing-everything


My strategy is the following:
1. layout.css - holds all the position stuff for containers and basic formatting no hacks here! check for valid CSS!!!
2. frontend.css - all global formatting stuff and no hacks here! check for valid CSS!!!
(both files are compressed on the fly)

3. special.css - put in all hacks etc. or use the magic fallback of contitional comments for IE browser! but this is uncompressed.

Well, I hope that helps!

(Maybe you like to read that to: http://www.phpwcms.de/forum/viewtopic.php?p=85371#85371 )

Best wishes
marcus

PS: if you can't use this .htaccess feature, you can put the php/CSS code into a file called style.php and link it as stylesheet - works too - but I don't know if phpwcms will include it in template section (over the css choosing box), and I like this parsingCssAsPhp idea - it's more transparent.

[mickeyc]

I recently built a mod_perl output filter which runs inside Apache. It intercepts requests for .css files and compresses them on the fly. It doesn't mess with any cache headers. See here, https://secure.grepular.com/blog/index. ... n-the-fly/