Skip to content

CSS tricks for Cross Browser Issues

if you a web developer, this is one the most common issue when you develop a website, yes… some css script not working properly on different browsers, i know that feel bro..hahah…

my idea is add multiple class name contains browser name, browser version & platform  to body tag, so everytime you open it on different browser you will see different class name on body tag.. here example of body tag

<body class=”bname-google_chrome bversion-39_0_2171_95 bplatform-windows”>

with above trick, you can write css script for different browser

to add the class name like above, use following script:

 

<?php
function cleanUpText($text)
{
return strtolower(preg_replace(‘/[^\p{L}\p{N}]/u’, ‘_’, $text));
}
function getBrowser()
{
$u_agent = $_SERVER[‘HTTP_USER_AGENT’];
$bname = ‘Unknown’;
$platform = ‘Unknown’;
$version= “”;

//First get the platform?
if (preg_match(‘/linux/i’, $u_agent)) {
$platform = ‘linux’;
}
elseif (preg_match(‘/macintosh|mac os x/i’, $u_agent)) {
$platform = ‘mac’;
}
elseif (preg_match(‘/windows|win32/i’, $u_agent)) {
$platform = ‘windows’;
}

// Next get the name of the useragent yes seperately and for good reason
if(preg_match(‘/MSIE/i’,$u_agent) && !preg_match(‘/Opera/i’,$u_agent))
{
$bname = ‘Internet Explorer’;
$ub = “MSIE”;
}
elseif(preg_match(‘/Firefox/i’,$u_agent))
{
$bname = ‘Mozilla Firefox’;
$ub = “Firefox”;
}
elseif(preg_match(‘/Chrome/i’,$u_agent))
{
$bname = ‘Google Chrome’;
$ub = “Chrome”;
}
elseif(preg_match(‘/Safari/i’,$u_agent))
{
$bname = ‘Apple Safari’;
$ub = “Safari”;
}
elseif(preg_match(‘/Opera/i’,$u_agent))
{
$bname = ‘Opera’;
$ub = “Opera”;
}
elseif(preg_match(‘/Netscape/i’,$u_agent))
{
$bname = ‘Netscape’;
$ub = “Netscape”;
}

// finally get the correct version number
$known = array(‘Version’, $ub, ‘other’);
$pattern = ‘#(?<browser>’ . join(‘|’, $known) .
‘)[/ ]+(?<version>[0-9.|a-zA-Z.]*)#’;
if (!preg_match_all($pattern, $u_agent, $matches)) {
// we have no matching number just continue
}

// see how many we have
$i = count($matches[‘browser’]);
if ($i != 1) {
//we will have two since we are not using ‘other’ argument yet
//see if version is before or after the name
if (strripos($u_agent,”Version”) < strripos($u_agent,$ub)){
$version= $matches[‘version’][0];
}
else {
$version= $matches[‘version’][1];
}
}
else {
$version= $matches[‘version’][0];
}

// check if we have a number
if ($version==null || $version==””) {$version=”?”;}

return array(
‘userAgent’ => cleanUpText($u_agent),
‘name’ => cleanUpText($bname),
‘version’ => cleanUpText($version),
‘platform’ => cleanUpText($platform),
‘pattern’ => cleanUpText($pattern)
);
}
$ua = getBrowser();

?>
<script type=”text/javascript” src=”<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS); ?>sp/jquery/jquery-1.7.1.min.js”></script>
<script>

jQuery.noConflict();
jQuery(document).ready(function(e) {

jQuery(‘body’).addClass(‘bname-<?php echo $ua[‘name’] ?>’);
jQuery(‘body’).addClass(‘bversion-<?php echo $ua[‘version’] ?>’);
jQuery(‘body’).addClass(‘bplatform-<?php echo $ua[‘platform’] ?>’);
});
</script>

Share

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *