Digital Web Magazine

The web professional's online magazine of choice.

Generating Dynamic CSS with PHP : Comments

By Douglas Clifton

April 28, 2005

Comments

Chad Saunders

April 28, 2005 8:11 PM

I’ve always thought about trying to do a style-switcher using PHP but never got around to it. I’m also familiar with the JavaScript style-switcher and I prefer your version over JavaScript simply because I use PHP more often than JavaScript. You also have a good point about users being able to turn of JavaScript. But then again, users also have the option of turning off cookies too.

All-in-all, thank you. I will surely be implementing this into my site.

Kevin Klein

April 28, 2005 9:21 PM

Great read, Douglas. Clear, concise and very helpful. In tearing apart (read:breaking) various PHP CMS systems over the last year or so, I’ve considered taking the leap to dynamic CSS to add another technique to my knowledge base. This gives me a nice launching pad.

Douglas Clifton

April 28, 2005 9:35 PM

Thanks for your comment Chad.

Part of the reason the Web has been so successful is that the underlying protocol (HTTP) is very simple, and thus fast. But there are trade-offs. One being that it is a stateless protocol, meaning that after a user fetches a resource and moves on there is no inherent “memory” of the event. Cookies are a simple mechanism designed by Netscape to alleviate this shortcoming. But since so many people have abused them you, have the problem of mistrust. In a similar way, this is true for Javascript as well (pop-up ads and the like).

Douglas Clifton

April 28, 2005 9:41 PM

Kevin,

Unfortunately, CMSs have a long way to go. I’m lucky in that, from my own experience, I don’t have to rely one one and can roll my own solutions. You might want to check out the PHP Labs series on my personal site for more ideas.

Thanks for your positive feedback!

Luke Shingles

April 28, 2005 9:51 PM

I’ve said it before that CSS should let you define your own colour names. Using PHP (or another server-side scripting language) has some drawbacks though like increased server load and caching problems.

I think a better way to do it would be to keep your layout CSS in one file and store your different colour schemes as separate CSS files. You can then use PHP to dynamically link one of the colour schemes in your HTML.

Douglas Clifton

April 28, 2005 10:18 PM

Luke,

Yes, these are valid points. However, the complexity has to go somewhere, if you follow me. By making CSS itself dynamic you would have to rely on the browser manufactures to implement this and, well, I’m not going to go there.

Unless the server-side script used to deliver the CSS is extremely complex, the difference between a PHP and a static version is negligible.

As far as the caching issue, I knew this would come up but I didn’t want to get into it in the article. Try sending the following headers along with the Content-type:

header(‘Cache-control: must-revalidate’);
header(‘Expires: ‘ . gmdate(‘D, d M Y H:i:s’, time() + 3600) . ‘ GMT’);

This will instruct the browser to cache the results of the CSS for an hour, which should be plenty for most sessions.

If you are sending very large amounts of CSS, you can also compress the contents on the fly by opening your script with:

ob_start(‘ob_gzhandler’);

This will save on bandwidth and decrease the time it takes to deliver the CSS. But be warned that this technique has been known to cause problems with very old (4.x) versions of Netscape browsers.

Lar

April 29, 2005 1:26 AM

Hi,

I did a ‘persistant’ style sheet switcher using PHP and cookies.

If anyone wants to read it, the article is on SitePoint (http://www.sitepoint.com/article/css-simple-style-switcher)

Chris Heilmann

April 29, 2005 3:20 AM

Interesting coincidence. I wrote quite a similar article to be published soon on the topic of CSS constants and PHP.

The difference is that I considered it a good idea to parse a CSS via PHP, as that makes it easier to avoid mistakes for the non-PHP-savvy.

Ryan Cannon

April 29, 2005 5:44 AM

This is one of those slippery-slope areas. It’s good for simple things like re-using color names, but you have to be careful: one of the major benefits of CSS is to benefit from the browser caching your style information and applying it throughout your site. Expecting or asking a browser to reload your stylesheet on every page is just as bad for slow connections as having bloated <table> code.

Patrick Fitzgerald

April 29, 2005 7:36 AM

Nice article! Last year I took a similar approach, and also wrote some PHP functions for generating color palettes and automatically adjusting the contrast so your color combinations comply with visibility guidelines recommended by the W3C. You can read the article CSS Colors on my website.

Nathan Olds

April 29, 2005 8:16 AM

I liked the article. One major drawback in the example is that you have to edit the php file when you want to change the style. Being truly dynamic would not be dependent on a few css layouts to choose from but rather allow customization for each visitor. To this, I would like to store this information somewhere other than PHP.

So, why not XML? If you create a basic CSS file to always link to, then use this php technique and XSL to transform a XML storing visitors preferences in colors, fonts, font styles, and

Douglas Clifton

April 29, 2005 10:36 AM

Ryan,

Have a look further up the comments on techniques for caching and compressing the dynamic CSS.

Hi Patrick,

Oh, I remember your piece on PHP and color palettes, studied it carefully. I still have your site bookmarked actually. Have you added any new material lately? Shoot me an email if you’d like.

Nathan,

That’s true, but then you have to edit static CSS files too. I actually spend lots of time editing lots of things. ;-) Of course the data such as colors, fonts and even layouts could be stored outside of the script, in a DB for instance. The article is meant to present a simple example of a technique, if there’s enough interest I could certainly expand on it. I’ve also used PHP (or Perl or whatever) to generate dynamic JS, or a combo of JS and CSS, even other PHP. Whoa! Why on earth would you want to use PHP to generate other PHP?

Browser support for XSLT is way behind even that of CSS at 2.1 (or 3). If you were going to use a tool like that then you wouldn’t really need PHP. The XML-based languages are very powerful, I wish I could use XSLT, XQuery, XPointer, X-cetera (sorry, bad joke) and rely on support for them on the client side. This really is my whole point about using PHP, because it works now. It fills in the gaps as it were. (hint: look at counters in CSS).

Thanks for your comments folks!

Austin Govella

April 29, 2005 2:51 PM

Is there a reason you wouldn’t have PHP parse *.css files so you could continue to maintain separate CSS and HTML files?

Lea

April 29, 2005 5:56 PM

The caching issues are the largest concern for me – this doesn’t allow visitors to have faster load time on subsequent pages.
My method of getting around this is to parse the css with php on my development server, but to take a static copy for the live server. This gives me the benefit of smoother development (change a value in one place…) without the disadvantage of visitors not being able to cache the file.
This makes the going-live process a little tedious and I’ll probably automate that at some point, but I am happy with the process so far.

Douglas Clifton

April 29, 2005 8:02 PM

header(‘Cache-control: must-revalidate’);
header(‘Expires: ‘ . gmdate(‘D, d M Y H:i:s’, time() + 3600) . ‘ GMT’);

Again, this will instruct the browser to hold the results of the dynamic CSS in its disk cache for one hour. If you want to extend that to a (much) larger time frame (say the script isn’t modified often) then do some simple math:

time() + # of seconds: 60 * 60 * 24 = 24 hours

You can also send a compressed version in the first place if the CSS is large. Open your script with:

ob_start(‘ob_gzhandler’);

There are many, many other ways to improve the performance of your PHP scripts, no matter what they are producing. A good place to read up on various techniques is this presentation by Ilia Alshanetsky.

Becky Peters

May 2, 2005 7:33 AM

Interesting… like the one I wrote up in December. Simple Dynamic CSS.

emmanuel

May 3, 2005 1:55 AM

We have developed our own CMS platform, and I am happy to see that we have got a big edge here: we provide with a CSS generator for all the content, which makes the design 100% flexible.

Emmanuel
Jazar, Content Maximised Solution

And for all the Dynamic functionalities (such as forums, newsletters, etc … we use xsl files (parsed with sablotron).

linnea

June 5, 2005 12:16 AM

interesting! we’re developing something similar using mason. we don’t do php, but nice to see that others have the same idea of where css should go!

Vitaly Friedman

July 7, 2005 12:29 AM

Douglas, thanks for an interesting article. Some weeks ago I’ve been thinking about using “dynamic” css – I guess now, as I’ve read your article, it’s time to transform my ideas into practice. ;)

Douglas Clifton

July 7, 2005 10:21 AM

Hi Vitaly,

I thought this discussion was pretty much wrapped up, until I just this minute noticed your post. Good luck with your own dynamic CSS! ~d

Paul Christopher

September 1, 2005 10:56 PM

Thanks for the article. Well written, very informative and it has set me on a new path.

Douglas Clifton

October 20, 2005 12:22 AM

Thanks Paul.

Sorry, comments are closed.

Media Temple

via Ad Packs