Dynamic CSS files

I had always wished CSS files weren’t so static so you could do different things at runtime. It turns out you can do it, but exercise common sense. The exact plan you take depends on how often the CSS “variables” change value. If it’s not too often you might want to “precompile” the style files into static and just use them the old style way.

Here is how you can use PHP to do ‘on-the-fly’ CSS files.

  1. Instead of including a static css file include a file with the php suffix as below:
    <link rel='stylesheet' type='text/css' href='css/style.php' />
    
  2. Make sure your style.php file returns the appropriate headers for a text/css mime type as below:
        header("Content-type: text/css; charset: UTF-8");
    
  3. Now set up variables in your style.php very much like you would for a view template:
     $mainUrl = "http://dorkage.net";
     $mainHeaderColor = "#FE0EDE";
    
  4. Refer to your variables using echo
    #header {
       background: url("<?php echo $mainUrl; ?>/images/header-bg.png") no-repeat;
    }
    a {
      color: <?php echo $mainHeaderColor; ?>;
    }
    

CSS Tricks.com reported a different way to do this: This match rule in htaccess matches any file with style in it’s name and gets parsed as PHP thusly:

<FilesMatch "^.*?style.*?$">
SetHandler php5-script
</FilesMatch>

They speculate that you wouldn’t be able to take advantage of the automatic cacheing that is normally provided for style files. However, you could precompile your style.php by running it through CLI php each time you update the “variables” thusly:

php style.php > style.css

and just include the resulting css file the normal way

26 comments to Dynamic CSS files

  • Ami

    Wow. Great stuff
    i am just getting to grips with basic CSS and then this pops up

    Thanks

  • I want to integrate a color picker like the one for Drupal on my site so that customers can choose their color themes for table headers, links etc..Do you know where I can get a script like that? i am waiting for your positive reply man thanks keep posting.

  • Those scripts come from javascript frameworks such as jQuery and dojo toolkit, mate. JQuery seems to be the one that got it right for humans, though I believe that dojo may be just a tad more powerful but just a little harder to use. JQuery UI is very easy to use, you just include the script and then have a little bit of boilerplate to attach it to some DOM object and you will be amazed. It is free OS.

  • Im just learning PHP and CSS for my blog. This makes my head hurt just looking at it. 🙂
    Good post.

  • Thanks for this good idea. I know CSS little bit but i want to know what would be the easiest way to create a dynamic css file to link to eg

  • It’s nice to know that CSS can be generated dynamically using PHP. A novel technique. Could you also point to some resources (code examples) that use this idea? thanks.

  • I am stuck at the 4th step. Can you help?

  • I have not used this tips for dynamic CSS files. I will try it. Thanks for sharing this informative post.

  • Do Dynamic CSS files good for SEO?

  • I only stick to basic CSS. No need to use fancy codes.

    -Kai

  • Very creative idea! Thank you for sharing….I must try it on my blog.

  • This is hot dorkage, but not logged in as such. Dynamic CSS would have no effect on SEO one way or another, because they are rendered by the server before the page ever gets seen by a search engine. The search engine would not know or care whether they might have been rendered dynamically or not.

    And, service desk, perhaps you are stuck at the fourth step because you do not have any serverside processing going on. You can’t do this technique unless you have some kind of back end on your website. If you post up the code you have that is failing I would better able to help you.

  • I’ve been try to get this code to work on an external style sheet, but everything I’ve tried doesn’t work, does anyone have any ideas?The only way I can get to work is if I put it on the page, but theirs a lot of pages and I only want it to come off an external CSS.

  • admin

    If it works on an inline style sheet but not an external one, you might not have the directory the external style sheets live in configured to render php. I could be more help if you’d show error logs, or view source. Are you localhosting or is it actually on the web?

  • Does this cause any kind of performance hit on the site? Would it be easier to put some php logic in to swap out the style sheet based on the site or something else of that nature?

  • admin

    That question answered in the post. It might cause a hit if it renders every page request, because normally css files are cached automatically and php files aren’t by default. However this could be mitigated by explicit caching, or as suggested, running the renders offline if the variables don’t change often.

  • Interesting. I hadn’t really put too much thought to a dynamic style sheet, instead assuming that it would have to be done on the actual page on an object by object basis. IE adding a dynamic “style=” section to each element, which I actually do on a few pages.

  • Great tutorials helped me do a few more techniques that i previously did not know!

  • PHP is an embedded technology, meaning you can combine the logical/programming code with normal HTML or XHTML markup. In a more general sense, the output can be any text you like—in this case, it’s CSS.

  • Very creative idea. Just wanted to add, that with this hack, you generate custom css for each browser, also for iPhone.

  • Wow. That’s Great post. It’s great to know that CSS can be generated dynamically using PHP.I will definately try to learn it.

  • Really an interesting post. CSS is very much useful for the seo.

  • visitors really like dynamic CSS. We use it on our websites too!

  • I need help, I don’t know how to trackback your article on my blog Colonie de vacances !
    I don’t know how works WordPress trackbacks, I’m using joomla

  • This was really an interesting subject, I am very fortunate to be able to come to your weblog and I will bookmark this page in order that I could come back one other time.

  • Man I love your article and it is so good and I am definetly going to save it. One thing to say the Indepth analysis this article has is greatly remarkable.No one goes that extra mile these days? Bravo 🙂 Just another suggestion you canget a Translator for your Worldwide Audience …

A sample text widget

Etiam pulvinar consectetur dolor sed malesuada. Ut convallis euismod dolor nec pretium. Nunc ut tristique massa.

Nam sodales mi vitae dolor ullamcorper et vulputate enim accumsan. Morbi orci magna, tincidunt vitae molestie nec, molestie at mi. Nulla nulla lorem, suscipit in posuere in, interdum non magna.