Server Side Scripting in CSS Files

is it possible?

[mattglet]

i doubt this is even possible, but i figured i'd ask. maybe someone has an alternative.

i have a .css file with this included:

div.hdr { /* header */
background-color: #FC914B;
color: #ffffff;
font-size: 11px;
font-weight: bold;
padding: 6px;
font-family: Tahoma, Verdana, Sans-serif;
border-bottom: 1px dashed #ffffff;

}

i would like to make the colors dynamic
i.e.:
div.hdr { /* header */
background-color: #<%=whatever_i_want%>;
color: #<%=another_color%>;
font-size: 11px;
font-weight: bold;
padding: 6px;
font-family: Tahoma, Verdana, Sans-serif;
border-bottom: 1px dashed #ffffff;

}

i tried it out this way, but it didn't work (because css files don't process ASP). is there a work around?

-Matt

[DrDoc]

Well, you can't use SSI inside a CSS file. So, link to the ASP/PHP file, and make the script output your CSS ;)

Just make sure it outputs it with the correct mime type in the headers: text/css

Or, you can change your server settings, and make all CSS files parsed by the ASP/PHP engine.

[mattglet]

sorry doc, don't think i follow what you're saying...

-Matt

[jetboy_70]

In fact you can, and it rocks. :)

For PHP on an Apache server:

Add this line to your root .htaccess file:
AddType application/x-httpd-php .css
<!-- this tells the server to parse .css file for PHP commands -->

Add this line to *the top* of your .css file:
<?php Header ("Content-type: text/css");?>
<!-- this makes sure that the .css file looks like a regular .css file to anyone that asks. If you don't return a text/css header, Mozilla will refuse to include the file if the calling page has an XTML or strict HTML doctype -->

You can now jump into PHP mode anywhere in the .css file, use PHP logic (if, else etc.) and call PHP functions that return parameters to your CSS (which you can include into the CSS file in the usual manner).

I don't bother with having two .css files anymore (one for Nutscrape 4 and one for real browsers). I just use a simple PHP browser sniffer within a single .css file.

[mattglet]

well, i'm using ASP on an IIS box... anyone know the M$ version of what jetboy_70 said? :)

-Matt

[mattglet]

doc, you mean like this?

<link rel="stylesheet" href="style.asp" type="text/css">

-Matt

[DrDoc]

Yes, mattglet. That's what I meant.

[jetboy_70]

As long as you make sure style.asp returns a text/css header, that will work too. The only downside is that I've seen Google listing style sheets with an ASP extension!

[Nick_W]

This offers some neat possiblities with style switching, picture this:

[pre]
<?
switch($_COOKIE['style']) {
 case "high_contrast":
 $bg="black";
 $fg="white";
 break;
 case "silly":
 $bg="pink";
 $fg="red";
 break;
 default:
 $bg="white";
 $fg="black";
 break;
}
?>
body {
 background-color: <?=$bg;?>;
 color: <?=$fg;?>;
}
[/pre]

nick rushes off to test this....

Nick

[jetboy_70]

Nick_W - Trust me, it works :) Change colours with the seasons; have special styles for Halloween and Christmas etc. etc. It doesn't matter how big you make the style sheet; only the appropriate styles will make it to the browser - no page bloat. :)

[Hester]

I'm currently using PHP to generate a massive amount of divs in a file I'm working on. It also stores some of the details for each div in arrays. What I did though was simply output the CSS in the head of the document.

PHP is ideal for loops that can save you typing, and of course to add variables so the CSS can change easily.

I didn't know you could get Apache to parse external stylesheets for PHP though! Nice one jetboy!

Anyone know how to make it work on Windows IIS running PHP?

[jatar_k]

You can get apache to parse any extension for whatever you like, just a matter of configuring it to do so.

I've done this also, works well. Nice little trick for any CMS, gives you the ability to store the user's colour choices from the admin section in db and run a templated style sheet. I more often just get the admin bit to write the static style sheet when they save their settings though.

[Reflection]

change colours with the seasons; have special styles for Halloween and Christmas etc. etc. It doesn't matter how big you make the style sheet; only the appropriate styles will make it to the browser

You dont need any fancy server side scripting to do this. Just keep all your colors in a style sheet seperate from your layout style sheet and use an @import "colors.css"; inside your layout style sheet. Then for Halloween or Christmas just swap it with a different color scheme @import "xmas.css";. You can even keep your background images in your seperate css file and change those as well.

One question though, when using server side scripting in your css would the browser still cache the css file?

[SuzyUK]

mattglet

this should do it for IIS

<% Response.ContentType = "text/css" %>
<%
DIM fontColor
fontColor = "#000"
%>
body
{
color: <%= fontColor %>;
}

Suzy

[dcrombie]

The whole point of using external CSS files is that the browser can cache them and not have to load them for every page request. If you are using server-side scripting to generate the CSS file then it won't be cached and you might as well just generate the CSS in-line as part of your template.

[Nick_W]

Actually, you couldn't be more wrong. The keyword here is server-side. The scripting logic decides what the file that will be cached as normal will output to the client.

Same on any html page that uses server-side scripting to define it's content.

Nick

[dcrombie]

We did some testing on this, admittedly a few years ago, and found that the CSS file wasn't cached after being parsed by PHP. The reason was that there was no 'Last-Modified' date passed in the Header by the server.

It may be that more modern browsers behave differently, but if so, doesn't that make the idea of a CSS file that changes according to your Cookie or other settings less useful? The CSS would only update once the cached version expired.

You can't have it both ways.

;)

[mattglet]

i appreciate all the feedback, but i must admit: i could care less about caching the css in this case. i'm just trying to make the css dynamic, so in case i need to switch a color, i don't have to switch the color in 100 different files. (i have global variables that contain hex color codes, which then tell the css what color to display)

thanks again for the help.

-Matt

[lorax]

>> You can get apache to parse any extension for whatever you like, just a matter of configuring it to do so.

Now, I knew that I knew this but I didn't make the connection until I just read jetboy_70's suggestion. Talk about epiphany!

OMG that just swung open the door to a whole realm of possibilities!

[Nick_W]

This method caches perfectly
Okay, fully tested. Caches exactly the way you'd expect a normal css file to.

>>The CSS would only update once the cached version expired.

Nope, works fine.

Nick

[TGecho]

Caches exactly the way you'd expect a normal css file to.

Even if it didn't you could use php to send a last-modified date anyway.

[jetboy_70]

Nick_W, are you sure that this is a good thing?

dcrombie's comments are accurate; you can't have it both ways. If the CSS file is cached, then any server-side changes won't be picked up by the browser. If the file is somehow discouraged to cache (possibly using TGecho's suggestion) then one of the advantages of an external CSS file is negated.

Browser caching behaviour is a blind spot to me as I tend to set IE to check for new file versions on every visit to the page, but this is not its default behaviour. How big a problem is this, and how much control do we have over a browser's caching behaviour by using custom headers?

[Nick_W]

Check a site, change a few styles then hit reload. It changes right? - Same happens with this dynamic way of doing it. No problem.

Nick

[dcrombie]

In most new browsers, hitting reload seems to fetch the new CSS - but just browsing the site won't. You could get around this by adding a GET parameter to the CSS link whenever the user changes their preferences to fetch and cache the new version.

In some versions of IE, esp. on Mac, the CSS won't be reloaded even with reload. The workaround for this, for testing purposes, is to include the CSS file using: style.css?<?PHP echo time()?> or similar.

I think the best solution is to have a static CSS file, then include variable styles in-line. Or you could use JSSS (just kidding! ;)).

[Nick_W]

The php version works exactly the same as a static version. There is no difference whatsoever, at all, no, never.

Seriously, exactly the same - if some browsers don't recognixe a static css file is changed then they won't notice the dynamic one has either.

My point is, there is no difference in the two ways of doing it period.

Nick

[hakre]

just to add some facts for caching and the differences between php and css:

- cache is based on normal http connects, so the mime/type or file/type is not the point

- in it's default config, php adds a lot of headers telling the browser not to cache. that's because most php pages are dynamic and the output is based on a query. because of that a .css named php file might not be that much cached as a static one.

- to round this up, you can configure even the server to add these extra-headers telling the browser not to cache even static css files.

so i hope this will clear up the discussion a bit. so whatever your experiences are, checkout what your settings are, for example check the headers.

then you'll be able to have it that way you want: cacheable or always fresh.

- hakre

[MatthewHSE]

What PHP code would you use to get the alternating background colors?

[Enigma]

The whole point of CSS is that the styles are supposed to cascade. Therefore you could have two stylesheets identified as the same style, and one would could be cached while the other isn't...

<link rel="stylesheet" media="screen" href="/styles/globalstatic.css" title="default stylesheet" />
<link rel="stylesheet" media="screen" href="/styles/globaldynamic.css" title="default stylesheet" />

[Hester]

What PHP code would you use to get the alternating background colors?

Come on, it's easy. Whatever CSS you want to change, just replace the value with PHP instead.

Eg:

Before:

p {background-color:#fed;}

After:

$color = "fed";
p {background-color:#<?php echo $color;?>;}

So if $color is changed to "def" (or whatever you want) the background color is changed to that value.

You could also use PHP to change the tags styled - 'div' instead of 'p' for instance - or change the style used - 'border-color' instead of 'background-color' etc. The possibilities are endless!

[jarvster]

well, i'm using ASP on an IIS box... anyone know the M$ version of what jetboy_70 said? :)

You could either force IIS to parse CSS files for asp (not recommended personally, or you could do a 404 trap and output http 200OK and the text/css headers with your conditional valid css content.