Dynamic CSS and Javascript

Question

How does one create Dynamic CSS and JavaScript On-The-Fly (using PHP). This needs to be done as different pages have different set of elements sometimes, so wrapping and sending a large CSS/JS everytime would be overkill. And why do many sites have link tags like this:

<link rel='stylesheet' type='text/css' href='css/style.css?pg_id=43&post=62'>

How does the CSS come to know the GET parameters?

Since this might involve URL rewriting or using the header function, please supply short examples

Answer 1

A request to a .css or .js file can be redirected to a PHP script using, for example, an .htaccess (in Apache), so even if the src attribute is "style.css", it's actually a PHP script that is responding to the user.

Answer 2

Your CSS and Javascript files are cached, I would not recommend serving different style sheets / js files unless they're >200KB or so in size.

And yes, you can reference any server-side page with parameters (.php or whatever extension) as long as it returns the correct Content-Type for that file.

Sidenote: Usually if you have parameters and are dynamically serving files in this manner, I believe they will not be cached automatically unless you set it up to do so.

Simple example:

<link rel="stylesheet" type="text/css" href="/css.php?color=wide-red">

<?php
header('Content-Type', 'text/css; charset=utf-8');
$colorScheme = (string)$_GET['color'];

switch ( $colorScheme ) {
    case 'wide-red':
       $bgColor = 'c0c0c0';
       $fgColor = 'ffffff';
       $width = '1280px';
    break;

    case 'normal-gray':
       $bgColor = '333333';
       $fgColor = 'ffffff';
       $width = '960px';
    }
    break;

}
?>
body { 
   background:<?php echo $bgColor;?>;
   color:<?php echo $fgColor;?>;
   width:<?php echo $width;?>;
}

You can use echo, you can use a templating system, you can pull in other css files with file_get_contents, key thing is you need to send the right Content-Type, grab the right parameters and have a default fallback if no parameters are given.

Answer 3

So, there's a few different approaches you can take here. First, if you have access to apache's virtualhost files, you can set CSS to be read by a php interpreter. I've never done this and wouldnt exactly recommend it but an example is:

<VirtualHost *:80>
  AddType application/x-httpd-php .css
</VirtualHost>

This can also be done in your .htaccess file.

Alternatively, you can make a link like

<link rel='stylesheet' type='text/css' href='css/style.php?pg_id=43&post=62'>

and put

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

as the first line.

I've never considered Vinicius' technique but I don't doubt that has its own set of advantages and disadvantages too.

PS - sometimes GET variables are uses for caching purposes (or actually to prevent caching by appending the current unix timestamp to the css link with php like

<link href="style.css?<?php echo time()" type="text/css" rel="stylesheet" />