It happens almost everytime when I am building a site. I create a basic style.css file, and while I am populating it my brain keeps going: “Couldn’t I do this dynamically with some PHP or something?”, especially when the site includes a few viewer-preferences like a theme or a colour change. Why have duplicate code with multiple style sheets when we can use PHP to gather up the code and spit out a style sheet that is nice and clean, cached, and minified.
tl;dr With this how-to I will show you how to get started making a dynamic stylesheet file using PHP. Just like the one I am using on mrfloris.com
Normally a stylesheet file (style.css) is static. You put in your code like: .article { font-size: 14px; } and save it. But what if it has to be changed on the fly? There are of course quite a few tricks for this, but this one is changing your style.css to style.php and using an if-conditional (If we’re on a featured article, use 24px, otherwise the standard 14px). Another example is that you can identify visitor, check if there’s a minified and cached version, and tell the browser to use that one instead (or generate one on the fly).
A few great reasons for using PHP are:
– You can check against situations (show the pumpkin image instead during fall season)
– Turn on/off certain features like ‘force expiry’, etc.
– Work on a normal easy to read style-dev.css file and let style.php deal with rest
– Let PHP cache things properly
– Let PHP automatically minify the .css file(s)
– Let PHP automatically create the ‘print’ version. (tip: style.php?print)
– Handle lazy-loading of the css file(s).
– Automatically combine various css files into one compressed, minified and cached output.
But, lets start simple. With a few steps, and I will let you go as complex from there as you want.
Step 1. Rename the style.css to style.php
Step 2. At the top of the file and before any existing code, include this code:
<?php
header("Content-type: text/css; charset: UTF-8");
?>
Step 3. Either keep the existing code, or minify it somehow and put it in a style-min.css file.
Step 4. If you are moving your css to style-dev.css or style-min.css then include this code before the ?> line:
require_once('/full/path/to/style-min.css');
Example, it should look like this now:
<?php
header("Content-type: text/css; charset: UTF-8");
require_once('/full/path/to/style-min.css');
?>
You can now create exceptions, like changing the font-size for the featured articles:
(yes, that’s just a dirty example, I assume you understand how to implement it into your css)
if (featuredArticle(true)) {
# css code for featured articles
font-size: 24px;
} else {
# css code for normal articles
font-size: 12px;
}
Once your style.php file is ready, just link to it in your <head>..</head> part of your html code:
<link rel="stylesheet" href="style.php" type="text/css" media="screen" title="stylesheet file">
I hope this helps you get started, and motivates you to tweak your website for your visitors.