How to Apply Custom CSS to Specific Browsers

It’s common knowledge that not every browser is created equally. Often, you will need to write some custom CSS for a specific browser because there’s either too much margin top or not enough padding in that div. Whatever the case may be, here’s an easy way to get around it.

Add the code below to your functions.php file and you’re off to the races.

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';
	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>

You will now have a class available in your body {} element that you can style. For example,

<body class="home logged-in opera">

And here are some examples of how to style it in the CSS. You will typically make these adjustments in your style.css file.

body.ie {
	margin-top:15px;
}

/* Or something in Opera */

body.opera #content {
	padding:15px;
	font-size:110%;
}

HT Nathan Rice

Leave a Reply

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