Jump to content

Browser-based CSS using PHP.


Heretic121

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:

 

<?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 by Fearless Staff
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

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