davidgagne.net

  • About
  • Archives
  • Twitter
  • Facebook
  • bartender.live
  • GitHub
  • LinkedIn

Parsing PHP in CSS

October 1st, 2008 @ 5:09 pm PDT

Dynamically process your css scripts

Parsing PHP in CSS

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.

More posts tagged:
code / css / HTML / PHP / tips / web design

More posts categorized:
Programming Web Design

More posts from:
October 2008 / 2008

Post navigation

Previous Post
Previous Post American Idiot
Next Post
Next Post A Look Back to the Future

Responses to “Parsing PHP in CSS”

  1. March 19th, 2009 @ 6:51 pm
    yaqoob

    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. March 19th, 2009 @ 11:09 pm
    rock

    …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. March 20th, 2009 @ 12:38 am
    Henrik Nielsen

    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. March 20th, 2009 @ 1:42 am
    murphy42

    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. March 20th, 2009 @ 5:30 am
    Mar-20-2009 php links | w3feeds

    […] Parsing PHP in CSS â?? davidgagne.net […]

  6. March 20th, 2009 @ 6:03 am
    t

    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

  7. March 20th, 2009 @ 7:02 am
    Juan

    Why should I do this?…

  8. March 20th, 2009 @ 7:08 am
    The Blog of Hanas

    […] Parsing PHP in CSS — Tell your website to treat CSS files as if they’re PHP files to make life easier. […]

  9. March 20th, 2009 @ 8:30 am
    Page 2

    […] Parsing PHP in CSS (tags: php htacces) […]

  10. March 20th, 2009 @ 8:48 am
    Dave

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

  11. March 20th, 2009 @ 10:05 am
    yaqoob

    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

  12. March 20th, 2009 @ 10:07 am
    yaqoob

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

  13. March 26th, 2009 @ 1:30 am
    Coderies | taggle.org

    […] Utiliser du PHP dans vos CSS, un classique utile […]

  14. April 22nd, 2009 @ 5:52 am
    cigraphics

    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

  15. May 17th, 2009 @ 5:25 pm
    Andrew

    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.

  16. July 26th, 2009 @ 2:19 am
    Creig

    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.

  17. July 27th, 2009 @ 2:48 am
    cigraphics

    You can trick the browser like this:

    Where you load the style.css file put this:

    style.css?MODIFIED_TIME

  18. August 13th, 2010 @ 2:45 am
    birkof

    I simply use this syntax:

    php_value auto_prepend_file none
    php_value default_mimetype “text/css”
    SetHandler application/x-httpd-php

  19. November 21st, 2012 @ 1:16 pm
    Mario

    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.

  20. October 14th, 2014 @ 9:45 am
    rob

    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..

Comments Closed

New comments are disabled on this post.

Search


The Best T-Shirts (and Hats)

The Best T-Shirts (and Hats)

I cannot tell you how much I love 47 Brand Scrum t-shirts. They're crazy soft and comfortable, and available for all your favorite teams.

  • Take a Look

© David Vincent Gagne. All rights reserved. Custom WordPress Theme by Jacket Industries.