I spent several hours over the weekend trying to google an easy way to simply change CSS based on the browser type. So i sought to develop a PHP CSS selector (i.e. a quick solution to a “only load this CSS file for this browser” function). I searched and searched - and did not seem to find anything that made any logical sense to me. So i decided to try to load a separate CSS file dynamically based on the $_SERVER[’HTTP_USER_AGENT’]; string value.

I ran into several issues - including:
* not being able to properly escape the link HTML inside of a PHP string variable to get an echo $HTML_VAR is properly show up as html and not a string
* not being able to manually use PHP to change the header types of php files (this would be a solution that basically replaces CSS with PHP files - which is something i have seen done to solve this problem but would not work in my particular LAMP configuration. If its a CSS file it should stay a CSS file IMHO - bad design to try to get my server to read PHP as CSS file i finally determined)

What i eventually develped is an assertion on the HTTP_USER_AGENT value - then based on a regular expression test for the ‘gecko’ string in the USER_AGENT value that will dynamically require-include a PHP file with a constant containing the HTML CSS link code(this can be easily modified to be much more granular - in this tutorial i kust did the cursory check for “gecko” in the AGENT string (firefox or mozilla) or ELSE).

Based on the above assertion - the PHP code will then include a remote PHP file with the actual HTML
code inside of an ENDH block (as a result of the issue faced above)

So what this will do in pseudocode is:

NOTE: Add the assertion PHP code into the header file or your .htm file or php files. CSSHTML is my constant value that will hold the proper link HTML for the required CSS stylesheet

<?php

$agent=$_SERVER['HTTP_USER_AGENT'];
if(ereg ("Gecko",$agent))
        {
         require('includes/moz.php');
        }
else 
        {
         require('includes/ie.php');
        }


echo CSSHTML;
?>

NOTE: Now create your browser sepcific links php config files. You can make one of these for each CSS sheet you might need for each browser class - mozilla, ie, or otherwise - or even more fun just Cascade any browser specific changes you need from a master CSS file. I just replaced the entire page to make the example easy to understand

<?php
//moz.php - put the CSS for your HTML pages between ENDH tags
$moz_html=<<<ENDH
<link rel="stylesheet" href="css/moz-style.css" type="text/css" />
ENDH;

define('CSSHTML',$moz_html);
?>

that’s it! This CSS cross-browser support solution is scalable, W3C compliant, and can work through IE7 or any other newer browser functions that try to handle any “hide the CSS link tricks” that you may have used in the past
(Eg: this kind of bad design: @import “null?\”\{”; ) As we are learning - all the browser trick methods in my opinion are going to break with the newest versions of the market leading browsers - use the selector in this tutorial to prevent that.
Hope you find this useful!