More posts tagged:
code / css / HTML / PHP / tips / web design
Dynamically process your css scripts
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!
Add this to your .htaccess file:
AddHandler application/x-httpd-php .css
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.
Responses to “Parsing PHP in CSS”
Comments Closed
New comments are disabled on this post.
Search
Give Easily
Did you know that Amazon will donate to the charity of your choice when you use smile.amazon.com to do your online shopping? It doesn't cost you anything extra, and you can make a big difference just by using this link.
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
…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…
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
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
[…] Parsing PHP in CSS â?? davidgagne.net […]
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
Why should I do this?…
[…] Parsing PHP in CSS — Tell your website to treat CSS files as if they’re PHP files to make life easier. […]
[…] Parsing PHP in CSS (tags: php htacces) […]
Why not just give the CSS file a .php extension?
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
ah, tags were stripped, I used
FilesMatch “style.css”
[…] Utiliser du PHP dans vos CSS, un classique utile […]
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
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.
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.
You can trick the browser like this:
Where you load the style.css file put this:
style.css?MODIFIED_TIME
I simply use this syntax:
php_value auto_prepend_file none
php_value default_mimetype “text/css”
SetHandler application/x-httpd-php
One really easy way that i use is what murphy42 told us, but with a twist :
Create a PHP file with the header css trick, link it to your page, then use REQUIRE to call the css file.
i.e. : require(“stylesheet.css”);
It’ll parse the stylesheet for PHP snippets and it’ll be valid in any editor with auto-complete features.
If you absolutely need PHP in your css then just use a dam php file.. why go to all that trouble just to maintain the .css file extention that none of your users are even going to see..