Every current browser supports CSS3 proposals with CSS3 vendor-specific prefixes until the property is approved and finalized. Sometimes browsers have different ways of writing values (as Firefox and Safari did with gradients), but for most proposals, the order and units used for CSS3 properties remain the same: the only thing that changes is the vendor prefix. That means a lot of repetition in writing code. The following declaration is typical:

div#box {
	-ms-border-radius: 5px;
	border-radius: 5px;
}

More code means more opportunities for mistakes, and produces stylesheets that are longer and more difficult to maintain. Rather than typing the vendor-specific prefix and values over and over again, we can use PHP to generate some it for us

Using PHP to repeatedly produce CSS means we should write our code as a function. The function will need to know two things: the base property name (for example, border-radius) and the value associated with it (“5px”). So, joining our code at the top of the page, we write:

<?php header('Content-type: text/css'); 
	function css3_write ($property, $value) { 
} ?>

Within the curly braces, we want to produce the appropriate CSS declaration for all the browsers, prefixed with the correct vendor. The final base property will be at the end, as a fallback position. We’ll build up the declaration as the value of a $css3 variable, using a series of concatenations. We’ll also utlise the \n “new line” escape character to make the CSS the function creates more readable.

<?php header('Content-type: text/css');
function css3_write ($property, $value) {
	$css3 = " -ms-".$property.": ".$value.";\n"
	." ".$property.": ".$value.";\n";
	echo $css3;
} ?>

To produce our CSS, we just call the function with the appropriate CSS3 property and value at any point inside a CSS declaration:

div#box {
	border: 1px solid black;
	background: #fff; 
<?php css3_write("border-radius", "5px"); ?> width: 50%; 
<?php css3_write("box-shadow", "5px 5px 2px rgba(0, 0, 0, 0.5)"); ?>
}

Which will produce the following CSS:

div#box {
	border: 1px solid black;
	background: #fff;
	-ms-border-radius: 5px;
	border-radius: 5px; width: 50%;
	-ms-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
}

A few points of note:

• A more elegant solution (with a slightly higher hit in server-side processing) would be to detect the kind of browser requesting the stylesheet and produce only the CSS3 appropriate to that client.
• Generating CSS on-demand in this way means that the stylesheet will never be cached by the browser (PHP files cannot be cached client-side, for obvious reasons). This will increase download times slightly. Alternatively, you could use the same script to simply output CSS, view it in your own browser, and copy and paste the produced code into a standard styles.css file, uploading that to your server and linking to it as normal from your pages. In that sense, the styles.php file would become the production template that you would use to generate a static CSS file for your site.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.