Separating CSS Style sheet for Different Browsers using PHP
Posted by Daniel at 10:25 pm
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]-->
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 ^_^