« Include Recent flickr Photos with PHP | Main | CSS Spyglasses »
December 13, 2005
Defining CSS Constants with PHP
IT'S PRETTY SIMPLE
I often find myself wishing CSS had constants like most programming languages. For example, at work, we have a specific shade of orange we use all the time. We call it Tricycle Orange. It's #F33500. We also have a magical shade of blue called CM Blue #346FB7.
So, anytime I write a CSS file which uses those colors, I have to type #F33500 or #346FB7. Just between you and me, I already have enough hex numbers floating through my head without having to remember these. Also, what would happen if our designer suddenly decided Tricycle Orange needed to be a few shades darker? I'd have to go through the style-sheets and change every occurence to its new value. Not very fun. Is there a solution?
Of course there is!
Using the magic of PHP we can define constants in our CSS files. That way, if we ever need to change a value, we only have to change it in one place. PHP updates the rest of the file for us - automagically! Here's how it works...
In a typical style-sheet we have the following:
.myStyle {
color: #346FB7;
background-color: #F33500;
more: stuff;
}
.anotherStyle {
color: #346FB7;
float: right;
}
Using constants we could rewrite it as:
$tricycleOrange = '#F33500'
$blue = '#346FB7'
.myStyle {
color: $blue;
background-color: $tricycleOrange;
more: stuff;
}
.anotherStyle {
color: $blue;
float: right;
}
If we were to pass that style-sheet directly to a browser, it wouldn't work. It wouldn't know what to do with the first two lines. Instead, we pass it through a short PHP script which reads all of our constants and then searches through the rest of the file and replaces each occurance with the appropriate value. The result would be identical to the first example above.
There's more power to this technique than simple color replacement. You can define entire commonly-used styles.
$myStyle = 'float: right; margin: 15px;'
#header {
$myStyle
color: #FF0000;
}
This method allows you to very easily change entire styles without changing much code.
SO HOW DO I USE IT?
Download the PHP script here: css.php and place it in your web directory.
Then, import it into your HTML where you would normally put your CSS file using
<html> <head> <style type="text/css"> @import 'css.php?file=main' </style> </head> ... </html>
Or, if you prefer:
<html> <head> <link rel="stylesheet" type="text/css" href="css.php?file=main" media="screen, print" /> </head> ... </html>
Where main is the filename of the CSS file you want to use (minus the .css part).
howto , php | By tylerhall | 09:01 PM
Trackback Pings
TrackBack URL for this entry:
http://chattablogs.com/mt/mt-tb.cgi/28009
Listed below are links to weblogs that reference Defining CSS Constants with PHP:
Comments
I've actually been doing this for years I recently packaged a bunch of tools for doing such things for people who don't know PHP (or even CSS) my system uses XML files to create schemes that define all kinds of important data like color, bullet images and more. Oh how I love PHP (and python).
Posted by: James at December 14, 2005 02:00 AM
