0.6.5 • Published 7 years ago

css-browser-selector v0.6.5

Weekly downloads
78
License
CC-BY-SA-2.5
Repository
github
Last release
7 years ago

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/css_browser_selector beta/experimental versions: https://github.com/verbatim/css_browser_selector/

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/css_browser_selector/

more detailed WIN detection: https://github.com/saar/css_browser_selector

no-js to js: paul irish: http://paulirish.com/2009/avoiding-the-fouc-v3/

mac versioning https://github.com/haraldmartin/css_browser_selector

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" (\<html class="no-js">)

resources:

navigator.userAgent strings: http://en.wikipedia.org/wiki/User_agent 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/Windows_NT

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_browser_selector/

PHP CSS Browser Selector by Bastian Allgeier http://bastian-allgeier.de/css_browser_selector/

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_selectors_in_css.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