Question

I’ve been working on a CSS minifier for PHP that’s done except for one thing:

I’d like to have it detect the user’s browser and determine whether the user needs border-radius, -webkit-border-radius, -moz-border-radius, etc. So that I dont have to use the very long and annoying groups.

This would either detect all instances of -webkit, -moz, etc. border-radius and merge them OR I would place {vendor}border-radius into the CSS file which would then be replaced by either -webkit-, -moz-, or nothing. The first one is ideal because I’d like for it to be expandable to other projects.

For the life of me, I can’t figure out a working PHP implementation that accurately detects which prefix to use (and I’ve googled/searched everywhere I could think of).

Any help would be much appreciated!

Answer 1

The main issue here is that PHP (the server) won’t know the CSS capabilities of your browser off-hand (the client). The only information that’s remotely close to identifying a browser that would get sent to PHP is the user-agent string. Even then, you would still need to research the CSS capabilities of a specific version of a specific browser or engine, based on what you find through parsing the user-agent string, and hard-code some decision-making code based on that information.

I think that’s the main liability of trying to use server-side code to determine the CSS capabilities of a client. There may be others, but this seems the biggest hurdle, unfortunately.

On the client side, there exist scripts like -prefix-free that make adding prefixes a trivial job; just serve your minified CSS with only the unprefixed properties and rules, and let the script add the prefixes for you based on what it knows about the browser (that the server doesn’t).

The first paragraph from this entry in its FAQ also seems worth a read:

“Something like this belongs to the server-side”

A server side script would need to add all prefixes, making the size of the CSS file considerably larger. Also, it should maintain a list of features that need prefixes, or add them all and unnecessarily bloat the stylesheet. -prefix-free automatically detects what needs a prefix and what doesn’t.

As well as an interview with its author, which it links to:

"This is something better done on the server. Do it once instead of on every pageload"

What -prefix-free exactly does, is impossible to do in the server. -prefix-free detects which features need a prefix and only adds it if needed. Also, it automatically detects which properties are available that need a prefix. It doesn’t have to keep lists of which prefixes to add for which features, everything gets feature detected, and thus is very future proof. With preprocessors, lists need to be maintained about this sort of stuff. Such lists are doomed to be incomplete and quickly get out of date. Every server-side prefixer I ever tried fails in a number of cases.

(Emphases mine.)