5 Comments on “is it possible to set different css on one page depending on browser type?”

1. Deepthi
   October 30th, 2007 at 10:25 am

   Yeah you can
   check type of the browser depending on that you can set the css

2. catbertnc
   October 31st, 2007 at 6:33 am

   Yes, it can be done. There are many tutorials on the Internet. Here’s one:

3. Brad Wright
   November 3rd, 2007 at 9:10 am

   There are multiple hacks you can use:

   In all cases .selector denotes that way you’d usually select the elements/classes/IDs:

   /* targets all IE */
   .selector {
   *property: value;
   }

   /* targets just IE6 */
   * html .selector {
   property: value;
   }
   /* or */
   .selector {
   _property: value;
   }

   /* to target Safari */
   body:last-child:not(:root:root) .selector {
   property: value;
   }

   /* For Safari 3 and Opera 9 */
   @media all and (min-width: 0px) {
   head~body .selector {
   property: value;
   }
   }

   Or to selectively target entire stylesheets to IE:

   The last technique is actually used on the question page here on Answers.

4. richarduie
   November 4th, 2007 at 2:21 pm

   This is best done on the server, if you have access to jsp, asp, php, etc., but, if you just have to do it on the client side, I prefer to use the cascade instead of hacks. The idea is to apply a default style sheet to all pages and then include an overriding set of style for each different browser to be supported. By including alternative styles later in the cascade, they replace the values declared in the default style sheet. Here’s a sample that’s only set to handle Firefox (all), IE6, and IE7.

   base.html
   ~~~~~~~~~

   this heading has different color
   properties, depending on the browser

   Firefox.css
   ~~~~~~~~~
   #differsByBrowser {
   color: green;
   text-decoration: underline;
   }

   IE6.css
   ~~~~~~~~
   #differsByBrowser {
   color: red;
   }

   IE7.css
   ~~~~~~~~~
   #differsByBrowser {
   color: blue;
   }

   altStyle.js
   ~~~~~~~~~
   // set style sheet name to denote the
   // default browser
   var styleName = ‘Firefox’;

   // determine which browser is actually
   // being used and reset the value of
   // styleName, if the preferred, default
   // browser is not the current case
   var agt = navigator.userAgent;
   // the “sniff” can be as specific as
   // needed, according to the different
   // browsers to be differentially styled
   if (-1 != agt.indexOf(‘Firefox’)) {
   // exit for Firefox – already set
   }
   if (-1 != agt.indexOf(‘MSIE 6’)) {
   // reset to indicate IE6
   styleName = ‘IE6’;
   }
   if (-1 != agt.indexOf(‘MSIE 7’)) {
   // reset to indicate IE7
   styleName = ‘IE7’;
   }
   //…handle other browsers as needed…

   // if alternate styles are needed for
   // current browser, bring them in here –
   // since they fall later in the cascade,
   // they will override any declared in the
   // default sheet
   if (‘Firefox’ != styleName) {
   var s1 = ”;
   document.write(s1 + styleName + s2);
   }

5. Archer
   November 5th, 2007 at 6:54 pm

   here’s a sample script i made.

   full script is in the demo page

Leave a Reply

You must be logged in to post a comment.