Here, I describe a scheme using PHP to implement CSS variables. A pseudo-CSS file with the .php extension is used. It contains PHP code as well as standard CSS statements. The PHP code extracts values from a cookie and various CSS statements are set by PHP code that assign them user defined values. Its implementation is relatively simple and it prevents redundancies in the file.

Cascading Style Sheets is a presentational style sheet language. It is an amazing tool but it lacks one important functionality: it cannot contain variables whose values ​​will be evaluated when a page is loaded. Indeed, CSS variables are one of the most requested features, especially by those who are accustomed to using programming languages ​​such as PHP or Javascript.

The "CSS Working Group" (W3C) is becoming closer to defining this highly requested feature [see CSS Variables draft) but it may be not what was expected. For now, we must be content with what we have and take roundabout ways to perform the task.

It defines a custom property as property whose name starts with "var- " and contains at least one other letter. Property names that have var- as a prefix (e.g. var-name) represent custom properties, contain values that​​ can be reused throughout the document using a variable. Here, a variable is an association between an identifier and a value that can be assigned to CSS properties using the var() function notation. Another thing that the proposal mentions explicitly is setting custom properties to be read by JavaScript.

I want it right now!

Suppose that you would like to use it now! First, change the extension of your CSS file from .css to .php. Since Web browsers are not that picky about file extensions when dealing with the HTML link tag, you can link to your pseudo-CSS file as follows:

What they are picky about is the header data that it receives for that file. What that means is that you can link a *.php file with the proper header data in the place of a *.css file, and the browser will interpret the result just like standard CSS. To do so, add the PHP header that tells Apache to output the file as CSS:

With this scheme, you can set as many pseudo-CSS variables as you want et disperse their values in the CSS code by replacing CSS numerical values of your choice by PHP statements such as <?php echo $MyVar ?>. It works!

In a previous design of this web site, I used this roundabout to CSS variables for the sake of dynamically changing display features of the pages. I wanted the users to be able to change the color theme and the font-size of the pages just by clicking on icons on the page [Dynamic cascading style sheets - internal or external? ]. At the time, I called the method "dynamic cascading style sheets" because of the user interaction. Now, I call it "simulation of CSS variables".

Demo

For this demo, I have used a dynamic change in the color theme of the page (this page only on this site) that can be performed by the client on the user interface: the banner, the menu, the title and the heading tags of the page will change color but it could also apply to the size of fonts and other features. Try it below and see what it gives:

The PHP preudo-css file

For this demo where the client dynamically selects one of the colors, the pseudo-CSS file appears as a PHP file where the value of the color theme is set by a cookie. Depending on the value of this cookie (teal, blue, brown, red or black - its default value), the PHP variable $Colors is set to one of the colors. Assigning <?php echo $Colors ?> to the <title>, <h1>, <h2>, <h3> and <h4> tags and to the banner id property in this file avoids redundancies and sets all these CSS elements to the selected color. See the code of the pseudo-CSS file:

Conclusion

The code developed in this article allows CSS-variable capability using a pseudo-CSS file with the .php extension. It is a first step toward CSS-variables and it is supported by all browsers.

For the demo, I have had to use a cookie to set the value of the color theme because the change originated from a selection made dynamically by the user. Because of the type of cookie that was used, the selection will survive for a month once installed on the client!