Permalink
Browse files

Add new dev version; update README;

  • Loading branch information...
1 parent 1d3c151 commit b3c257f4b8be076c131af9c348bec300af23162f @verbatim verbatim committed Jan 24, 2012
Showing with 273 additions and 52 deletions.
  1. +1 −0 .gitignore
  2. +124 −52 README.mkdn
  3. +148 −0 css_browser_selector_dev.js
View
@@ -0,0 +1 @@
+.DS_Store
View
@@ -1,70 +1,142 @@
# 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)
+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/)
-## EXAMPLE
+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
- <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>
+Recent contributors to 0.5, 0.6, 0.6.5:
+
+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
+
+andrew relkin
+v0.6.0 2012-??-??
+<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
+## OTHER VERSIONS
-[http://rafael.adm.br/css\_browser\_selector#contributors](http://rafael.adm.br/css_browser_selector#contributors)
+<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
View
@@ -0,0 +1,148 @@
+/*
+CSS Browser Selector 0.6.5
+Originally written by 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
+
+Co-maintained by:
+https://github.com/verbatim/css_browser_selector
+
+*/
+
+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) { ua.indexOf(t.toLowerCase())>-1 },
+ is=function(t) { return RegExp(t,"i").test(ua); },
+ g='gecko',
+ w='webkit',
+ c='chrome',
+ f='firefox',
+ s='safari',
+ o='opera',
+ m='mobile',
+ a='android',
+ bb='blackberry',
+ lang='lang_',
+ d='device_',
+ html=document.documentElement,
+ b= [
+
+ // browser
+ (!(/opera|webtv/i.test(ua))&&/msie\s(\d+)/.test(ua))?('ie ie'+(/trident\/4\.0/.test(ua) ? '8' : 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:'')
+ : '')
+ )
+ // MIDP and CLDC:
+ // not sure what these represent but have put in until someone can
+ // tell me they aren't necessary for the purposes of this plugin
+ + ( /MIDP-((\d+)\.(\d+))/i.test(ua)
+ ? " midp"+ RegExp.$2 + " midp"+ RegExp.$1.replace('.','_')
+ :'' )
+ + ( /CLDC-((\d+)\.(\d+))/i.test(ua)
+ ? " cldc"+ RegExp.$2 + " cldc"+ RegExp.$1.replace('.','_')
+ :'' )
+ )
+
+ :is('android') ?
+ ( a +
+ ( /Version\/(\d+)(\.(\d+))+/i.test(ua)
+ ? " " + a+ RegExp.$1 + " "+a+ RegExp.$1+RegExp.$2.replace('.','_')
+ : '')
+ + (/Android (.+); (.+) Build/i.test(ua)
+ ? ' device_'+( (RegExp.$2).replace(/ /g,"_") ).replace(/-/g,"_")
+ :'' )
+ )
+
+ :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'
+ : '' )
+ :'')
+ )
+ )
+
+ :is('mozilla/')?g
+ :''
+
+ // mobile
+ ,is("mobi|mobile|j2me|iphone|ipod|ipad|blackberry|playbook")?m:''
+
+ // os/platform
+ ,is('j2me')?'j2me'
+ :is('iphone')?'iphone'
+ :is('ipod')?'ipod'
+ :is('ipad')?'ipad'
+ :is('playbook')?'playbook'
+ :is('mac')?'mac'+ (/mac os x ((\d+)[.|_](\d+))/.test(ua) ? ' 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("-","_"):''):''
+ ]; // b
+
+ 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 (ww=(allScreens-1);ww>=0;ww--) { if (w >= screens[ww] ) { uaInfo.maxw = screens[ww]; break; }}
+ widthClasses="";
+ for (var info in uaInfo) { widthClasses+=" "+info+"_"+ uaInfo[info] };
+ html.className = ( html.className +widthClasses );
+ return widthClasses;
+ } // screenSize
+
+ window.onresize = screenSize;
+ screenSize();
+
+ var cssbs = (b.join(' ')).replace(/ +/g," ") + " js ";
+ html.className = ( cssbs + html.className.replace(/(no[-|_]?)?js/g,"") ).replace(/^ /, "");
+
+ return cssbs;
+ }
+
+css_browser_selector(navigator.userAgent);
+
+

3 comments on commit b3c257f

Collaborator

paulirish replied Jan 26, 2012

👍

Collaborator

verbatim replied Jan 26, 2012

I know you're a busy person, but thanks so much for your help along the way.

BTW: how often do you come out to the east coast and do you ever do any speaking engagements? I saw a video of your talk at Huge last year (http://www.ustream.tv/recorded/15819869)

I work for a web shop here (www.rosetta.com), and I have been trying to be some sort of evangelist for more forward thinking design techniques. I work in my company's NYC offices surrounded mostly by graphic designers. Besides the usual web development responsibilities, I also work directly with the designers and art directors trying to educate them about designing for the browser vs. designing for print. For many of them it's a big paradigm shift in thinking.

A talk from a person such as yourself would certainly help build on the ideas that I have been expounding.

Collaborator

paulirish replied Jan 26, 2012

Please sign in to comment.