Including a CSS file through PHP

[denno020]

I'm looking for advice on how to include multiple CSS files into my PHP using only one <link> in the head of the document.

 

I've got it working for javascript, however CSS doesn't seem to want to work..

 

This is what I have in the head of my document

 

<script src="/min/general.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="/min/general.css" type="text/css" media="all" />

 

in my .htaccess file, I have a rule that checks for 'min/' at the start of the URL, and sets a get variable, f, accordingly:

 

RewriteRule ^min/(.+)$        index.php?f=$1 [QSA,L]

 

Now in index.php, I have an if statement that checks if 'f' is set, and then processes an ini file to get all CSS file listed in that ini.

 

if(isset($_GET['f'])){
        $file = $_GET['f'];
 
        $ini = parse_ini_file("../min.ini", true);
 
        foreach($ini[$file] as $f){
            //echo '<style type="text/css">';
            include $f;
            //echo '</style>';
        }
    }

 

So that will include all the files I need, whether that be js or CSS, however the CSS doesn't apply to the page.. If I put an alert(1) in my javascript, that will fire off perfectly, and if I click on view source, and click on the link to the css, then my CSS code will display in the browser (as if it were a text document), or if I un-comment the two echos in the foreach, it will actually apply the CSS.

 

So basically the files are being found perfectly, however the CSS isn't being applied to index.php.

 

Does anyone know what else I need to do?

 

P.S. Here is my ini file:

 

[general.css]
website.css = "/css/style.css"
 
[general.js]
website.js = "/js/script.js"

 

Thanks in advance!

Denno

[haku]

When you view the HTML source of the page, do you see the CSS file in the head of the document?

[denno020]

Thanks for the reply mate,

 

Viewing the HTML source shows just what I've put in the original post, which is:

<link rel="stylesheet" href="/min/general.css" type="text/css" media="all" />

 

If I then click on the /min/general.css link in the href, another 'page' will open showing either the source code, or a CSS formated page (depending on whether I have echo'd the style tags around it)

[haku]

If the path to the file is correct, then there is no reason it should not be working. CSS files can be added at any point, even dynamically after page load (using JavaScript). Are you sure that the CSS in question is using the correct selectors?

 

For proper bug testing purposes, try hardcoding your <link> tag directly into the document and see what happens. That will at least tell you if it's a problem with the CSS file itself, or the method you are using to include it.

[denno020]

Changing the link tag to this:

<link rel="stylesheet" href="/css/style.css" type="text/css" media="all" />

makes the CSS work perfectly..

 

So that would mean it's the inclusion process that is letting me down..

[haku]

Does the file /min/general.css exist?

[denno020]

No. That's the point though. my htaccess picks up the URL, puts 'general.css' into a GET variable for index.php, and then I use that variable to check against the 'key' from the INI file..

[haku]

I'll be honest, you've lost me on what you are trying to do.

[denno020]

That's okay.. I'll try and explain it better.

 

Basically I'm trying to implement a minify type scenario, where all css files are loaded up, 'minified', and then served to the page, however instead of doing any minifying, I just want the files to be included.

 

So you can see in my htaccess file that I posted above, I check for any url's that start with min/, then grab the rest of the URL after that, which is then passed to the index.php page as a GET variable called f.

 

Then in index.php, I'll check to see if 'f' is set, and if it is, I'll open up my min.ini file (which has a list of all the css files and all the js files that are associated with my site) using parse_ini_file(), separating each section (general.css or general.js) into their own sub-array of $ini. After that, I loop through the array for whichever files I'm trying to access, which was originally passed into the index.php page through GET as f (so $ini['general.css'][] or $ini['general.js'][]), and then using the value for each entry in that section of the ini file, just include the file (include $f).

 

I hope that makes more sense..

 

Thanks for your comments so far though, nice to know someone is having a crack at helping me out.

[haku]

Ok, so is the output of this code visible when you view the source:

 

 

        foreach($ini[$file] as $f){
            //echo '<style type="text/css">';
            include $f;
            //echo '</style>';
        }

?

[denno020]

No it's not.

 

When I view page source, I see exactly what I've shown a couple of times above

 

<script src="/min/general.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="/min/general.css" type="text/css" media="all" />

Along with the rest of the html markup - body tag etc

 

If I uncomment the style tags, then when I click on the href for the link tag (when viewing the source), it will open a new page that then shows the styling that I've set.

 

My assumption was that the <link> href would trigger the .htaccess, which would then allow index.php to include the css files. It works perfectly for the js files, but not for CSS.

 

I just had a thought that the reason it's working for js files and not css is because the js one get's triggered first, and because I have the L flag in my .htaccess, that might have stopped any processing of further rules, however that wasn't the case, js still worked perfectly no matter which order it was in..

 

If they were both not working then I'd know that the was something wrong with my logic, the fact that js works fine and CSS doesn't work at all has really got my stumped :/..

[denno020]

I've just checked the Chrome console, I'm getting this error on page load:

 

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://porties.local/min/general.css".

 

So it looks like the CSS file that is being included doesn't satisfy the text/css mime type..

 

I'm about to start looking down this path for a solution, but this is my CSS file, very basic, so not sure where I could be going wrong:

 

 
/* 
    Document   : style.css
    Created on : Mar 23, 2013, 11:50:28 PM
    Author     : Denno
    Description:
        Purpose of the stylesheet follows.
*/
 
root { 
    display: block;
}
 
body{
    background-color: blanchedalmond;
}

[denno020]

I managed to fix the problem! .

 

It had everything to do with the MIME type.

 

For anyone who is curious, as I'm sure you are haku, I added an if statement into index.php, which ran a simple preg match for either .css or .js. Then inside the if/else, I set the header using header('Content-Type: text/css'); (or header('Content-Type: text/javascript'); for files ending with .js), and then included the file.

 

So now my index.php code looks like this:

 

 if(isset($_GET['f'])){
        $file = $_GET['f'];
        $ini = parse_ini_file("../min.ini", true);
        foreach($ini[$file] as $f){
            if(preg_match("/^.*\.css$/", $f)){
                header('Content-Type: text/css');
            }else{
                header('Content-Type: text/javascript');
            }
            include $f;
        }
    }

 

It works perfectly fine now .

 

Thanks for talking through it with me haku, muchly appreciated.

Edited March 24, 2013 by denno020

[haku]

Sorry I couldn't actually help, but glad you got it worked out.