I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Auto-generated CSS Prefixes With PHP

php / styles

Estimated reading time: 2 minutes, 51 seconds

Every current browser supports CSS3 proposals with CSS3 vendor-specific prefixes until the property is approved and finalized by the W3C. 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 { -moz-border-radius: 5px; -o-border-radius: 5px; -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 to generate some it for us

Using PHP to repeatedly produce CSS3 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 = "-webkit-".$property.": ".$value.";\n"
	." -moz-".$property.": ".$value.";\n"
	." -o-".$property.": ".$value.";\n"
	." -ms-".$property.": ".$value.";\n"
	." ".$property.": ".$value.";\n";
	echo $css3;
} ?>

To produce our CSS3, 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;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px; width: 50%;
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
-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:

  • The CSS code produced is somewhat redundant, in that we are outputting CSS3 vendor prefixes for every possible browser each time. 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.

  • An alternative approach would be to use a CSS framework, which would produce much the same effect.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.