Automatic CSS3 Prefixer and Compressor

There are many ways to compress CSS files or automatically generate browser-specific CSS3 prefixes, but usually extra tools are used which is very annoying. I’d like to show you how such tasks can be done using only PHP. In this article we’ll see how to:

• Generate CSS3 properties with browser-specific prefixes so that we don’t have them all by hand
• Concatenate all the CSS files and strip out comments and unnecessary white space to reduce the number of server requests and decrease the page’s load time
• Perform the process on-the-fly when the web page is requested

Here’s an example that shows just how easy the end result will be to use. In the CSS, the browser specific prefix is replaced with an underscore like this:

_border-radius: 10px;

The code will generate a complete list of properties like this:

-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Then, in the HTML, a link is written like this to import the styles:

<link rel="stylesheet" href="css/css.php?f=css_file1|css_file2|css_file3">

With the single link element, three CSS files will be loaded as one. The css.php script will read in the files that are listed (css_file1.css, css_file2.css, and css_file3.css), combine them, and return them as a single file. It looks pretty easy to use, right? So with out further ado, let’s start writing some code!

Writing the Code

Go ahead and create the file css.php with the following code:

<?php
$files = explode("|", $_GET["f"]);

$contents = "";
foreach ($files as $file) {
    $contents .= file_get_contents($file . ".css");
}

preg_match_all('/_[a-zA-Z-]+:s.+;|[a-zA-Z-]+:s_[a-zA-Z].+;/',
    $contents, $matches, PREG_PATTERN_ORDER);

$prefixes = array("-o-", "-moz-", "-webkit-", "");
foreach ($matches[0] as $property) {
    $result = "";
    foreach ($prefixes as $prefix) {
        $result .= str_replace("_", $prefix, $property);
    }
    $contents = str_replace($property, $result, $contents);
}

$contents = preg_replace('/(/*).*?(*/)/s', '', $contents);
$contents = preg_replace(array('/s+([^w'"]+)s+/', '/([^w'"])s+/'), '\1', $contents);

header("Content-Type: text/css");
header("Expires: " . gmdate('D, d M Y H:i:s GMT', time() + 3600));
echo $contents;

The code first receives the list of CSS files to be processed as a string from the URL parameter (accessible in PHP as $_GET["f"]). Each file is separated with a pipe-character. The explode() function splits the string on the pipes returning an array of filenames. The function file_get_contents() gets the contents of each file which is appended, one by one, to the variable $contents. After the contents of the CSS files has been retrieved, the next step is to find any CSS properties that start with an underscore and replace them with the browser-specific prefixed properties. The function preg_match_all() finds all the parts in the text that match the regular expression and places the matches into $matches[0] as an array. I won’t explain why $matches has the array index 0 because you can read a clear explanation about the function in the PHP Manual. Rather I’d like to focus on explaining the flow of our program. This image explains the pattern of the regular expression:

The array $prefixes contains an array of browser-specific prefixes; you can add more prefixes, or even remove some, depending on your needs. Each property definition in $matches[0] will be transformed into a set of CSS3 properties with browser-specific prefixes. The code iterates each property and creates a result buffer, replaces the underscore in the property with the browser-specific prefix and pushes the result in the the buffer, and then replaces the original property in in the text with the contents of the buffer. After expanding the browser-specific prefixes is done and they have been merged back into $contents, the script strips out any comments in the content to reduce its size. This image explains the relevant regular expression:

Then another regular expression removes any unnecessary whitespace and new lines to further reduce the size of the content.

Parts that match with regular expression will be replaced by characters inside the bracket, for example:

Finally the CSS stored in $contents is ready to be sent. The first header() call informs the browser that the output should be treated as a CSS file. The second header() call tells the browser that this file expires in one hour, so the browser will cache it for an hour and use the cached copy instead of requesting it again from the server.

Using the Script

I’d like to give you a simple usage example for script that we’ve just made. Put the css.php into your css directory, along with these three CSS files. The first file is header.css:

#header {
  width: 800px;
  height: 100px;
  padding: 20px;

  _border-radius: 10px;
  _box-shadow: 0px 0px 10px #000000;
  background: _linear-gradient(#D30000, #3D0000);
}

The second file is center.css:

#center {
  width: 800px;
  height: 400px;
  padding: 20px;
  margin: 20px 0px;

  _border-radius: 10px;
  _box-shadow: 0px 0px 10px #000000;
  background: _linear-gradient(#8ED300, #213D00);
}

The third file is footer.css:

#footer {
  width: 800px;
  height: 100px;
  padding: 20px;

  _border-radius: 10px;
  _box-shadow: 0px 0px 10px #000000;
  background: _linear-gradient(#006ED3, #00203D);
}

Look at how the CSS3 properties have been written; the ones that would have a browser-specific prefix are given only once and have an underscore in front of them. Next, create the file index.html that will use the styles.

<!doctype html>  
<html lang="en">  
 <head>  
  <meta charset="utf-8">  
  <title>example</title>  
  <link rel="stylesheet" href="css/css.php?f=header|center|footer">
 </head>  
 <body>
  <div id="header">header</div>
  <div id="center">center</div>
  <div id="footer">footer</div>
 </body>
</html>

Look at the href attribute in the link tag. Every CSS filename is separated by a pipe.

Conclusion

In this article I showed you how to automate some common manipulations of CSS using PHP. The script relies heavily on regular expressions, a very powerful language that allows us to manipulate string however we see fit. Overall, the script is very simple but it offers many benefits. Try using it in your next project. Image via 1xpert / Shutterstock

Frequently Asked Questions about CSS3 Prefixer and Compressor