Last updated August 26, 2009. Created by kanani on November 7, 2007.
Edited by chicagomom, NonProfit, bekasu, LeeHunter. Log in to edit this page.
Important Note: Browser detection as described below does not survive Drupal caching. The page cache will use the included foo.css that was required by the browser that triggered the caching of the page.
Checking the user-agent string is known to have problems. Single cases like specific browsers are problematic. The browser you will have the most problems with are Internet Explorer.
The best way to do it from 2006 and on is to use conditional css includes that target IE specifically and build everything else on the Web Standards browsers.
This module will help you along the way: http://drupal.org/project/conditional_styles
Browser specific style sheets
One workaround is to use the conditional syntax for IE Browsers and then if you need a little extra CSS for Safari/Opera, etc use a little jQuery to grab the appropriate sheet and drop it into the page.
Of course the method below breaks down if JavaScript is disabled.
var loadBrowserCSS = function(){
$postUrl = "ajax_browser_css_load.php";
$.ajax({
type: "POST",
url: $postUrl,
success: function(xml){
$(".browser_specific_sheets").html(xml);
}
});
}
if (Drupal.jsEnabled) {
$(document).ready(function() {
loadBrowserCSS();
});
}
<span class="browser_specific_sheets"> </span>How many hours have you spent debugging CSS to get it to work in most browsers?
Ever wish you could just specify CSS for that ONE version of IE that doesn't agree with the rest of the siblings in the collective, or any other misbehaving browser?
This shows how to specify separate stylesheet 'overrides' based on the user agent identification. A stylesheet specific to any browser? Bliss!
So here's how to:
Insert the following line into page.tpl.php, just below the tag that outputs the system styles:
<?php print browser_specific_sheet($directory); ?>My header looks like this:
<head>
<?php print $head_title; ?>
<?php print $head; ?>
<?php print $styles; ?>
<?php print browser_specific_sheet($directory); ?>
<?php print $scripts; ?>
</head>This simply outputs an extra style tag, generated by the following function that you insert into your themes' template.php:
<?php
function browser_specific_sheet($directory=''){
$user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
$prepend = '<style type="text/css" media="all">@import "/'.$directory.'/';
$append = '";'."</style>\n";
switch (true){
case strchr($user_agent, 'msie 5.0'):
return $prepend.'ie_5.0.css'.$append;
case strchr($user_agent, 'msie 5.5'):
return $prepend.'ie_5.5.css'.$append;
case strchr($user_agent, 'msie 6.0'):
return $prepend.'ie_6.0.css'.$append;
}
return '<!-- '.$user_agent.' -->';
}
?>These cases are specific to IE 5, 5.5 and 6, you can add or remove case statements for any preferred browser, as long as you pick something unique to that browser's agent identification.
For IE 5 the following tag is rendered:
<style type="text/css" media="all">@import "/sites/all/themes/themename/ie_5.0.css";</style>All that's left to do is create the style sheets 'ie_5.0.css', 'ie_5.5.css', 'ie_6.0.css' in your theme directory. If there is no case statement for a browser (say Firefox in this case) the following HTML comment is rendered:
<!-- user agent: mozilla/5.0 (x11; u; linux i686; en-us; rv:1.8.1.6) gecko/20061201 firefox/2.0.0.6 (ubuntu-feisty)-->If you wanted to specify a style sheet containing style overrides specifically for Mozilla Firefox, you'd add the following case statement to the browser_specific_sheet function:
<?php
case strchr($user_agent, 'firefox/2.0.0.6'):
return $prepend.'my_firefox_styles.css'.$append;
?>