Office-it.orG

When you develop a website you know that you will always have to keep a balance between design and productivity. You need good working pages, easy layout, easy navigation, impressive design etc.

I’m not going to talk about every aspect today but I will share with you some of the tools I like to use when it comes to CSS, bandwith and a faster loading. More exactly, how to compress a CSS code without making the code to look so ugly and unreadable. If your design is based on a lightweight css code than I guess you shouldn’t worry about this but if you like to impress your visitors with visual elements, you can’t get it done without a big css file.

There are many CSS compression tools to find on the Internet at this moment like CSSTidy which takes your input (it must be a valid CSS code otherwise the result might fail to impress) and removes blank lines, comments etc. It has many options to work with.

Ok … so what is the point. The point is one that I’ve experienced a lot lately. I often decided to “parse and optimize” my CSS code using this tools but I changed my mind short after. Why? Because I do like to update my CSS’s, to add things, delete things and so on and, after using a tool like CSSTidy, my code was so hard to follow. I had only 1 line and I couldn’t find anything without using the CTRL + F magic trick. You lose time, development time.

I’m going to share with you something else. Found here. This is a small trick to keep our code intact but to compress it the same time. You need to add some PHP lines right at the very top of your css file and another line at the bottom of it. The user’s browser will request the stylesheet like usual but the server will first read the lines that are at the top and compress it following our PHP code. The stylesheet will be compressed and outputted to the user’s browser.

This is an awesome tool if you ask me. I’m sure it will be a dream come true to many designers and web developers.

Here’s the code to put at the very start of your css file:

< ?php
  header('Content-type: text/css');
  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;
  }
?>

Next, add this code to the very bottom of your CSS stylesheet:

< ?php ob_end_flush();?>

From the author’s website:

“The first line let’s the browser know that this is a CSS stylesheet. Next, it starts the overflow buffer collection for later processing with the “compress” function. The compress function is used to remove all comments and spacing. Finally, the compressed CSS is sent to the browser.”

“Basically, this tells PHP to stop collecting output, and to run the previously specified “compress” function. After that, the compressed CSS stylesheet is sent to the browser. You can download the PHP CSS Compressor Template file with the required PHP code included to get started quick.”

“If you want to reference the file using a file name such as “screen.css” and have the PHP code parsed, you could use SetHandler in your .htaccess file like this:”

  SetHandler  application/x-httpd-php

Popularity: 8% [?]