There have been situations where I’ve been coding something in Thesis, and there are cross-browser issues. Don’t get me wrong – 99% of the time this doesn’t happen, but on the rare occasions they do crop up, I’ve come up with a solution.
Now, you could go down the classic route, and add conditional stylesheets to the header like so:
/*
* function custom_conditional_statements()
*
* @desc: Conditional IE Statements
*
*/
function custom_conditional_statements() {
?>
<!-- IE6 Only -->
<!--[if lt IE 7]>
... IE6 Styles ---
<![endif]-->
<?php
}
add_action( 'wp_head', 'custom_conditional_statements');
And this is great, but there have been rare situations where there have been small issues in other browsers, like opera and firefox. For this I turned to body classes. I first came across this article on artofblog showing you how to add custom classes to the body tag. I used this article as a basis. I also looked through countless stackoverflow threads for tips on getting the user agent. Now I did come across some other websites with a similar solution to mine – and my code is based upon that written by Thesis Blogs. Their solution deals with the Internet Explorer family, and I extended it to grab other user agents.
/*
* function custom_body_classes()
*
* @desc: Add custom classes to the <body> tag
*
*/
function custom_body_classes($classes) {
$browser = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/mozilla.*rv:([0-9a-z\+\-\.]+).*gecko.*/si', $browser)) {
$classes[] = 'firefox';
}
elseif (preg_match('/mozilla.*opera ([0-9a-z\+\-\.]+).*/si', $browser) || preg_match('/^opera\/([0-9a-z\+\-\.]+).*/si', $browser)) {
$classes[] = 'opera';
}
elseif (preg_match("/MSIE/", $browser)) {
$classes[] .= 'ie';
if (preg_match("/MSIE 6.0/", $browser))
$classes[] .= 'ie6';
elseif (preg_match("/MSIE 7.0/", $browser))
$classes[] .= 'ie7';
elseif (preg_match("/MSIE 8.0/", $browser))
$classes[] .= 'ie8';
elseif (preg_match("/MSIE 9.0/", $browser))
$classes[] .= 'ie9';
}
return $classes;
}
add_filter('thesis_body_classes', 'custom_body_classes');
Now this method isn’t 100% foolproof as you can spoof your user agent. But for most situations, it should suffice. You’d target the browser like so in your custom.css file:
/* IE6 Specific Menu Styles */
.ie6 .menu {
background: #fafafa;
color: #444;
}
I’d be interested in hearing how you target other browsers in – please leave a comment below sharing your method.
{ 3 comments… read them below or add one }
Why not just use something like Modernizr or Prefixr?
Much better to use conditional statements. Using browser-based classes makes caching impractical unless you’re storing a cached file of every page for every browser that hits it. Conditional styling is also much more foolproof; as you said, browser detection can be spoofed.
Totally agree – I only go for the php option when I really have to.