rafaelp · verbatim · Sep 26, 2011 · Sep 26, 2011 · Sep 26, 2011 · Oct 6, 2011
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.mkdn b/README.mkdn
@@ -1,70 +1,154 @@
 # CSS Browser Selector
 
-CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.<br/>
-More info: [http://rafael.adm.br/css\_browser\_selector](http://rafael.adm.br/css_browser_selector)
+<b>2014-02-19
+<br>I have not had time to work on this in a long time. Is there anyone interested in taking over? Maybe you can take this project to the next level.
+</b>
 
-## EXAMPLE
+CSS Browser Selector is a very small javascript which empowers CSS selectors.
+<br />You can now write code for: browser, browser version, platform, platform version, device, device version.
+<br />Best part: no more hacks; all compliant code.
+<br />More info: [http://rafael.adm.br/css_browser_selector](http://rafael.adm.br/css_browser_selector)
+<br />beta/experimental versions: [https://github.com/verbatim/css_browser_selector/](https://github.com/verbatim/css_browser_selector/)
 
-    <style type="text/css">
-    .ie .example {
-      background-color: yellow
-    }
-    .ie7 .example {
-      background-color: orange
-    }
-    .gecko .example {
-      background-color: gray
-    }
-    .win.gecko .example {
-      background-color: red
-    }
-    .linux.gecko .example {
-      background-color: pink
-    }
-    .opera .example {
-      background-color: green
-    }
-    .konqueror .example {
-      background-color: blue
-    }
-    .webkit .example {
-      background-color: black
-    }
-    .chrome .example {
-      background-color: cyan
-    }
-    .example {
-      width: 100px;
-      height: 100px;
-    }
-    .no_js { display: block }
-    .has_js { display: none }
-    .js .no_js { display: none }
-    .js .has_js { display: block }
-    </style>
+Identifies
+<br />browsers: Firefox; IE; Opera; Safari; Chrome, Konqueror, Iron
+<br />browser versions: (most importantly: ie6, ie7, ie8, ie9)
+<br />rendering engines: Webkit; Mozilla; Gecko
+<br />platforms/OSes: Mac; Win: Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11 
+<br />devices: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; J2me; RIM Playbook; mobile (generic)
+<br />enabled technology: JS (use in conjunction with &lt;html class="no-js"> for even more granular control)
+<br />language detection
+
+Recent contributors to 0.5, 0.6:
+
+more detailed IE detection:
+<br />https://github.com/kevingessner/css_browser_selector/
+
+more detailed WIN detection:
+<br />https://github.com/saar/css_browser_selector
+
+no-js to js:
+<br />paul irish: http://paulirish.com/2009/avoiding-the-fouc-v3/
+
+mac versioning
+<br />https://github.com/haraldmartin/css_browser_selector
+
+
+v0.6.1 2012-03-14
+<br />iOS version detection
+<br />beta: detect if being run in iPad app.
+<br />(from: http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript)
 
+v0.6.0 2012-01-24
+<br />more detailed support for Opera, Chrome, Safari (and revised support for Firefox)
+<br />versioning for Chrome, Blackberry, Android, Mac
+<br />Android device detection
+<br />altered how 'mobile' is deterimed to be added to the class string
+<br />language detection
+<br />RIM Playbook added
+<br />continuously evaluates browser max width (in case of resizing)
+<br />continuously evaluates browser orientation (portrait vs. landscape)
 
-## LICENSE
+v0.5.0 2011-08-24
+<br />any version of Firefox
+<br />more versions of Windows (Win8 [tentative], Win7, Vista, XP, Win2k)
+<br />more versions of IE under unique conditions
+<br />if "no-js" in HTML class: removes and replaces with "js" (\<html class="no-js"\>)
 
-[http://creativecommons.org/licenses/by/2.5/](http://creativecommons.org/licenses/by/2.5/)
+## resources:
 
-## AUTHOR
+navigator.userAgent strings:
+<br />http://en.wikipedia.org/wiki/User_agent
+<br />http://www.useragentstring.com/pages/useragentstring.php
+<br />http://www.user-agents.org
+<br />http://www.zytrax.com/tech/web/mobile_ids.html
 
-### **Rafael Lima**
+history of the user agent string:
+<br />http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/
 
-Blog: [http://rafael.adm.br](http://rafael.adm.br)
+language list:
+<br />http://msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx
 
-Podcast: [http://rafael.adm.br/voltandopracasa](http://rafael.adm.br/voltandopracasa)
+windows nt list
+<br />http://en.wikipedia.org/wiki/Windows_NT
 
-Github: [http://github.com/rafaelp](http://github.com/rafaelp)
+blackberry user agent string interpertation:
+<br />http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-detect-the-BlackBerry-Browser/ta-p/559862
 
-Twitter: [http://twitter.com/rafaelp](http://twitter.com/rafaelp)
+javascript compression:
+<br />http://minifyjavascript.com
 
-### Did you like?
+screen resolutions:
+<br />http://cartoonized.net/cellphone-screen-resolution.php
 
-[Recommend me at Working With Rails](http://workingwithrails.com/recommendation/new/person/14248-rafael-lima)
+aspect ratio:
+<br />http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm
 
-## CONTRIBUTORS
+iOS detection?:
+<br />http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript
 
-[http://rafael.adm.br/css\_browser\_selector#contributors](http://rafael.adm.br/css_browser_selector#contributors)
 
+## OTHER VERSIONS
+
+<b>Ruby on Rails Plugin by Reid MacDonald</b>
+<br />http://latimes.rubyforge.org/svn/plugins/css_browser_selector/
+
+<b>PHP CSS Browser Selector by Bastian Allgeier</b>
+<br />http://bastian-allgeier.de/css_browser_selector/
+
+<b>Wordpress Plugin by Adrian hanft</b>
+<br />http://wordpress.org/extend/plugins/browser-specific-css/
+
+## EXAMPLE
+
+    <style type="text/css"> 
+	    .ie .example { background-color: yellow; }
+	    .ie7 .example { background-color: orange }
+	    .gecko .example { background-color: gray; }
+	    .win.gecko .example { background-color: red; }
+	    .linux.gecko .example { background-color: pink; }
+	    .opera .example { background-color: green; }
+	    .konqueror .example { background-color: blue; }
+	    .webkit .example { background-color: black; }
+	    .chrome .example { background-color: cyan; }
+	    .example { width: 100px; height: 100px; }
+	    .no-js, .no_js, .nojs { display: block; }
+	    .js { display: none; }
+    </style>
+
+License:
+<br />http://creativecommons.org/licenses/by/2.5/
+
+ORIGINAL AUTHOR: Rafael Lima:
+<br />http://rafael.adm.br
+
+Based on idea by 37signals:
+<br />http://37signals.com/svn/archives2/browser_selectors_in_css.php
+
+Contributors:
+<br />Niyaz (http://github.com/niyazpk)
+<br />Marcio Trindade (http://github.com/marciotrindade)
+<br />rbottarelli (http://github.com/rbottarelli)
+<br />Bryan Chow (http://github.com/bryanchow)
+<br />Derek Lio (http://github.com/dereklio)
+<br />Paul Irish (http://github.com/paulirish)
+<br />Preston Badeer
+<br />Upekshapriya
+<br />André Lopes
+<br />Tazio Mirandola - copiaincolla pubblicità
+<br />Reid MacDonald (http://geminstallthat.wordpress.com)
+<br />Vinicius Braga (http://viniciusbraga.com)
+<br />Chris Preece (http://www.mmtdigital.co.uk)
+<br />Dominykas
+<br />M@ McCray
+<br />Daniel Westermann-Clark
+<br />Steve Clay (http://mrclay.org/)
+<br />Jeff Bellsey
+<br />Jean Pierre
+<br />Micah Snyder
+<br />Derek (http://amphibian.info)
+<br />Jesse Scott
+<br />Moises Kirsch (http://www.moiblog.com/)
+<br />Alex Wiltschko
+<br />Chris Warren and Tony Nelson (http://www.imagetrend.com)
+<br />glasser
diff --git a/css_browser_selector.js b/css_browser_selector.js
@@ -4,5 +4,183 @@ Rafael Lima (http://rafael.adm.br)
 http://rafael.adm.br/css_browser_selector
 License: http://creativecommons.org/licenses/by/2.5/
 Contributors: http://rafael.adm.br/css_browser_selector#contributors
+
+v0.5.0 2011-08-24
+andrew relkin
+
+modified, now detects:
+any version of Firefox
+more versions of Windows (Win8, Win7, Vista, XP, Win2k)
+more versions of IE under unique conditions
+more detailed support for Opera
+if "no-js" in HTML class: removes and replaces with "js" (<html class="no-js">)
+
+identifies
+	browsers: Firefox; IE; Opera; Safari; Chrome, Konqueror, Iron
+	browser versions: (most importantly: ie6, ie7, ie8, ie9)
+	rendering engines: Webkit; Mozilla; Gecko
+	platforms/OSes: Mac; Win: Win7, Vista, XP, Win2k; FreeBSD; Linux/x11 
+	devices: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; J2me; mobile(generic)
+	enabled technology: JS
+
+v0.6.3 2014-03-06
+@silasrm <[email protected]>
+    - Added support to IE11 
+        @see http://msdn.microsoft.com/en-us/library/ie/hh869301(v=vs.85).aspx
+        @see http://msdn.microsoft.com/en-us/library/ie/bg182625(v=vs.85).aspx
 */
-function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);
+
+showLog=true;
+function log(m) {if ( window.console && showLog ) {console.log(m); }  }
+
+function css_browser_selector(u) {
+	var	uaInfo = {},
+		screens = [320, 480, 640, 768, 1024, 1152, 1280, 1440, 1680, 1920, 2560],
+		allScreens = screens.length,
+		ua=u.toLowerCase(),
+		is=function(t) { return RegExp(t,"i").test(ua);  },
+		version = function(p,n) 
+			{ 
+			n=n.replace(".","_"); var i = n.indexOf('_'),  ver=""; 
+			while (i>0) {ver += " "+ p+n.substring(0,i);i = n.indexOf('_', i+1);} 
+			ver += " "+p+n; return ver; 
+			},
+		g='gecko',
+		w='webkit',
+		c='chrome',
+		f='firefox',
+		s='safari',
+		o='opera',
+		m='mobile',
+		a='android',
+		bb='blackberry',
+		lang='lang_',
+		dv='device_',
+		html=document.documentElement,
+		b=	[
+
+			// browser
+			((!(/opera|webtv/i.test(ua))&&/msie\s(\d+)/.test(ua)||(/trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/.test(ua))))?('ie ie'+(/trident\/4\.0/.test(ua) ? '8' : RegExp.$1 == '11.0'?'11':RegExp.$1))
+			:is('firefox/')?g+ " " + f+(/firefox\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+f+RegExp.$2 + ' '+f+RegExp.$2+"_"+RegExp.$4:'')	
+			:is('gecko/')?g
+			:is('opera')?o+(/version\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+o+RegExp.$2 + ' '+o+RegExp.$2+"_"+RegExp.$4 : (/opera(\s|\/)(\d+)\.(\d+)/.test(ua)?' '+o+RegExp.$2+" "+o+RegExp.$2+"_"+RegExp.$3:''))
+			:is('konqueror')?'konqueror'
+
+			:is('blackberry') ? 
+				( bb + 
+					( /Version\/(\d+)(\.(\d+)+)/i.test(ua)
+						? " " + bb+ RegExp.$1 + " "+bb+ RegExp.$1+RegExp.$2.replace('.','_')
+						: (/Blackberry ?(([0-9]+)([a-z]?))[\/|;]/gi.test(ua) 
+							? ' ' +bb+RegExp.$2 + (RegExp.$3?' ' +bb+RegExp.$2+RegExp.$3:'')
+							: '')
+					)
+				) // blackberry
+
+			:is('android') ? 
+				(  a +
+					( /Version\/(\d+)(\.(\d+))+/i.test(ua)
+						? " " + a+ RegExp.$1 + " "+a+ RegExp.$1+RegExp.$2.replace('.','_')
+						: '')
+					+ (/Android (.+); (.+) Build/i.test(ua)
+						? ' '+dv+( (RegExp.$2).replace(/ /g,"_") ).replace(/-/g,"_")
+						:''	)
+				) //android
+
+			:is('chrome')?w+   ' '+c+(/chrome\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+c+RegExp.$2 +((RegExp.$4>0) ? ' '+c+RegExp.$2+"_"+RegExp.$4:''):'')	
+
+			:is('iron')?w+' iron'
+
+			:is('applewebkit/') ? 
+				( w+ ' '+ s + 
+					( /version\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)
+						?  ' '+ s +RegExp.$2 + " "+s+ RegExp.$2+RegExp.$3.replace('.','_')
+						:  ( / Safari\/(\d+)/i.test(ua) 
+							? 
+							( (RegExp.$1=="419" || RegExp.$1=="417" || RegExp.$1=="416" || RegExp.$1=="412" ) ? ' '+ s + '2_0' 
+								: RegExp.$1=="312" ? ' '+ s + '1_3'
+								: RegExp.$1=="125" ? ' '+ s + '1_2'
+								: RegExp.$1=="85" ? ' '+ s + '1_0'
+								: '' )
+							:'')
+						)
+				) //applewebkit	
+
+			:is('mozilla/')?g
+			:''
+
+			// mobile
+			,is("android|mobi|mobile|j2me|iphone|ipod|ipad|blackberry|playbook|kindle|silk")?m:''
+
+			// os/platform
+			,is('j2me')?'j2me'
+			:is('ipad|ipod|iphone')?  
+				( 
+					(
+						/CPU( iPhone)? OS (\d+[_|\.]\d+([_|\.]\d+)*)/i.test(ua)  ?
+						'ios' + version('ios',RegExp.$2) : ''
+					) + ' ' + ( /(ip(ad|od|hone))/gi.test(ua) ?	RegExp.$1 : "" )
+				) //'iphone'
+			//:is('ipod')?'ipod'
+			//:is('ipad')?'ipad'
+			:is('playbook')?'playbook'
+			:is('kindle|silk')?'kindle'
+			:is('playbook')?'playbook'
+			:is('mac')?'mac'+ (/mac os x ((\d+)[.|_](\d+))/.test(ua) ?    ( ' mac' + (RegExp.$2)  +  ' mac' + (RegExp.$1).replace('.',"_")  )     : '' )
+			:is('win')?'win'+
+					(is('windows nt 6.2')?' win8'
+					:is('windows nt 6.1')?' win7'
+					:is('windows nt 6.0')?' vista'
+					:is('windows nt 5.2') || is('windows nt 5.1') ? ' win_xp' 
+					:is('windows nt 5.0')?' win_2k'
+					:is('windows nt 4.0') || is('WinNT4.0') ?' win_nt'
+					: ''
+					) 
+			:is('freebsd')?'freebsd'
+			:(is('x11|linux'))?'linux'
+			:''
+
+			// user agent language
+			,(/[; |\[](([a-z]{2})(\-[a-z]{2})?)[)|;|\]]/i.test(ua))?(lang+RegExp.$2).replace("-","_")+(RegExp.$3!=''?(' '+lang+RegExp.$1).replace("-","_"):''):''
+
+			// beta: test if running iPad app
+			,( is('ipad|iphone|ipod') && !is('safari') )  ?  'ipad_app'  : ''
+
+
+		]; // b
+
+	console.debug(ua);
+
+    function screenSize() {
+		var w = window.outerWidth || html.clientWidth;
+		var h = window.outerHeight || html.clientHeight;
+		uaInfo.orientation = ((w<h) ? "portrait" : "landscape");
+        // remove previous min-width, max-width, client-width, client-height, and orientation
+        html.className = html.className.replace(/ ?orientation_\w+/g, "").replace(/ [min|max|cl]+[w|h]_\d+/g, "")
+        for (var i=(allScreens-1);i>=0;i--) { if (w >= screens[i] ) { uaInfo.maxw = screens[i]; break; }}
+		widthClasses="";
+        for (var info in uaInfo) { widthClasses+=" "+info+"_"+ uaInfo[info]  };
+		html.className =  ( html.className +widthClasses  );
+		return widthClasses;
+	} // screenSize
+
+    window.onresize = screenSize;
+	screenSize();	
+
+    function retina(){
+      var r = window.devicePixelRatio > 1;
+      if (r) {      	
+        html.className+=' retina';
+      }
+      else {
+        html.className+=' non-retina';
+      }
+    }
+    retina();
+
+	var cssbs = (b.join(' ')) + " js ";
+	html.className =   ( cssbs + html.className.replace(/\b(no[-|_]?)?js\b/g,"")  ).replace(/^ /, "").replace(/ +/g," ");
+
+	return cssbs;
+}
+
+css_browser_selector(navigator.userAgent);