CSS parsing via PHP issue

PHP
1

Greetings everyone,

I have the following issue.

I’m trying to minimize my site’s loading time and requests and I thought that a css and js parser would be nice.

The js parser works fine (it just merges the files into a single one).

The css parser apart from merging some css files (all within a directory) it tries to cut the whitespaces to reduce its output size.

The code is as follows:


header('Content-type: text/css');
ob_start("compress_css");

function compress_css($buffer) {
	/* remove comments */
	$buffer = preg_replace('!/\\*[^*]*\\*+([^/][^*]*\\*+)*/!', '', $buffer);
	/* remove tabs, spaces, newlines, etc. */
	$buffer = str_replace(array("\\r\
", "\\r", "\
", "\	", '  ', '    ', '    '), '', $buffer);
	return $buffer;
}

/* your css files */
$files = scandir(".");

foreach ($files as $filename) {
	if (!preg_match("/(.css)$/", $filename))
		continue;

	echo file_get_contents($filename);
}

ob_end_flush();

Mainly it’s a snippet I found on a site, apart from the foreach loop.

In the index.html file of my page (I use templates), I include the file as a regular css file.


<link type="text/css" rel="stylesheet" href="styles/css.php" />
<script type="text/javascript" src="libs/js.php"></script>
<!--js line nothing to do with css, just copying it -->

The file is being displayed correctly when displayed by itself (i.e. http://example.com/css.php). The output is OK and every file is included.

When I try to view the page with IE 8, it displays just fine.
When I try to view the page with Firefox 3.6.13 it displays the page but the css file is not linked, thus not used even though it gets downloaded. I get a page as if no stylesheet is present. (Inline styles are being displayed since they have nothing to do with the external files).

It’s been bugging me for quite some time now.

Any thoughts most welcome,
-john

2

you could also do things like
$buffer = preg_replace(‘/\s*([{}])\s*/’, ‘$1’, $buffer);
removing all space before and after { and } chars.

you might be able to do similar for after :‘s, so:
$buffer = preg_replace(’/:\s+/', ‘:’, $buffer);

re that last : one – i’m thinking of color: red kind of situations, removing the space between those, but could a colon appear in other contexts where space after them is meaningful?; not sure, can’t think right now.

3

I really know nothing about this, but since you said “any thoughts welcome”, I’ll just observe that the css link points at a file called css.php. I’ve only ever seen the CSS file with a .css extension, so I’m not surprised if FF doesn’t recognize a .php file in that context. Just an observation, FWIW. :slight_smile:

4

you can’t strip all sapces out. you need some spaces. e.g.
div a { color: red }
can go down to
div a{color:red}
but not
diva{color:red}

also you’d be better off using a regex for the space matching because there could be any combination and number of white space types, so unless you’re going to parse the css more intelligently, which’d involve much more work, i’d suggest this line in place of the line replacing the spaces:

$buffer = preg_replace(‘/\s+/’, ’ ', $buffer); // replacing with one space not no spaces so as not to change div a to diva for example

5

maybe make use an already made css compression script from your script?

6

.php should be okay as the file is served with a tex/css Content-Type header. Don’t forget a cache header, as that’ll be more effective for performance than stripping white space.

What happens if you inspect the CSS in Firebug?

7

johnyboy, I really think that’s not a parsing issue, since even if I remove the callback function at the ob_start() function call, FF still doesn’t recognize the stylesheet.
Also with or without the whitespace removal the stylesheet still displays in IE8.

ralph.m, it might be the case, but still, I use the content-type header which should take care of that matter…
Or it’s just an FF error, not recognizing mime type headers.

It’s really weird…

8

Cranial-bore, I just missed your reply.

Here is the feedback from Firebug.
It seems everything is in order though…

Response Headers

HTTP/1.1 200 OK
Date: Sun, 06 Feb 2011 09:33:18 GMT
Server: Apache/2.2.14 (Win32) DAV/2 mod_ssl/2.2.14 OpenSSL/0.9.8l mod_autoindex_color PHP/5.3.1 mod_apreq2-20090110/2.7.1 mod_perl/2.0.4 Perl/v5.10.1
X-Powered-By: PHP/5.3.1
Keep-Alive: timeout=5, max=98
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/css


Request Headers

GET /ttonline_final/styles/css.php HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 FirePHP/0.5
Accept: text/css,*/*;q=0.1
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: http://localhost/ttonline_final/
Cookie: PHPSESSID=uscj3286jm7vbp73auuqcd78g5
x-insight: activate

and here is a screenshot of the CSS tab. It gets parsed ok…

Uploaded with ImageShack.us

9

Oh well, after careful reading of the css, I found there was an error in a css script file - double quotes at a background-image url definition.

It now works as it should be.

Damn graphic artists…

Thank you all for your time.
Really appreciated!