Cross Browsing can be tricky sometimes, as a ThemeForest author we try to give our buyers the best possible experience in all the browsers. I’ve been using the CSS Browser Selector in my WordPress themes but the user need to have Javascript enabled whether this is a problem or not I’ve been trying to find a solution. In this quick tip I’ll show you a simple snippet that you need to add to you WordPress functions.php.
1.- Add this to your Functions file
You need to create the file functions.php If the file isn’t created. Paste the following code into the file:
/*----------------------------------------------*/
/* Browser detection body_class() output */
/*----------------------------------------------*/
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;
}
2.- Open your Header File
Add this to the body class:
<body <?php body_class(); ?> >
3.- Crossbrowsing
Now if you have a problem with any browser you just need to prepend your selector with the browser prefix, example:
.opera #yourSelector p { color:red; }
Great snippet! Thanks for sharing!
Glad you liked mate.
Pretty sweet little gem you got there. That should come in handy in future projects. I bet there’s a way to drill down and add ie6 or ie7 not just ie? that would be a huge benefit IMHO.
I’m sure there is a way bro. I’ll check it out.
Wonderful article:) I will need some time to examine your points.
Thanks tora.