How to use PHP inside css file

Question

I have CSS file and I want to refer some image paths in that files in PHP varaible format. Then I refer that css file inside a html file. Following are my file

CSS file

<? header ("Content-type: text/css");?>
 body{ margin:0px; font:9px/11px "Tahoma", Arial, Helvetica, sans-serif; color:#010000; 
 background:#f3f6e1 url(<?php echo base_url().'public/';?>images/body_bg_1.gif) repeat-x 0 0}

HTML file

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/layout.css" media="screen"> 
</head>

Other things. Can you explain me how to do this ?

Also, you may be able to get away without using PHP and making use of the HTML `` tag + attribute. — Mark, Oct 12 '13 at 19:20
Oops, my answer was totally wrong, thought it would work=) Checkout this link explaining how to achieve this: http://stackoverflow.com/questions/12367134/how-do-i-run-php-inside-css — Cyclonecode, Oct 12 '13 at 19:24
SEARCH! This has been asked *many* times before, on Stack Overflow, and across the whole of the Internet. It’s not possible natively as PHP is a server-side language, and CSS is a client-side resource. PHP has been and done its job by the time *any* CSS is rendered. — Martin Bean, Oct 12 '13 at 19:25
@MartinBean I don't think that's true- when the client sees the link reference to a stylesheet, it will make a new request to the server which can then apply server-side code and return a rendered response. — Joseph, Oct 12 '13 at 19:28

score 20 · Answer 1 · edited May 23 '17 at 11:54

If you're able to rename your CSS file "layout.php", there's no need for all of these workarounds:

Your layout.php file would look like:

<?php header("Content-type: text/css; charset: UTF-8"); ?>
body{ margin:0px; font:9px/11px "Tahoma", Arial, Helvetica, sans-serif; color:#010000; 
background:#f3f6e1 url(<?php echo base_url().'public/';?>images/body_bg_1.gif) repeat-x 0 0}

Your HTML files would look like:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/layout.php" media="screen"> 
</head>

This question is very similar: Include: css with php file extension?

Spooky · Answer 2 · 2013-10-12T19:38:41.417

Perhaps the return value of base_url() does not end in the path separator.

With that in mind, try this:

@import url("<?php echo base_url().'/public/';?>css/layout.css");

(Notice the slash before "public")

Check the source of the page via your browser's "view source" or similar, and check if the path in the @import is correct

or

Use a request logger similar to Chrome's devtools' "network" tab to see what URL your browser is trying to load the imported CSS file from.

You also view the CSS via your browser to identify whether the contents are being correctly built. If you see <?php inside the response, you'll need to make Apache treat the CSS file as if it was PHP.

You can add something similar to the following into your .htaccess file:

<FilesMatch "\.css$">
    SetHandler application/x-httpd-php
    Header set Content-type "text/css"
</FilesMatch>

You should ensure that the "mod_headers" Apache module is enabled to allow the use of the Header directive.

Although, personally I would rename such dynamic stylesheets to have a .php.css extension. This will have no effect, but then Apache can be configured to only pass the dynamic stylesheets to the PHP preprocessor.

<FilesMatch "\.php\.css$">
    SetHandler application/x-httpd-php
    Header set Content-type "text/css"
</FilesMatch>

True, and if you set Content-type to "text/css; charset=utf-8", your comments in your css files will be readable also in browser without declaration @charset "utf-8" in those css files. — Starboy, Mar 07 '21 at 17:05

score 1 · Answer 3 · edited May 23 '17 at 12:25

1

I believe the problem is that a .css file isn't going to be interpreted as PHP and so your code in the file is not going to be executed. If you included it as a PHP file, your code should be executed and your values should be filled in.

[Edit] This does seem to be the way to do it, as noted by an answer someone linked to in a comment on the original post here.

edited May 23 '17 at 12:25

Community

1
1

answered Oct 12 '13 at 19:27

Joseph

12,678
19
76
115

score 1 · Answer 4 · answered Oct 12 '13 at 19:35

1

It's simple if you have a bit of knowledge of url rewriting.

Write a .htaccess file in your root directory, It would look something like:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^customized\.css$ css\_generator\.php [L]
</IfModule>

Now just create a file css_generator.php having content:

<?php header('Content-type: text/css; charset: UTF-8'); ?>
 body{ margin:0px; font:9px/11px "Tahoma", Arial, Helvetica, sans-serif; color:#010000; 
 background:#f3f6e1 url(<?php echo base_url().'public/';?>images/body_bg_1.gif) repeat-x 0 0}

Your html should look like:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="customized.css" media="screen"> 
</head>

Understanding what just happened.

On page load when your browser will load customized.css, it will be redirected to css_generator.php
the contents of css_generator.php will be also available as yoursite.com/customized.css

Hope this helps

answered Oct 12 '13 at 19:35

whizzzkid

1,174
12
30

The `Rewrite` is irrelevant; he can just use `href="foo.php"`. – Spooky Oct 12 '13 at 19:40
@Spooky the code just becomes more clearer with this. you can of course use that directly because the headers are already being sent out by the php file. Now while coding href="*.css" looks more apt than href="*.php" for stylesheet. To add to that. If you're on a CDN like cloudflare, using .php will not get your css cached and will make it reload from the server. whereas if you're already using .css as extension, cloudflare will auto cache it and serve it much faster than the other way – whizzzkid Oct 12 '13 at 19:44
2

If anything, it is clearer with a .php extension because it highlights that the file is dynamically generated. Making the effort to allow the use of .css is practically making the effort to make the code more confusing/unclear. – Spooky Oct 12 '13 at 19:47
well i find that way to be clearer, That's your POV. Anyways how can you beat caching? – whizzzkid Oct 12 '13 at 19:50
In what way is your method clear? It just blends in with the other `link`s to _static_ stylesheets. I don't get what you mean about caching. – Spooky Oct 12 '13 at 19:51
The best benefit I see is the browser and cdn caching. The browsers still cache the static files by extensions (JS/CSS/JPG/PN/etc). with php they will never be cached ( I doubt)... but with cdn they will definitely will never be cached... I already did that... :) – whizzzkid Oct 12 '13 at 20:03

How to use PHP inside css file

4 Answers4

Linked