Two ways to load different CSS for different browsers

Because of the browser (IE, Gecko, opera ...) The rendering of the CSS is different, resulting in differences in display, so you can load a different way to solve the CSS, the following introduction to the next two methods to achieve, not necessarily very practical, difficult to play a.

Pure CSS Way

The following is a reference fragment:

Code

. box{

Width:20em;

Height:20em;

Background: #369;

}

/*--gecko Kernel--*/

@mediaalland (min-width:0px) {

box{

Background: #CC0000;

}

}

/*--operahacks--*/

/*--cannot pass W3CCSS test--*/

The above code runs the result, in IE is gray, opera is mauve, Firefox is blue

Previous versions of IE7 can also be distinguished by CSS2 attribute selectors, which unfortunately IE7 begin to recognize.

This article is published by Forestgan in 15-oct-2006

The method of JavaScript

The following is a reference fragment:

Varcss_browser_selector=function () {

Var

Ua=navigator.useragent.tolowercase (),

Is=function (t) {Returnua.indexof (t)!=-1;},

H=document.getelementsbytagname (' HTML ') [0],

b= (!) ( /opera|webtv/i.test (UA)) &&/msie (d)/.test (UA))? (Is (' Mac ')? Iemac ': ') + ' Ieie ' +regexp.$1)

: Is (' gecko/')? Gecko ': Is (' opera ')? Opera ': Is (' Konqueror ')? Konqueror ': Is (' applewebkit/')? Webkitsafari ': Is (' mozilla/')? Gecko ': ',

Os= (Is (' x11 ') | | Is (' Linux '))? ' Linux ': Is (' Mac ')? Mac ': Is (' win ')? Win ': ';

varc=b+os+ ' JS ';

H.classname+=h.classname? ' +C:C;

}();