CSS constants - variable values in CSS using PHP

20 February by S. Omieczynski http://blacmox.de/artikel/konstanten_in_css

So far the CSS standardization of the W3C doesn't provide an option to assign CSS properties dynamically. A serverside pretreatment of stylesheets may close this gap. Furthermore an optimization of the sourcecode becomes feasable.

Static declarations in CSS

Cascading Style Sheets (CSS) are applied as straight completion of markup languages like HTML and XML. The syntax of CSS rules addresses (X)HTML elements by selectors and sets appropriate declarations (combinations of properties and values) as follows:


		selector { property: value; }

The size and the number of associated CSS Files increase in more complex web projects. Hence, a sound file structure gets more important. Rather primitive szenarios cause a number of issues:

1. CSS values are assigned several times. A certain colour may appear in fonts, borders, pseudo-elements and backgrounds. The alteration of these values during the development phase or as a consequence of costumer demands in the productive stage often becomes an ordeal. Countermeasures taken by the application of (multiple) classes, IDs and groupings are limited.

2. A certain CSS property shall adopt variable values. So the colour of a website's background may vary in the course of the day. The script-controlled inclusion of different CSS Files generates redundant sourcecode; multiple (similar) CSS Files must be available and maintained.

The plain methods of the actual CSS specification 2.1 do not encouter these situations; the requirements of modern web applications exceed CSS's means. The implementation of variables in CSS were already suggested by Daniel Glazman and David Hyatt . However, the realization seems to be far beyond the range of vision, at least regarding the forthcoming CCS version 3.

The inclusion of a serverside preprocessing of CSS Files allows a straightforward application of customizable values in CSS. This process generates virtual CSS Files that are preserving perfect validity.

Outputting PHP scripts as stylesheets

The following example shows a plain method to prepare CSS dynamically. At this, a PHP script is included as an external stylesheet in the <head> of the HTML File:


		<link rel='stylesheet' type='text/css' href='/css/plain.php' media='all'>

The indication of an adequate header causes browsers to interprete the script as common CSS. The afore defined variables are displayed by their values using PHP's echo:


		<?php
		
			header( 'Content-Type: text/css' );

			$ColorBackground	= '#E5E5E5';
		
		?>



		body {	background-color: <?php echo $ColorBackground; ?>; }

The motivation to use this method is diminished by several factors:

- the intrinsic CSS sourcecode is bloated and defaced
- potential security risks are entered into a harmless stylesheet language
- no tidy separation between PHP and CSS

Parsing stylesheets with PHP

An elegant procedure is the processing of CSS Files by a serverside script that generates the actual CSS output. In this process, the content of a CSS File is read while constant values are substituted at all corresponding spots:


		@csskon	 { ColorBackground: #E5E5E5; }



		body { background-color: ColorBackground; }

The method were already discussed by Christian Heilmann and Shaun Inman . The latter introduced his script css-ssc in 2005, which version 005 constitutes the base for the development of the fork csskon . Subsequently some functions of the original script were revised and supplemented:

1. Caching of the CSS output
During multiple reloads, notable delays were experienced. The extensive cache mechanism of css-ssc were identified as cause und replaced by a simple one-liner:


		header( 'Expires: ' .  gmdate( 'D, d M Y H:i:s' , ( time( ) + seconds ) ) . ' GMT' );

Note: Often the efficiency (expense vs. value) of complex cache mechanisms is overestimated. In practice, numerous possibilities for tuning a web application don't lead to the desired result due to subtle side effects. Keep your code simple.

2. Passing of additional parameters
The core function of the script is extendable by the specific import of CSS Files into the parsed file (main.css). So the CSS property of a HTML element can be associated with different values - the formatting of the markup becomes controllable. Furthermore, the structure of large projects can be optimized by means of 1:n relations between parameters and CSS Files. So the stylesheets of the demo page are defined as follows in main.css:


		@sunrise	 ( sunrise.color.css );

		@sunrise	 ( sunrise.image.css );

3. Compression of the output
Prior to the CSS output, comments and whitespaces (blanks, tabulators and breaks) are eliminated. The size of the output is extremely reduced in dependance of the amount of these characters in the sourcecode.

Installation of csskon

The CSS Files may be referenced in the tried and tested manner in the <head> of HTML Files within common <link> tags:


		<link rel='stylesheet' type='text/css' href='/css/common.css' media='all'>

Using mod_rewrite, the request is redirected to the PHP script by a note in .htaccess. The appropriate CSS File is passed as a parameter:


		RewriteCond %{REQUEST_URI} ^/css/(.+).css$

		RewriteRule ^(.+)$ css/csskon.php?css=%{REQUEST_URI} [L]

Another option is the straight linking of csskon in the <head> of a HTML File. This method allows an uplink of additional parameters as described before. In this case, the rewrite module of the Apache is not required:


		<link rel='stylesheet' type='text/css' href='/css/csskon.php?css=/css/main.css&cntrl=sunrise' media='all'>

The script and all associated CSS Files must be stored in a folder named "css" beyond the webroot. For sure, this may be adapted by proper modifications of the sourcecode. Using the "common" linking of CSS Files, .htaccess must be applied in the root of the website while the rewrite module of the Apache must be enabled.

Demosite and Download

The function of the script csskon is demonstrated on a separate website.
The download contains a zip-container with the sourcecodes for an installation of csskon on the example of the demo page.

csskon.blacmox.de/en http://csskon.blacmox.de/en

References

D. Glazman / D. Hyatt: CSS Variables http://disruptive-innovations.com/zoo/cssvariables/
C. Heilmann: CSS Constants http://icant.co.uk/articles/cssconstants/
S. Inman: Browsing CSS-SSC http://www.shauninman.com/archive/css_ssc

Updates

First publication on 28 July 2008 in German language. Translation into English with the release of csskon 2.1 on 21 March 2009. Revision on 20 February 2012.

contact|imprint