CSS Variables with PHP
When people are asked about features they would like to CSS, “variables” always seems to come up. Whether or not this is a good idea is still something I personally haven’t decided on, but I’d lean toward yes. Regardless, using PHP, it is trivially easy to use variables in CSS. This is certainly not a new trick, but I’ve never specifically covered it so I thought I ought to.
Below all that PHP stuff, you can just commence regular CSS writing, only you can intermix some PHP to spit out those variables.
#header < background: url("/images/header-bg.png") no-repeat; > a < color: ; > . ul#main-nav li a < color: ; >Extend the power / Other ideas
- While you are at it, might as well compress the CSS with PHP.
- Theoretically you could pull the user agent and attempt to do browser-specific CSS, but that is littered with problems and not recommended.
- Pull the date/time, and perhaps change some stuff on your site for the different seasons or time of day.
- Generate a random number, test the result, use it to set a random background image on your header.
I did a totally static test page and it worked fine, then I tried this same technique within a WordPress site and no dice. The solution for me was to leave the file named style.css, and use .htaccess to parse it as PHP. Just make sure this code is in the .htaccess file (Apache servers only) at the same directory level as the CSS file. Then just use PHP inside it as you would any other PHP file.
Carlo DeAgazio wrote in to say this works for him in WordPress:
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
Hey Chris, I was playing with this idea the other day, but never had time to look deep into it. I have one question: what can you tell me about perfomance? I suppose it´s slower than a pure css stylesheet, but it´s much slower or you cant even notice the difference? Thanks for your time and for this very interesting post.
Really interesting concept. I could see it being very useful in a corporate setting like where I work now. It would be easy to change colors/fonts if the corporate branding went in a new direction.
@Martin There’s no reason why it should be slower than pure css: The moment the css is delivered to the client from the server, it has become pure css already. Don’t forget that any php code is executed on the server before anything happens in the browser. If your code is really complex, you might notice some kind of downside on performances because it would take some time for the server to execute the script. However I don’t see this happening at all with this kind of method. My 2¢
I’m sure there is some cost as the server has to process it and then deliver it, rather than just deliver it – but we’re talking microseconds here. When I used this method, it wasn’t noticeably slower than pure CSS.
Thanks for your answers, both O and LineIn. What you´ve wrote seems very coherent, so I think its just a matter of give this a try!
There is actually a performance issue. As far as I know, these php-parsed stylesheets do not get cached by the client. So the stylesheet is processed everytime it is called by the client.
Correct me if I am wrong.
You could probably set an “expires” header in php but I’m not that into HTTP myself. Any ideas?
Actually you don’t need to work around the caching problem. Since you aren’t really doing anything dynamic inside the script you could just run the following from the command line on mac/linux: php myStyles.php > myStyles.css Then link the the css file we just generated. You’ll have to recompile the css file each time you change it, so it’s only really useful once you’re done testing.
There are some major performance issues. You should not use PHP or any application tier logic to generate static content at runtime. I go into all the performance issues here: http://bit.ly/4suKSp
Another way to do this, albeit not very effective, is to embed the styles directly in document and have php echo the variables there. A more useful variant of this method is applying it to JavaScript. I once utilized this when I had to position an element with JS generated CSS, when the position was reliant upon the submitting of a php form.
The biggest reason I’d want to use CSS Variables is class inheritance. e.g. for sprites. .sprite <
background-url…
text-indent…
> .header extends .sprite
.header <
background-position…
> .submit extends .sprite
.submit <
background-position…
> Which saves us from having to put things like
input submit” and littering HTML with class names. I’d love to see something like that using this method. Nicole Sullivan goes into some depth about this here: http://www.stubbornella.org/content/2009/11/09/css-wish-list/
you should take a look at the github project page of oocss (http://github.com/stubbornella/oocss) . there you can find a lot of object oriented css code, which can be used like this “input submit” ” .
everybody knows that this is not the best way to do it but it’s actually a concept that should find it’s way into the css specs. of course the project is open to any kind of contributions (ideas, comments, code, …)
Well, there is an ‘Object Oriented CSS’ out there but am not sure if it allows inheritance.. (though I believe it should) Have to study it.. Darn, these technologies are developing at a very past pace… No sooner I learnt CSS 2.0 than new versions of CSS i.e. CSS 3.0 and Object Oriented CSS came out in the market 😛
You could also use something like Scaffold to do this, which also adds a number of other benefits (caching, nested selectors, compression, etc.).
Scaffold would be what I’d use if I were to go down this route. I’ve tried it out but unfortunately it doesn’t work on my WAMP set-up.
Chris, Since you’re the WordPress pro, I thought I’d ask. Is there an easy way to work this into a WordPress theme? A lot of times when I sell a theme I get requests to change colors, etc, by people who don’t know CSS. If all they had to do was change a few variables at the top then it would be easy to explain.
I’ve always been perplexed by why this enhancement is so desired because this functionality already exists. Don’t you have have the ability to have psuedo variables with the ability of specifying multiple classes?
That means you’d have to define style in the HTML. I’m not going to explain why that’s bad, google knows 😉
This is exactly what I was going to post. I found it very liberating to quickly create divs say div h200px float-l bgcolor1 textcolor3 font1″ I don’t see why this is any worse or heavier than giving an element an id and creating a style chunk for it when I was playing around with this I was able to do a lot more with less code since you can declare a bunch of design specific variables and then just apply them to whatever element you desire easily. It also sets up addClass and toggleClass well with jQuery. I would like to know the downsides to this method though. Obviously when working with dynamically generated content things could get stickier. I noticed facebook uses a lot of these descriptor classes in their markup.
The WordPress theme Mandigo uses this technique. The style sheet is style.css.php. Interesting theme, but this makes it difficult to modify the theme at the code level. The end user has quite a bit of control using the admin theme options.
ohhh. interesting. that would be a big draw if users could set color codes in an admin panel I think.
PHP Script in CSS Files
- Using CSS in a PHP File
- Use the Header() Function to Define CSS Properties in PHP
Using CSS in PHP files allows reusability since we can predefine style inside PHP variables and use them later anywhere in our PHP files. Here is how we can do that:
Using CSS in a PHP File
There are many ways to use PHP scripts in CSS files. We use the following method since it is simple and the most popular.
- The index.php : We are using header() function which is a built in function in PHP. Example: header(‘content-type:text/css; charset:UTF-8;’); in the index.php . Then, we used CSS styling inside this file using both .class and #id .
- The style.php : This file contains our markup HTML that we linked using: . It is an HTML element to link meta attributes in the markup.
html> head> title>How to Use CSS in PHP title> link rel="stylesheet" type="text/css" href="style.php"> head> body> div id="democss"> div> h1 align="center">Applying style on imageh1> img src="image.png" alt="demo" class="image"> body> html> We use a simple href attribute of the HTML element to include our style.php file in the header.
php //define header function header('content-type:text/css; charset:UTF-8;'); //you can style PHP variable for reuse $txt_color = "black"; $bg_color = "#6B5B95"; $alignment = "center"; $width = "200px"; $height = "200px"; ?> #democss width: php echo $width; ?>; height: php echo $height; ?>; background-color: php echo $bg_color; ?>; margin: auto; border: 3px solid black; padding: 10px; > .image display: block; margin-left: auto; margin-right: auto; width: 20%; border-radius: 6px; > When we load the index.php file, it can apply the style from the style.php files using our method.
Use the Header() Function to Define CSS Properties in PHP
The header() function is used to define CSS properties in the PHP file. We have shown some variables that we can use anywhere on our stylesheet.
For example, if you want to change the background color of any HTML elements, you only need to echo $bg_color after the HTML tag.
That is the only way to manipulate CSS in PHP, and it depends on your requirements to apply any CSS in PHP.
You can also use base_url() , PHP require() and other import file functions to do the similar tasks.
Sarwan Soomro is a freelance software engineer and an expert technical writer who loves writing and coding. He has 5 years of web development and 3 years of professional writing experience, and an MSs in computer science. In addition, he has numerous professional qualifications in the cloud, database, desktop, and online technologies. And has developed multi-technology programming guides for beginners and published many tech articles.