WildKatana Design

Drupal - Including Browser-Specific CSS Dynamically

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.

  1. //=============================
  2. //   Begin Browser Detector
  3. //=============================
  4. $browser = '';
  5. $navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
  6. if (stristr($navigator_user_agent, "opera")) {
  7.   $browser = 'opera';
  8.   $dom_browser = true;
  9. }
  10. elseif (stristr($navigator_user_agent, "msie 4")) {
  11.   $browser = 'msie4';
  12.   $dom_browser = false;
  13. }
  14. elseif (stristr($navigator_user_agent, "msie")) {
  15.   $browser = 'msie';
  16.   $dom_browser = true;
  17. }
  18. elseif (stristr($navigator_user_agent, "chrome")) {
  19.   $browser = 'chrome';
  20.   $dom_browser = true;
  21. }
  22. elseif ((stristr($navigator_user_agent, "konqueror")) OR (stristr($navigator_user_agent, "safari"))) {
  23.   $browser = 'safari';
  24.   $dom_browser = true;
  25. }
  26. elseif (stristr($navigator_user_agent, "gecko")) {
  27.   $browser = 'mozilla';
  28.   $dom_browser = true;
  29. }
  30. elseif (stristr($navigator_user_agent, "mozilla/4")) {
  31.   $browser = 'ns4';
  32.   $dom_browser = false;
  33. }
  34. else {
  35.   $browser = false;
  36. }
  37. if ($browser) {
  38.   $themeDirectory = drupal_get_path('theme', 'mytheme');
  39.   drupal_add_css($themeDirectory.'/css/'. $browser .'.css', 'theme');
  40. }
  41. //=============================
  42. //    End Browser Detector
  43. //=============================

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!


Comments:

Testimonials

When it comes to response time, depth of knowledge, & most importantly, honesty, Leighton's service is by far the best experience we've had!

More

Why Use Us?

  • Website Design & Development
  • Valid XHTML/CSS Coding
  • Affordable and Honest Pricing
  • E-Commerce Shopping Carts
  • Great Communication
  • Content Management Systems (CMS)
  • Search Engine Optimization (SEO)
  • Satisfaction Guaranteed!