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
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" />
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.
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.
