As more designers implement CSS3 properties with vendor prefixes (-moz-border-radius or -webkit-box-shadow, for instance), they're facing ugly blocks of redundant CSS. Eric Meyer argued convincingly that the prefixes are a necessary evil, and Aaron Gustafson offered a client-side method for making them less evil. I'm here to offer you a server-side method. I'll be using PHP in my examples, but the scripting is very basic so any server-side language will do just fine. The idea: Save awkward CSS rules as PHP string variables.
PHP TO THE RESCUE
A CSS rule is, essentially, a string. Therefore, it can be thought of as a string variable. So how do we save and manipulate variables in a style sheet? Regrettably, CSS has no such functionality. But PHP certainly does. Follow along with me and I'll show you how.
Open a blank document in your text editor and start off with this line of code:
<?php header("Content-type: text/css; charset: UTF-8");
Using PHP's header() function, you can tell the browser that any given document is a CSS file, even if it is in fact saved as a PHP file, as this one will be. Any text sent to the browser in this document will be read as though it were true CSS–there are no exceptions and there is no way for the browser to escape. One proviso here: You may not attempt to send any text to the browser prior to sending the header() function–this would be the cause of the “headers already sent ” error message.
Before we send text to the browser, let's write a little more PHP. Hammer out a moderately annoying, redundant piece of vendor-specific CSS3. Make it ugly enough to warrant fixing, but not so ugly as to confuse the example. For my example, I'll go with this:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
That was moderately ugly, so let's bundle it up as a string variable:
$border_radius_5px='
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
';
We can now refer to that unwieldy block of CSS by it's new nickname: $border_radius_5px. And recall: This is all taking place on the server, so while browsers are still free to misinterpret or ignore the CSS, they have no choice but to at least hear you out.
Now we're ready to send our style rule to the browser, so let's consider our options for doing so. Using PHP's echo construct, there are two likely choices for outputting text.
First, the double quotes method:
echo"
div.example {
$border_radius_5px
font-weight: bold;
}
";
The text must be enclosed in double quotes and the entire statement must have a trailing semicolon.
Second, the HEREDOC syntax:
echo <<<CSS
div.example {
$border_radius_5px
font-weight: bold;
}
CSS;
To use the HEREDOC syntax, follow the echo statement with three less than characters, followed by an identifier. In this case I chose the string CSS as the identifier, but I could have used anything. Note that in both methods, the $border_radius_5px line does not have a trailing semicolon, for it represents a string that contains the appropriate trailing semicolons.
Both methods will output like so:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-weight: bold;
Although they worked equally well in this particular example, the HEREDOC syntax is a better choice. With the double quotes method, you would have to remember to escape (that is, precede with a backslash) every double quotation mark in the stylesheet. This becomes relevant when using the font-family property with font names consisting of more than one word: These names must be contained in double quotes. With the HEREDOC syntax, there is simply no need to worry about escaping the quotation marks.
Our example stylesheet in its entirety, including an additional rule for the sake of context:
<?php header("Content-type: text/css; charset: UTF-8");
$border_radius_5px='
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
';
echo <<<CSS
div.example {
$border_radius_5px
font-weight: bold;
}
CSS;
?>
Notice that I ended with a ?>, which closes the opening PHP tag in the first line.
WHAT GOOD IS THIS AGAIN?
The goal here was to reduce the number of keystrokes (and the number of headaches) in implementing verbose CSS3 rules. Certainly we have accomplished that, but what else? Recall that this is a server-side solution, so it can't be turned off like other solutions that rely on Javascript. This also means that all the parsing is taking place on the server, so it will never slow down the browser. And the most popular Content Management Systems are written in PHP; using this technique with, say, WordPress, would be a snap.
MORE POSSIBILITIES
Keep in mind that prior to the entering the HEREDOC sytnax, we were writing ordinary PHP code. We declared a string variable, but we could have been doing any number of other things. Some ideas:
- Select user-defined styles from a database.
- Perform calculations on hex color values to mix and match colors.
- Determine the predominant color in whatever image happens to be displayed on the screen, and then establish a style scheme to match that color.
- Select style rules at random.
- Select style rules based on other variables: User preference, User level, number of visits, number of posts, time of day, time of year.
I don't think this article will teach developers anything new about PHP, nor do I think it will teach designers anything new about CSS. Even leveraging the two languages together like this is not a new technique. But I do think the demand for this technique is larger than ever before, and it will only get bigger as CSS3 becomes more widely sampled.
