css-browser-selector

CSS Browser Selector is a very small javascript which empowers CSS selectors with platform-specific classes

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
css-browser-selector
0.6.57 years ago7 years agoMinified + gzip package size for css-browser-selector in KB

Readme

CSS Browser Selector
2014-02-19
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.

CSS Browser Selector is a very small javascript which empowers CSS selectors.
You can now write code for: browser, browser version, platform, platform version, device, device version.
Best part: no more hacks; all compliant code.
More info: http://rafael.adm.br/cssbrowserselector
beta/experimental versions: https://github.com/verbatim/cssbrowserselector/
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: Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11
devices: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; J2me; RIM Playbook; mobile (generic)
enabled technology: JS (use in conjunction with <html class="no-js"> for even more granular control)
language detection
Recent contributors to 0.5, 0.6:
more detailed IE detection:
https://github.com/kevingessner/cssbrowserselector/
more detailed WIN detection:
https://github.com/saar/cssbrowserselector
no-js to js:
paul irish: http://paulirish.com/2009/avoiding-the-fouc-v3/
mac versioning
https://github.com/haraldmartin/cssbrowserselector
v0.6.1 2012-03-14
iOS version detection
beta: detect if being run in iPad app.
(from: http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript)
v0.6.0 2012-01-24
more detailed support for Opera, Chrome, Safari (and revised support for Firefox)
versioning for Chrome, Blackberry, Android, Mac
Android device detection
altered how 'mobile' is deterimed to be added to the class string
language detection
RIM Playbook added
continuously evaluates browser max width (in case of resizing)
continuously evaluates browser orientation (portrait vs. landscape)
v0.5.0 2011-08-24
any version of Firefox
more versions of Windows (Win8 tentative, Win7, Vista, XP, Win2k)
more versions of IE under unique conditions
if "no-js" in HTML class: removes and replaces with "js" (\)

resources:

navigator.userAgent strings:
http://en.wikipedia.org/wiki/Useragent
http://www.useragentstring.com/pages/useragentstring.php
http://www.user-agents.org
http://www.zytrax.com/tech/web/mobile
ids.html
history of the user agent string:
http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/
language list:
http://msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx
windows nt list
http://en.wikipedia.org/wiki/WindowsNT
blackberry user agent string interpertation:
http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-detect-the-BlackBerry-Browser/ta-p/559862
javascript compression:
http://minifyjavascript.com
screen resolutions:
http://cartoonized.net/cellphone-screen-resolution.php
aspect ratio:
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
iOS detection?:
http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript

OTHER VERSIONS

Ruby on Rails Plugin by Reid MacDonald
http://latimes.rubyforge.org/svn/plugins/css
browserselector/
PHP CSS Browser Selector by Bastian Allgeier
http://bastian-allgeier.de/css
browserselector/
Wordpress Plugin by Adrian hanft
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:
http://creativecommons.org/licenses/by/2.5/
ORIGINAL AUTHOR: Rafael Lima:
http://rafael.adm.br
Based on idea by 37signals:
http://37signals.com/svn/archives2/browser
selectorsincss.php
Contributors:
Niyaz (http://github.com/niyazpk)
Marcio Trindade (http://github.com/marciotrindade)
rbottarelli (http://github.com/rbottarelli)
Bryan Chow (http://github.com/bryanchow)
Derek Lio (http://github.com/dereklio)
Paul Irish (http://github.com/paulirish)
Preston Badeer
Upekshapriya
André Lopes
Tazio Mirandola - copiaincolla pubblicità
Reid MacDonald (http://geminstallthat.wordpress.com)
Vinicius Braga (http://viniciusbraga.com)
Chris Preece (http://www.mmtdigital.co.uk)
Dominykas
M@ McCray
Daniel Westermann-Clark
Steve Clay (http://mrclay.org/)
Jeff Bellsey
Jean Pierre
Micah Snyder
Derek (http://amphibian.info)
Jesse Scott
Moises Kirsch (http://www.moiblog.com/)
Alex Wiltschko
Chris Warren and Tony Nelson (http://www.imagetrend.com)
glasser