[php] Making a css.php

A cascading stylesheet (.css) file is static, and runs client-side. PHP however is server-side, and allows you to make dynamic content. In this article I am going into the basics of using PHP to create a dynamic .css file. Because as with many designs there might be a reason for you to split up your .css for various browsers, make exceptions, or you might desire to automatically make CSS3 code, etc.

An example. CSS3 support is not 100% yet across all browsers, and some browsers have their own prefix. Mozilla browsers like FireFox add -moz-, Opera has -o-, and webkit browsers like Chrome and Safari use -webkit-. So if you want to have rounded corners you would use border-radius: 12px;, which gives you a radius of 12 pixels rounded corners on top/right/bottom/left. Normally you would have to also add -webkit-border-radius: 12px; and for Opera and for Mozilla. This is fine and it will work, but just changing it a few times means you will notice the small annoyance of having to change all of them, all the time. Using PHP we can make a function for CSS3 code creation, called css3($property, $value); This function can get really complex, but for the sake of this example I will keep it as simple as possible.
function css3($property, $value) {
	$css3 = "-webkit-{$property}: {$value} \n
		-moz-{$property}: {$value} \n
		-o-{$property}: {$value} \n
		-khtml-{$property}: {$value} \n
		{$property}: {$value} \n";
	echo $css3;
}

Then at a later point in the css.php file when you need to make rounded corners you use it like this:
.something {
	color: #ddd;
	<?php css3("border-radius", "12px"); ?>
	font-size: 12px;
}

Another example, a common reason is repetitive code prevention. It's quite annoying to write a .css file and wanting to create a few more themes for the site. You might end up with blue.css, gray.css and green.css. For the most part the code in each file is the same. You might notice if you fix a design bug in the main.css file that you have to load all the .css files and fix it there too. It would be quite handy if you just had 1 file, and regardless which theme the user selected, the code just magically updates. First imagine you have 3 color themes, blue, gray and green. And to keep this simple, let's only use this for the background color of the page. Instead of having three files, we will first detect which theme is selected, and secondly generate the css code using this selection. For the same of this demonstration we're ignoring page switches leaving the cookie storing out, and caching output.

At the top of the file we will see which theme was selected, set it. If nothing was selected, set it to the default. And if something else was selected, set it to the default too. (The below code could be more compressed, optimized, but this step by step explains it better)
<?php // which theme to use?

$theme_default = "blue"; // the theme to default to
$theme_array = array("blue", "gray", "green"); // available themes

# theme request by user?
if ($_REQUEST['theme']) {
	// user requested a theme, set it, clean it
	$theme_request = htmlspecialchars($_REQUEST['theme'], ENT_QUOTES);
} else {
	// no user request, set to default
	$theme_request = $theme_default;
}

# request valid?
if (in_array($theme_request, $theme_array)) {
	// requested theme is in our array, allow it
	$theme = $theme_request;
} else {
	// requested theme is not in array, set to default
	$theme = $theme_default;
}

?>


A way to then use the string $theme in your css.php is by printing it out in the appropriate spot like so:

<?php

# which background color to use?
if ($theme == "blue") {
	// blue background
	$theme_bg = "#ecf1f5";
} else if ($theme == "gray") {
	// gray background
	$theme_bg = "#f3f3f3";
} else if ($theme == "green") {
	// green background
	$theme_bg = "#f4f7f4";
} else {
	// this should not ever happen, but still
	// lets set this to the default theme bg
	$theme_bg = "#ecf1f5";
}

echo "	background: {$theme_bg};\n";

?>


I think these are a few examples to show the potential of having 1 css.php file to which you can link to, which outputs either a default theme, alternative themes, or helps generate css3 code without having to write it every time. Maintaining your css code is a bit easier too. More advanced examples are building caches for various browser types, auto !important and browser-hack injections on the fly, as well as css-tidy and code compression (cached preferred. Anyway, I believe this gives you an idea as to how I prefer to deal with a site like mycoffeecupisempty.com's .css files, let's show you how to make a css.php file so it renders in the browser, and how to use it (link to it).

Create a new file called css.php and have it start with:

<?php // css.php
header('Content-type: text/css');

print <<<_CSS
@CHARSET "UTF-8";
/* --- css.php --- */
\n
_CSS;

// your PHP functions go here

?>


Populate the file accordingly with your php functions, php code, and css code. Then in your html header code link to the css.php file like you would normally link to your .css file:

<link rel="stylesheet" type="text/css" href="http://example.com/css.php" />


To change theme, change the URL for css.php to css.php?theme=blue or css.php?theme=green.

On this web site, hover over the caffeine molecule on the top right, and see if you can find the secret theme switcher :)

Next Article: [HTML5] Center Content