Two Methods for loading different CSS for different browsers: CSS browser Selector

Different browsers (ie, Gecko, opera...) have different rendering methods for CSS, resulting in different display effects,
Therefore, we can solve this problem by loading different CSS. The following describes the two methods,
It is not necessarily very practical and difficult to play.

Code in pure CSS Mode

 
. Box {width: 20em; Height: 20em; Background: #369;}/* -- gecko kernel -- */@ media all and (min-width: 0px) {box {Background: # cc0000 ;}}/* -- opera hacks -- * // * -- cannot pass W3C CSS validation --*/
 

 
<! -- [If IE]> <style>. Box {Background: #808080 ;}</style> <! [Endif] -->
 

AboveCodeThe running result is gray in IE, purple in opera, and blue in Firefox.

In earlier versions of IE7, you can also use the attribute selector of css2 to differentiate them. Unfortunately, IE7 is recognized.

BenArticlePublished by forestgan on 15--200-2006

JavaScript Method

VaR css_browser_selector = function () {var UA = navigator. useragent. tolowercase (), is = function (t) {return UA. indexof (t )! =-1 ;}, H = Document. getelementsbytagname ('html') [0], B = (! (/Opera | WebTV/I. Test (UA) &/MSIE (\ D)/. Test (UA ))?
(Is ('mac ')? 'Iemac': '') + 'ie ie' + Regexp. $1): Is ('gecko /')? 'Gecko ': Is ('Opera ')? 'Opera'
: Is ('konqueror ')? 'Konqueror': Is ('applewebkit /')
? 'Webkit safari ': Is ('mozilla /')? 'Gecko ': '', OS = (is ('x11') | is ('linux '))? 'Linux'
: Is ('mac ')? 'Mac': Is ('win ')? 'Win': ''; var c = B + OS + 'js'; H. classname + = H. classname? ''+ C: C ;}();

This script can differentiate more browsers. For more information, see the original author's website. .

Demo address