Parsing PHP in CSS

Wednesday October 1, 2008

Pro-Tip: Tell your website to treat CSS files as if they’re PHP files to make life easier.

There are only two simple things you need to do to enable this!

  1. Add this to your .htaccess file:
    AddHandler application/x-httpd-php .css
  2. Add this — inside <?php & ?> brackets — to the very beginning of your CSS file(s):
    header('Content-type: text/css');

That’s really all there is to it.

Now you can use variables (and any other PHP) in your CSS files. Life is good.

Stay In The Loop:

Subscribe via RSS or Email to receive notifications when new posts are published.

Or just follow me on Twitter!

{ 4 trackbacks }

Mar-20-2009 php links | w3feeds
Friday March 20, 2009 at 5:30 am
The Blog of Hanas
Friday March 20, 2009 at 7:08 am
Page 2
Friday March 20, 2009 at 8:30 am
Coderies | taggle.org
Thursday March 26, 2009 at 1:30 am

{ 13 comments… read them below or add one }

1 yaqoob Thursday March 19, 2009 at 6:51 pm

would it be possible to apply AddHandler to only specific files and/or directories? forcing to process all css files around all website (lets say in wordpress installation with multiple plugins) would force you to add the header declaration to all these files around and that would be tiring to say least

2 rock Thursday March 19, 2009 at 11:09 pm

…except that serving a PHP page is much more expensive in terms of memory and CPU cycles, also i can’t seriously imagine where you would need generated CSS; i’m sure the output of your elaborate loops could be cached and served without having to invoke PHP every time…

3 Henrik Nielsen Friday March 20, 2009 at 12:38 am

Or you could simply make a .php file with the “header” code, and include it in your html as a style-sheet. The browser care about content-type, not file extensions.

Thereby you still have the option of using a static .css file when no php is needed in your style sheets, for better performance.

/henrik

4 murphy42 Friday March 20, 2009 at 1:42 am

In fact there is only one thing you have to do, i always skip step 1 and name my stylesheets that require processing
mystyle.php and in the beginning i use your header(’Content-type: text/css’); to convince server and browser that the file is really css.

You can then use for example link rel=”stylesheet” href=”mystyle.php”

The browser is not interested in the fileextension, only the server uses them sometimes. And i can see what is php, there is no need to work with .htaccess and its also a bit more serverfriendly because most css files get delivered directly.

Matthias

5 t Friday March 20, 2009 at 6:03 am

I Do think that you don’t need to declare a new MIME type, as you are already being rcvd as one ( AddHandler application/x-httpd-php .css )

You would need the MIME override if it was a .php file.

Cheers,
Anon

6 Juan Friday March 20, 2009 at 7:02 am

Why should I do this?…

7 Dave Friday March 20, 2009 at 8:48 am

Why not just give the CSS file a .php extension?

8 yaqoob Friday March 20, 2009 at 10:05 am

because (as far as I know) if you leave .php extension browser wont be caching it

I found a solution for setting only a specific file to be processed:

SetHandler application/x-httpd-php

9 yaqoob Friday March 20, 2009 at 10:07 am

ah, tags were stripped, I used
FilesMatch “style.css”

10 cigraphics Wednesday April 22, 2009 at 5:52 am

That is going to stress the server the easy way is this:

function css() {
	$bg = "red";
	$color = "green";
	$txt = "Arial";

	$css = <<<EOF
body {background-color: $bg; font: $color $txt;}
EOF;
	return $css;
}
$x = css();
file_put_contents('style.css', $x);

Add it to your administration panel and when you change the values it will rewrite the style.css file and that’s it. You won’t need to call it every time you enter the site. And if you want to change the styles you can make more files like style_blue.css, style_red.css …etc

11 Andrew Sunday May 17, 2009 at 5:25 pm

I also agree that it is not good to be loading PHP for every style sheet. If you load one PHP page with two ‘dynamic’ style sheets, that’s 3 PHP calls for every loaded page, for every visitor. That will add up real quick if/when your website starts to pull traffic.

The best thing to do is leave the stylesheets static. If you need to add dynamic style information, include it in the actual web page in style tags.

cigraphics is on the right track for re-generating static style sheets when changes are made to the website, but then you have to worry about browsers caching their CSS sheets because they are expected to be static. I know there are workarounds for that, but why worry about it? Just include any dynamic content in the main web page.

12 Creig Sunday July 26, 2009 at 2:19 am

I’ve found that (at least) FireFox caches stylesheets forever unless a page is specifically refreshed. Thus, changed stylesheets under a fixed name won’t be reloaded. My workaround when changing stylesheets is to give each a different name (i.e. style001.css, style002.css, …) and set a variable in my config.php file for the most current style sheet.

I could see doing this php trick when different browsers need different styles. But you could as easily use different style sheets for different browsers and actively set the variable in config.php accordingly. Do that for the part that MUST be different, and use a single common stylesheet for the rest that doesn’t matter which browser is used.

13 cigraphics Monday July 27, 2009 at 2:48 am

You can trick the browser like this:

Where you load the style.css file put this:

style.css?MODIFIED_TIME

Leave a Comment

Previous post:

Next post: