Give Browser Specific CSS Files With PHP

Posts by Category

Recent Articles

Make every website display perfectly in every browser! A PHP script that provides a simple way to accomplish this feat without spending countless hours on one style sheet. The best way to do this is to deliver the user a style sheet that perfectly matches their browser.

If you are like me, you hate having to make one CSS stylesheet work for every browser. Of course its much easier to adjust the stylesheet to work for Opera, Firefox and Safari than it is for Internet Explorer, especially Internet Explorer 6.


The reason this is so difficult is because different browsers render web pages differently. Microsoft, the makers of the notorious Internet Explorer series, do not believe they have to comply with with the W3C. The W3C sets the standards for the web so that their is uniformity among web designers and developers.

Alright, so if you want to deliver a different CSS file for different users, their are two options. You can use Javascript or Serverscripting. Javascript works ok, as long as the user does not have javascript disabled. Most user do not, however some users do disable javascript for various reasons. With javascript disabled, the correct CSS file would not be delivered. Server scripting on the other hand, works every time. The user is not able to turn it off.

The server detects what browser the user is using. It looks in the css.php file and sends the correct version of the CSS file to the user’s browser, changing the header of the file to ‘css.css’.

I use a series of includes inside of the file to include the proper CSS file. You can however, just keep all of the CSS in the file without the includes if you don’t like switching back and forth between files, its just a personal preference.

In order to use the php file simply link to it like you would a CSS file in the head section:

  1.  
  2. <link rel="stylesheet" href="css.php" type="text/css" />
  3.  

I did not write this script, I found it open source somewhere on the web, and I have not been able to locate it again. If you know where the original is, please let me know so I can link to it.

  1.  
  2. <?php
  3.  
  4.  
  5.         header(‘Content-type: text/css’);
  6.  
  7.  
  8.         $browser = array (
  9.  
  10.  
  11.                 "MSIE", // parent
  12.  
  13.  
  14.                 "OPERA",
  15.  
  16.  
  17.                 "MOZILLA", // parent
  18.  
  19.  
  20.                 "NETSCAPE",
  21.  
  22.  
  23.                 "FIREFOX",
  24.  
  25.  
  26.                 "SAFARI"
  27.  
  28.  
  29.         );
  30.  
  31.  
  32.         $info[browser] = "OTHER";
  33.  
  34.  
  35.         foreach ($browser as $parent) {
  36.  
  37.  
  38.                 $s = strpos(strtoupper($_SERVER[‘HTTP_USER_AGENT’]), $parent);
  39.  
  40.  
  41.                 $f = $s + strlen($parent);
  42.  
  43.  
  44.                 $version = substr($_SERVER[‘HTTP_USER_AGENT’], $f, 5);
  45.  
  46.  
  47.                 $version = preg_replace(‘/[^0-9,.]/’,”,$version);
  48.  
  49.  
  50.                
  51.  
  52.  
  53.                 if (strpos(strtoupper($_SERVER[‘HTTP_USER_AGENT’]), $parent)) {
  54.  
  55.  
  56.                         $info[browser] = $parent;
  57.  
  58.  
  59.                         $info[version] = $version;
  60.  
  61.  
  62.                 }
  63.  
  64.  
  65.         }
  66.  
  67.  
  68. ?>
  69.  
  70.  
  71.  
  72.         <?php
  73.  
  74.  
  75.                 if (($info[browser] == "MSIE") && ($info[version] == 7)) {
  76.  
  77.  
  78.                         echo include("ie7.css");
  79.  
  80.  
  81.                 } else if (($info[browser] == "MSIE") && ($info[version] < 7)) {
  82.  
  83.  
  84.                         echo include("ie6.css");
  85.  
  86.  
  87.                 } else if ($info[browser] == "FIREFOX") {
  88.  
  89.  
  90.                         echo include("style.css");
  91.  
  92.         } else if ($info[browser] == "SAFARI") {
  93.  
  94.  
  95.                         echo include("style.css");
  96.                        
  97.                 } // you can add the other browsers in the same manner if you like
  98. else {
  99.  
  100.  
  101.                         echo include("style.css");
  102.  
  103.  
  104.                 }
  105.  
  106.  
  107.         ?>
  108.  
  109.  
  110. }
  111.  

Give it a try, if you have any problems or questions, let me know and I will do my best to answer them ;)

Leave a Reply