You are here: Daniel Dumas » Blog, CSS, PHP »

Separating CSS Style sheet for Different Browsers using PHP

Separating CSS Style sheet for Different Browsers using PHP

Hi everyone today im going to start my tips / tutorials in web development, and i will focus today on separating a stylesheet for different browsers. if you read my last post i talked about separating my blog style sheet using php because IE6(Internet Explorer 6.0) handled my layout differently than version 7.0 and other browser like Firefox, Opera, Safari and Google Chrome. actually the only problem that i encountered with IE6 is its incompatibility to render transparent .PNG images and some spacing issues, the transparent corners of my images becomes grayish when i use IE6 to access my site. so what i did is.. i use PHP to display .GIF images when the visitor is using IE6 and .PNG when not. . i use the function String Find and the Super Global Varialble $_SERVER to get my visitors browser information. .

here is the actual code that i use. .

<?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>
<?php if (strstr($browser, "MSIE 6.0")) { ?>
<link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />
<?php }else{ ?>
<link rel="stylesheet" href="default.css" type="text/css" media="screen" />
<?php } ?>

$_SERVER['HTP_USER_AGENT'] will return the users browser information, which i inserted in the variable $browser, then i use the string function strstr which is String Find. for IE6 use “MSIE 6.0″, IE7 “MSIE 7.0″ for all versions of Internet Explorer just use “MSIE”.

to separate styles of other browser you may use the following in the string find function. .

IE – “MSIE”

Firefox – “Firefox”

Safari – “Safari”

Opera – “Opera”

Chrome – “Chrome”

for specific browser version just type space after the browser name then type the version number.

if you are separating style only for Internet Explorer you may also use Conditional Statement

this does not require PHP or Javacript.

the code is.

<!--[if IE]>
// put your ie stylesheet here
<![endif]-->
<!--[if !IE]-->
// put your default stylesheet here
<![endif]-->

Discussion

  1. you don’t need to separate the stylesheet if your problem is the PNG compatibility in IE6.. there’s a PNG fix for IE6 that you can use ^__~

    use this link: http://p14coop.com/pngfix.js ^_^

    • Daniel says:

      thanks jehz hehe i’ve seen .png fix using javascript before from other site but i didnt use it coz i dont know javascript yet eh hehe. .i dont wanna use things that i dont know yet kasi natatanga ako eh hehe. .thanks for the link by the way i’ll use it after i finished my javascript study hehe i’ll study first starting today wahehe. .para maintindihan ko yung function ng code. .actually di lang yun problem ko sa ie6 pati sa hover sa css ung background bagal magload eh. .kaya i separate it nalang muna, aral muna ako javascript. . hehe ;) thanks

  2. Mojics says:

    Hehehee.. Ayus.. Yan… Pero do you have CONDITION on SAFARI? Mostly like kasi IE, FIREFOX and SAFARI ung nemesis ng isang web developer and how it look the same on this three browser.

    one of the useful ung link ni Jehz and me myself used it and some HTC file just google n lang..

    Great move on separating IE, FIREFOX and SAFARI CSS para organized ang css code for this 3 browsers para hindi ka malito..

    • Daniel says:

      YO! Mojics thanks for visiting my blog. .ahmm teka what do you mean CONDITION sa SAFARI? kung iniba ko din yung style ko sa SAFARI? ahmm kung yun nga hehe.. eh di ko na iniba yung Style ko for safari kasi sa 5 browser na gamit ko all stable latest version ng IE, FIREFOX, SAFARI, OPERA and new GOOGLE CHROME the same naman yung layout. .yun lang talaga sa IE6 iba yung labas ng .png image. .kaya since i dont know javascript yet. .i just separate the style of IE6 to display .GIF images instead of .PNG when the visitors browser is IE6..

  3. Very nice information. This is the information that I’ve been looking for. I’ve been looking for this throughout the web however they are not as informative as this

  4. Frreelz says:

    Hi
    I am trying to use the code to change style sheets. I got it working perfectly for chrome but when I add on for another browser I get a php error saying unexpected end on the last line of the page.
    I tried adding this after the first one

    when I add that thats when I get the error. Other then that great tip very useful

  5. Richard says:

    I have to say thank you so much I have been looking for a solution that is W3C validated. I saw php solutions before but it seemed too complicated for my level and just wanted a php code to pull out different style sheets for different browsers. I cant thank you enough. If was any old site it would be ok to use the hacks that are shown all over the web but for my coursework everythign has to be w3c valid. THANK YOU SO MUCH!

  6. Chantal says:

    Hi… Please help! I am tearing my hair out: for ome reason IE6 will not call up the commented style sheet. I am obviously doing something horrible wrong:

    Please help!

  7. Thanks for the information. Once I switch my main site from html to php, I will probably end up using this code. I really hate that IE6 doesn’t display my site properly.

    I also like your site’s header, that’s funny! :B

    Signupandmakemoney’s last blog post..Cash Solos is a new traffic site offering a sign up bonus

  8. [...] figured out how to do this for WordPress after reading this post. I then just thought about how to apply it to WordPress and the above solution is what I came up [...]

  9. Njegos says:

    You code worked great for me.. i just wanted to point one thing to everybody that use this code for separating stylesheets for multiple browsers… I made separate styles for Safari and Chrome and noticed that has this signature :
    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.32 Safari/532.0

    So somebody using Chrome could accidently load stylesheet that are used with following switches “Safari” and “Mozzila”..
    Just by adding ” AND !strstr($browser, “Chrome”)” into IF statement for Safari and Mozzila ,problem is fixed…

  10. Mike says:

    Thanks a lot. I searched all day for this answer. I had separate style sheets for all the IE browsers, but then suddenly I had trouble with Chrome and Firefox using the same stylesheet. There was no easy way to separate them out until I found your script. Here is how I used it:

Leave a Reply





Spam protection by WP Captcha-Free