In my line of work, I usually deal with clients who want to have their sites display perfectly in every browser. Unfortunately for today's web designer, the browsers that are currently in use do not always agree on which is the correct way to render CSS. I'm not going to get into the 'Which Browser is Better' argument (even though it is Firefox 3), but I AM going to show you how to make your css woes go away with a nice little trick.
This is what I use on my drupal sites, but it can be used effectively on any php-based web cms or site.
First, if you haven't done so already, create a template.php file in your theme directory. If you already have a template.php file, just paste this code at the top. Make sure to change the code below so that 'mytheme' is replaced with your theme name.
- //=============================
- // Begin Browser Detector
- //=============================
- $browser = '';
- $navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
- $browser = 'opera';
- $dom_browser = true;
- }
- $browser = 'msie4';
- $dom_browser = false;
- }
- $browser = 'msie';
- $dom_browser = true;
- }
- $browser = 'chrome';
- $dom_browser = true;
- }
- $browser = 'safari';
- $dom_browser = true;
- }
- $browser = 'mozilla';
- $dom_browser = true;
- }
- $browser = 'ns4';
- $dom_browser = false;
- }
- else {
- $browser = false;
- }
- if ($browser) {
- $themeDirectory = drupal_get_path('theme', 'mytheme');
- drupal_add_css($themeDirectory.'/css/'. $browser .'.css', 'theme');
- }
- //=============================
- // End Browser Detector
- //=============================
What this does is detects the client's browser and then includes a css file. As you can see in the code, the $themeDirectory is being made from the drupal_get_path function, so the variable would be the 'sites/all/themes/mytheme' directory. You can easily replace that with your own path to the css files.
Now all that is left is to make the .css files. You can make a mozilla.css, msie.css, safari.css, ns4.css, chrome.css, and msie4.css .
To wrap up, put the .css files in the '/sites/all/themes/mytheme/css/' directory. That will automagically include the browser-specific css file that is needed. Using this technique, you can easily override any problematic css issues with browser-specific css. Happy Coding!
Thanks for the useful tutorial! Will be using this on my site. One question though: I have many .tpl files on my site, is there a good way to embed them in all of them at once?
include_once 'includes/browserDetection.php';And in the browserDetection.php file, replace the print line at the end with this:
Before:
print "<link rel='stylesheet' type='text/css' href='/$themeDirectory/css/$user_browser.css' />";After:
drupal_add_css("$themeDirectory/css/$user_browser.css", 'theme');This should add the correct css to every page. Untested.
Very good post, thanks a lot.
I have updated the code above to work in the template.php file, since this is the better place to put it anyways. Just follow the instructions above and you will be good to go!
I discovered that this solution requires that page-caching be turned off (see comments at http://drupal.org/node/65903 too). Another option that doesn't require this is client-side browser detection (see http://www.tvidesign.co.uk/blog/CSS-Browser-detection-using-jQuery-inste...)
Good point, thanks for sharing the link :)
-Leighton Whiting
Post new comment