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

[Nick_W]

Another useful use would be for print styles:

have a link to 'printer-friendly.php' which would set a cookie (for say 10/20secs) and redirect back to the refering page.

Your css file then does this:

[pre]
<?
if(isset($_COOKIE['printer'])) {
?>
/* print styles here, turn off logos, 
do in black and white or whatever */
<?
} else {
?>
/* regular styles */
<?
}
?>
[/pre]

Nick

[D3mon]

Just use ASP (or PHP) to construct the CSS in a <script> block at the top of the page (just before the </head> tag)

..or did somebody say that already... :)

[dcrombie]

CSS already caters for alternative 'print-friendly' styles using the "media" attribute:

<LINK rel="stylesheet" type="text/css" href="/style.css">
<LINK rel="stylesheet" type="text/css" href="/print.css" media="print">

[Nick_W]

Sure, not complete supported unfortunately though. I like to stay away from that kind of malarky for the time being..

Nick

[daisho]

You know I've been doing this for ages and I just never think of posting. Here is my CSS file (well just the important stuff. I didn't like the browser workarounds for CSS and I didn't want to change the CSS include in the HTML file depending on what I detected as the browser as that would seriously hurt proxy caching.

Now I put the logic in the CSS file. Not only that I cache the different "views" (or atleast the MD5 of the view at this point) so that if a browser re-requests the css again I can send a 304 not modified if it sends a proper "If-Modified-Since" or "ETag" (ETags are way cooler than If-Modified-Since).

Now each browser gets the correct version of CSS and will cache it. And my HTML pages need not do any broswer detection (which is heavy on the CPU and really hurts any type of caching possibilities).

Let me know if there are any improvments. Always happy to squeeze a little extra juice out :)

Below is CSS/PHP file (missing lots of boring CSS):

<?
DEFINE( "__ENABLE_HTTP_304__", TRUE );
ob_start();

$browser=get_browser();
if( "Mozilla"==$browser->browser ) {
$css_ver="Mozilla";
$right_link_padding="1px 0px 3px 3px";
$borders=TRUE;
$position=TRUE;
} else if( "Netscape"==$browser->browser ) {
$css_ver="Netscape";
$right_link_padding="3px 0px 3px 3px";
$borders=FALSE;
$position=FALSE;
} else {
$css_ver="Default";
$right_link_padding="3px 0px 3px 3px";
$borders=TRUE;
$position=TRUE;
}

$toolbox_div_height=16;
?>
/* <?=$ccs_ver?> */

BODY {
top:0px;
left:0px;
margin:0px;
padding:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background: #FFFFFF;
background-color: #FFFFFF;
font-weight: normal;
font-variant: normal;
text-transform: none;
<? if( $position ) print "position:absolute;";?>
}
/* Lots more css here... */
<?
$buf=ob_get_contents();
ob_end_clean();

@clearstatcache();

$cache_time=filemtime($_SERVER['DOCUMENT_ROOT']."/"."css.php");
$requested_time=strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);

$cache_etag="\"".md5($buf)."\"";
$requested_etag=$_SERVER['HTTP_IF_NONE_MATCH'];
/* Output all the headers and our generated CSS */
Header( "Last-Modified: " . gmdate("D, d M Y H:i:s",$cache_time) . " GMT");
Header( "ETag: $cache_etag" );
Header( "Connection: close" );
Header( "Content-Type: text/css" );

if( __ENABLE_HTTP_304__
&& ($cache_time==$requested_time ¦¦ $cache_etag==$requested_etag ) ) {
Header("{$_SERVER['SERVER_PROTOCOL']} 304 Not Modified");
} else {
Header( "Content-Length: ".strlen($buf) );
print $buf;
}
?>

[chadmg]

Alright, I'm a little confused. Why would asp/php css files be cached? Is there a check to see if the css file spit out by the server is the same as what's cached? Because the css file could be different on every request. I assumed that asp pages are never cached. That the resulting html is cached, but not for future visits. Can you show us how you performed your proof nick?

Every file you download is cached in the sense that it is stored on each visit for that visit. But I've always assumed server-side pages, because they are/can be different on every request, would request new pages on every visit. Does anyone know of any literature that says differently?

[daisho]

Serverside pages *can* be different on every request but that doesn't mean they *will* be different. It all depends on what you are doing.

In my dynamic css case it is not different. I did it simply in order to merge Netscape and IE style sheets into 1 file. It's fairly static in that you will get the same style sheet every time in IE until I update it and the same goes for the Netscape version. Once you start dealing with a very large CSS file it gets to be a pain to maintain multiple versions. In my case only a few key things change since Mozilla/Netscape and IE can't seem to agree on how wide a pixel is.

From there I went a little crazy and made my file cache friendly. Browsers if they have a version of the page in their local cache will add a couple extra headers (ETag and If-Modified-Since) to their request. I simply detect them and if they match what I have (My CSS file hasn't been updated) I simply tell the browser that the file is "304 Not Modified). And only send back the headers (Small) and don't send back any CSS (Big). The browser uses the local cached version as if it just downloaded it again.

Saves me on bandwidth and makes my site look that much more peppy(ier) than my compitition that has you download a 4k+ CSS file on every page view...

daisho.

[MatthewHSE]

Come on, it's easy.

Not to one who won't even be starting to learn PHP until after the first of the year! :-)

Seriously, thanks for the advice. I'm really going to be studying PHP within the next couple of months, as soon as my schedule permits. In the meantime, Hester, I think your post gives me enough information to go on!

Thanks!

Matthew

[jetboy_70]

Now we're on the front page ... ;)

If you've been playing with this you might have realised that you can't access $_POST and $_GET globals (form elements and URL parameters) in your external CSS file, as they're only available in your main PHP file. This limits the possibilities for dynamically changing the CSS file from the web page.

To get round this, call you CSS file with parameters!

<link rel="stylesheet" href="mystyle.css?myvalue="<?php echo $_POST['myvalue'];?>" type="text/css" />

This will pass 'myvalue' to a CSS file attached to any PHP page which would normally have access to this element in the $_POST array.

[kapow]

AWESOME!

Thank you everyone.
Another reason why WebmasterWorld is my default page :)