Jump to content
Sign in to follow this  

Browser-based CSS using PHP.

Recommended Posts

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:


$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:


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 by Fearless Staff

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  


Important Information

By using this site, you agree to our Terms of Use.