CSS merging with PHP

Question

I found this on a website,

css_loader.php

<?php
// First of all send css header
header("Content-type: text/css");

// Array of css files
$css = array(
    'main.css',
    'menu.css',
    'content.css'
);

// Loop the css Array
foreach ($css as $css_file) {

    // Load the content of the css file 
    $css_content = file_get_contents($css_file);

    // print the css content
    echo $css_content;
}
?>

Add CSS to the page

<link href="css_loader.php" rel="stylesheet" type="text/css" />

It looks very logical but when i applied it to my page, it didnt work.

is that possible to merge CSS files with this way ?

Of course it is possible. Why didn't it work for you? No errors? Nothing? — Brad
– Brad, Commented Mar 25, 2012 at 18:44
What "doesn't work" mean? when you access css_loader.php directly from your browser and save the ourcome, what do you see? — Yaniro
– Yaniro, Commented Mar 25, 2012 at 18:45
How did you apply it to your page? Headers don't work after you already output to the browser. Also CSS needs to be put in the <head> section not the body so it makes all the difference about how you applied this. — sdjuan
– sdjuan, Commented Mar 25, 2012 at 18:46
i can see all CSS content but my page looked like has no CSS somehow. no error :S — Utku Dalmaz
– Utku Dalmaz, Commented Mar 25, 2012 at 18:46
404 handler just-in-time resource building: I do this with real-time image resizing (such as thumbnails). The idea is, you set your page/app to call for the generated resource (such as combined CSS, or smaller image) at a static URL, then configure the server's 404 error document to a script which, based on the requested URL, builds the requested file, saves it at the requested location, sets the response code to 200, then returns it to the browser. The next request for the same resource will find the generated file and return it without a 404 event. Re-deploying should delete expired files. — Umbrella
– Umbrella, Commented Jul 18, 2015 at 15:37

René Höhle · Accepted Answer · 2015-04-24 23:38:00Z

17

You have an mistake in your code, here's the correct code:

<?php
// First of all send css header
header("Content-type: text/css");

// Array of css files
$css = array(
    'main.css',
    'menu.css',
    'content.css'
);

// Prevent a notice
$css_content = '';

// Loop the css Array
foreach ($css as $css_file) {
    // Load the content of the css file 
    $css_content .= file_get_contents($css_file);
}

// print the css content
echo $css_content;
?>

And I hope the files are in the same folder. Perhaps you should use __DIR__ or dirname(__FILE__) to get the relative path to your files.

edited Apr 24, 2015 at 23:38

answered Mar 25, 2012 at 18:48

René Höhle

27.4k22 gold badges78 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Utku Dalmaz Over a year ago

yeah fixed this. but still CSS doesnt apply to page.

René Höhle Over a year ago

I have tested this case. Perhaps you have an error in your php file. call the file direkt and test it. When one of the file is missing you get Warning: file_get_contents(main.css) and into an text/css stream the browser can't handle it.

Baba · Accepted Answer · 2012-03-25 19:03:33Z

13

Stoney has shown you your error .... now for a more improved version

        header('Content-type: text/css');
        ob_start("compress");
        function compress($buffer) {
            /* remove comments */
            $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
            /* remove tabs, spaces, newlines, etc. */
            $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
            return $buffer;
        }

        /* your css files */
        include('main.css');
        include('menu.css');
        include('content.css');
        ob_end_flush();

answered Mar 25, 2012 at 19:03

Baba

95.3k29 gold badges172 silver badges222 bronze badges

Comments

John Louie Biñas · Accepted Answer · 2013-07-30 00:45:07Z

<?php

// Array of css files
$css = array(
 'first.css',
 'second.css'
);

$mergeCSS = "";
// Loop the css Array
foreach ($cssas $css_file) {
    // Load the content of the css file 
    $mergeCSS.= file_get_contents($css_file);
}

// Remove comments also applicable in javascript
$mergeCSS= preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $mergeCSS);

// Remove space after colons
$mergeCSS= str_replace(': ', ':', $mergeCSS);

// Remove whitespace
$mergeCSS= str_replace(array("\n", "\t", '  ', '    ', '    '), '', $mergeCSS);

//Generate Etag
$genEtag = md5_file($_SERVER['SCRIPT_FILENAME']);

// call the browser that support gzip, deflate or none at all, if the browser doest      support compression this function will automatically return to FALSE
ob_start('ob_gzhandler');

// call the generated etag
header("Etag: ".$genEtag); 

// Same as the cache-control and this is optional
header("Pragma: public");

// Enable caching
header("Cache-Control: public ");

// Expire in one day
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400 ) . ' GMT');

// Set the correct MIME type, because Apache won't set it for us
header("Content-type: text/javascript");

// Set accept-encoding
header('Vary: Accept-Encoding');

// Write everything out
echo($mergeCSS);

?>

This code also compatible for merging javascript

Emad Ha · Accepted Answer · 2015-03-02 12:17:00Z

1

I wrote this class for such needs, it can render the output and compress it, later i can add write a file of the end results, link here

edited Mar 2, 2015 at 12:17

answered Mar 2, 2015 at 12:05

Emad Ha

1,21616 silver badges33 bronze badges

Comments

Albi · Accepted Answer · 2012-04-16 02:08:37Z

0

hey have you checked if your server appends a few lines to your code (for example an analytics code) . if so you must add a rule in .htaccess that stops the server for adding lines to your code. this can be done by adding this to .htaccess - "php_value auto_append_file none" without quotes of course . i hope this helps

answered Apr 16, 2012 at 2:08

Albi

1,47815 silver badges23 bronze badges

Collectives™ on Stack Overflow

CSS merging with PHP

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related