Maintainable CSS3 Preprocessor and Generator for PHP

If you are looking for a complete CSS merging and minification tool, check Builder.CSS, otherwise, keep reading this post 🙂

Here is a small script written in PHP for rendering of vendor-specific CSS3 properties on the fly, by defining them just once using the official W3C syntax. The css3 function generates not only vendor-specific properties, such as -moz-user-select, but also vendor-specific property values like the various CSS3 functions such as calc(), element(), linear- and radial-gradient(). You can download it from this link.

Below is an example for defining a vendor-specific property:

[sourcecode language=”css”]
div
{
<? css3(‘transition’, ‘opacity 200ms linear’); ?>
}
[/sourcecode]

… Which will output:

[sourcecode language=”css”]
div
{
-moz-transition: opacity 200ms linear;
-webkit-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
[/sourcecode]

And here’s an example for defining the CSS3 function element():

[sourcecode language=”css”]
div
{
<? css3(‘background’, ‘element(#background-div)’); ?>
}
[/sourcecode]

… Which will give you:

[sourcecode language=”css”]
div
{
background: -moz-element(#background-div);
background: -webkit-element(#background-div);
background: -o-element(#background-div);
background: -ms-element(#background-div);
background: element(#background-div);
}
[/sourcecode]

* As of January 2012, the element() function is supported only by Mozilla FireFox, so you may consider using normal CSS to define that function.

All Features:

• Detects and renders both vendor-specific properties and vendor-specific values, such as CSS3 functions;
• Combines multiple CSS files into one;
• If GZIP is available, the output stylesheet is gzipped and its size is much smaller than the size of all CSS files;
• Supports multiple CSS3 property values, such as:

  [sourcecode language=”css”]
  div
  {
  <? css3(‘background’, ‘url("background.png") no-repeat center, linear-gradient(#ccc, #333)’); ?>
  }
  [/sourcecode]

Requirements:

• Web-server with PHP support;

Usage:

1. Register the script the way you normally register style sheets on the page:

   [sourcecode language=”css”]
   <link rel="stylesheet" href="css3.php?files=" />
   [/sourcecode]

2. In the files parameter, define the path to all of the stylesheets that you want to merge:

   [sourcecode language=”css”]
   <link rel="stylesheet" href="css3.php?files=Styles/styles-01.css,Styles/styles-02.css" />
   [/sourcecode]

   The order in which you define them is going to be their inclusion order in the final PHP-processed file. Make sure that URLs, pointing to external assets such as background images and fonts are set relatively to the css3.php file, otherwise, they will not be requested correctly.

3. In each of the CSS files, use the css3($property, $value) function to define CSS3 properties:

   [sourcecode language=”css”]
   div
   {
   <? css3(‘background’, ‘element(#background-div)’); ?>
   }
   [/sourcecode]

4. If you wish to exclude some specific vendor properties, you can just remove them from the $prefixes array in the css3.php file:

   [sourcecode language=”php”]
   $prefixes = array(‘-moz-‘, ‘-webkit-‘, ‘-o-‘, ‘-ms-‘);
   [/sourcecode]

   The script can be easily changed to allow passing of prefixes as a function argument, if you wish to define the properties per function usage. Even better – the third argument can be an exclusion array, which will be checked against the vendor-specific array in the script itself (in_array()). Basically, you can change the function to this:

   [sourcecode language=”css”]
   div
   {
   <? css3(‘background’, ‘element(#background-div)’, array(‘-moz-‘, ‘-webkit-‘)); ?>
   }
   [/sourcecode]

5. Is is recommended to extend the script so it checks for already existing processed file on the server, instead of processing and merging it each time the page is requested. If the file does not exist, then the result of the PHP processing can be output to a static file that will be served.

The script can be downloaded from here. Other cool HTML5, CSS3 and JavaScript experiments can be found on this page.