Using PHP to enhance CSS

With a bit of PHP you can add an additional layer of logic to your CSS. You might choose to add seasonality to your site or change the layout entirely. You are limited only by your imagination.

An example

Let's say a client has asked for a different background color for a website at weekends. The idea is that from Monday to Friday a grey background is shown and then at weekends an orange background is shown.

The simple way

The simple way is use a bit of PHP to serve a weekday CSS file or a weekend PHP file if it is the weekend. In the CSS files you simple specify a different background colour.

$day = date('D'); // Find out what day of the week it is

// Set which days are the weekend
$weekend = array("Sat", "Sun");

// Check if it is the weekend
if (in_array($day, $weekend) == true) {
    // Yes it is the weekend
    echo "<style type=\"text\css\" media=\"screen\">@import \"/css/weekend_screen.css\";</style>";    
}
else {
    // No it is the week
    echo "<style type=\"text/css\" media=\"screen\">@import \"/css/screen.css\";</style>";
}

The complicated way

A more complicated but sophisticated way is to tell the server to interpret CSS files as PHP. This opens up a whole world of possibilities. In order to do this you need to add the following lines to your .htaccess file. If you don't know what an .htaccess file is you can find out about it here. Add this to your .htaccess file:

<IfModule mod_mime.c> 
AddType application/x-httpd-php .css 
</IfModule>

CSS files

To make sure that browsers recognise CSS files as CSS make sure you add the following line to the top of your CSS files.

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

That's all there is to it. You are now free to use PHP in your CSS. If you know the power of CSS you will know what you can do. If not I suggest you have a look at CSS Zen Garden to see how you can change the appearance of a site with just CSS. Along with PHP you have even more possiblities.

Some ideas

Using PHP with CSS is really limited to your imagination but here are some examples that I can see working well.

Weekend designs

As above you can change the appearance of your site depending on the day of the week. You get the day using PHP and set CSS rules accordingly.

Seasonality

You could change the appearance of your site depending on the time of the year. You get the month using PHP and set CSS rules accordingly.

Style Switchers

You can allow users to change the appearance of your site. The user sets a cookie with a choice and a CSS file or rules are served accordingly.

Respond to different browsers

Recognising which browser is being used and respond accordingly. PHP can discover which browser is being used.

I'm going to play around with this a little so if I come across anything good I'll post it. If you have any experience of using this method please leave a comment below.

Comments

ShaunM Apr 2 2007

This is a very nice tutorial.. Nice and easy to understand.. Opens up some good ideas.. Thanks.

billy sulistyo Apr 11 2007

bagus

Keith Donegan Apr 15 2007

Very Good Tutorial, thanks. @ ShaunM, yes I have a few ideas to use for this technique also

peacy Apr 27 2007

Why not just use Apache’s rewrite-engine to do the job instead of using php ?

E.g.:
RewriteEngine on
RewriteCond %{TIME_HOUR}%{TIME_MIN} >0700
RewriteCond %{TIME_HOUR}%{TIME_MIN} <1900
RewriteRule ^style\.css$ style\.day\.css
RewriteRule ^style\.css$ style\.night\.css

Use can use the following apache envirement variables to set up conditionals:
TIME_YEAR
TIME_MON
TIME_DAY
TIME_HOUR
TIME_MIN
TIME_SEC
TIME_WDAY
TIME

LuckyShamrock Apr 27 2007

hmmm… just what i need. but i wanted to do it with javascript. well, then i have to acquire some good PHP user guides 8-)) to find out more tricks and hints.

Eds Aug 31 2007