Generating dynamic CSS using PHP

Posted on by KrooKedUK

This will be the core technique powering Responsify.it. The CSS styles have to be generated on the fly according to the options selected, this means I have no other choice than to involve PHP or Javascript. It was an easy decision to rule out Javascript, simply because it would result in either messy markup or CSS.

Thankfully PHP will allow me to keep the markup and CSS files free from any unnecessary code, thanks to it doing its thing on the server and spitting back a nice clean CSS file as the output, unless I do something wrong.

Let the server know what we are doing

The server is sitting there doing things exactly as it should, but we are about to change things up a little and tell it to do some things it normally wouldn’t, exciting! We are utilising the all powerful .htaccess file and pasting in the following code:

  <FilesMatch "\.css$">
  SetHandler application/x-httpd-php
  </FilesMatch>

This tells the server the it’s alright to have PHP in our CSS files, it basically treats them as PHP files. In any of our CSS files we now need to include the following line of PHP:

<?php
   header("Content-type: text/css");
?>

This tells the PHP to output the contents as CSS. That’s the setup finished, now it’s time to experiment.

So what’s possible?

Let’s have a look at something basic.

<?php
   header("Content-type: text/css");
   $block-width = 25;
   $block-margin = 5;
?>

As you can see above we can declare variables as normal. You can output these values as you would expect, shown here:

#block {
    width: <?php echo $block-width;?>%;
    margin: <?php echo $block-margin;?>%;
}

Below is what the CSS will look like when it’s sent to the browser. No-one will ever know that you are writing dynamic CSS using PHP.

#block {
    width: 25%;
    margin: 5%;
}

This is a very basic example, but what you can normally do with PHP you can do here, just treat it like writing a normal PHP file, because essentially that’s what it is. I am looking forward to experimenting more with this technique as it really has no limits.

References

  • SteveST, Serving Dynamic CSS with PHP, Steve ST’s Blog [Steve ST's Blog | The Most Stevest Blog on the Web]. Available at: http://stevest.com/2011/serving-dynamic-css-with-php/
  • This entry was posted in Design. Bookmark the permalink.
    • Luis Carrizo

      Thanks for this usefull trick!! I´ve got a problem, because PHP recognize the # character as the begining of a comment, so the rest of the line is discarded… any suggestion?

      • Guest007

        A year late but worth noting for anyone else reading. The CSS has to be outside. So you add this line and the css would go afer the ?>.

    • Arpit Singh

      i have a css file..in that css file..i want to add some properties like background color,text color,header color from database..i’ve converted dat css file into .php but still its not fetching dat css.php file..but in that css.php file..color is fetched dynamically..any further suggestions..and do tell how to include dat css file in main header