Browser-based CSS using PHP.

[Heretic121]

I'm not going to overly explain this, unless people actually need me to.

I found out a while ago that I could add PHP into my CSS so that PHP could give me CSS files based on the browser accessing the page. Now you can do this in one of two ways. You can either have two separate CSS files, either stored in a text file on your server or stored in your MySQL database, or you can have a CSS file with PHP in it that returns a different output based on the browser used. I'm going to talk about the later here.

 

Now, I would like to think that most people know that when you include() a file in PHP it'll output any text that isn't inside start and end tags. If you do, then you're already half way to working out that you can actually edit CSS, and Javascript, files before they're served to the client.

 

Now then, the easiest way to check what browser someone is using is by using browscap.ini (For directions on installing browscap.ini check this PHP documentation page, for get_browser(), in the Notes section.) and that's what I'll be using in this explanation.

 

So, in the CSS file you want to add the PHP code to the first line should be:

 

<?php
$browser = get_browser(null,true);
?>

 

This will return an array with all the information it could find about the browser the user is currently using.

 

In one of the CSS files I created using this method I also added some definitions for IE and whether the browser was less than version 8 or not. I did this like so:

 

<?php
define('_IECHECK_',($browser['browser'] == 'IE')?true:false);
define('_IELT8_',(_IECHECK_ && $browser['version'] < 8)?true:false);
?>

 

After you've set yourself up, you add the PHP into the file like normal:

 

<?php echo (_IELT8_)?"top:15px;\n":"top:8px;\n"; ?>

 

Once you've created your PHP/CSS file you then include it like a normal PHP. This will mean that the PHP inside the CSS file will be processed as it should. I should also point out that if you create the CSS file as a standalone CSS file, you will need to change the extension to .php (example.css.php) so that it is processed as PHP but remember that the browser will then treat this as the MIME type text/html so you tell the browser that it's actually CSS using this:

 

<?php header("Content-type: text/css"); ?>

 

You will also need to do this before you include the file as well, unless you're including it as inline CSS.

 

I think that about covers it. If you have any questions let me know and I'll give you the best answers as I can. I hope this is useful to someone.

Edited March 30, 2018 by Fearless Staff