Monday, April 8, 2013

CSS/JS Browser Determiner

JavaScript - CSS/JS Browser Determiner - CodeCanyon

CSS/JS Browser Determiner his title this type of JavaScript/Miscellaneous This time I will review,made by bit-labs, JavaScript/Miscellaneous is sold at a price of $6 in CodeCanyon. CSS/JS Browser Determiner - CodeCanyon Item for Sale browser detect // css // javascript // script // selector // userAgent //
Created 26 December 12
Last Update 30 May 13
Compatible Browsers IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome
Files Included JavaScript JS

It is a lightweight (3,9kb) JavaScript library that can help web-developers, especially HTML/CSS coders, to easily write CSS or JavaScript code for any specific browser without any CSS hacks. It is indispensable solution for building cross-browser and cross-platform web-sites and web-applications.How it works? Very simple. It generates a list of classes with the detailed information about browser, layout engine, OS, device and then attach it to <html> tag.Unlike well-known Modernizr, the CSS/JS Browser Determiner is mostly focused not on the browser features but on the browser and the device itself. But it also determines the support of common CSS features.

Browser Detection With CSS

.opera .element {color:red} // All versions of Opera .ie8 .element {color:red} // MSIE 8 .ie7_5 .element {color:red} // MSIE 7.5 .ie8- .element {color:red} // MSIE 8 or less .chrome24- .element {color:red} // Chrome 24 or less (25 version is the maximum available) .webkit .element {color:red} // Webkit based browsers such as Chrome, Safari, IOS, Android etc. .gecko18 .element {color:red} // Browsers that based on Gecko v18 .macos .element {color:red} // Mac OS only .windows .element {color:red} // Any version of Windows .win7 .element {color:red} // Windows 7 only .pc .element {color:red} // Any non-mobile computer including Mac OS .mobile .element {color:red} // Any mobile device .desktop .element {color:red} // Window width 980px or more .iphone .element {color:red} // iPhone .ipad.landscape .element {color:red} // iPad in landscape orientation .android .element {color:red} // Device with Android OS .android.crmo .element {color:red} // Chrome Mobile on Android OS .mobile.tablet .element {color:red} // Only mobile device with current width of the window from 768px to 979px .boxsizing .element {color:red} // Browser that supports the CSS3 box-sizing property .no-gradient .element {color:red} // Browser that does not supports CSS3 gradients .cookie .element {color:red} // Cookies enabled .no-flash .element {color:red} // Flash is not installed ... and so much more!

Browser Detection With JavaScript

if (browser.msie && browser.version <= 8 ) { // Code for MSIE 8 or less } if (browser.is_mobile) { // Code for mobile devices } if (browser.is_old) { // Code for old browsers such as: // MSIE 9 or less // Firefox 3.6 or less // Safari 3.0 or less // Opera 10.1 or less } if (browser.supports("border-radius")) { // Code for browsers that supports the CSS3 border-radius property } if (browser.is_desktop) { // Window width is 980px or more }

And much-much more.

All CSS selectors

  • Browsers - chrome, safari, firefox, ie, konqueror, opera, operamobi, operamini, crmo, unknown
  • Browser version like: firefox18, firefox18-, firefox18_0 (but NOT firefox18_0- or firefox18_0_1234 or firefox18_0a1)
  • Layout engines: webkit, gecko, trident, presto, khtml
  • Layout version like: gecko18, gecko18_0 (but NOT gecko18- or gecko18_0_1 or gecko18_0a1)
  • Mobile devices: iphone, ipod, ipad, blackberry, kindle
  • Operation systems: windows, win8, win7, vista, xp, win2003, cros, unix, linux, ios, android, unknown_os
  • Basic CSS3 properties: opacity, gradient, borderradius, borderimage, animation, transition, transform, textshadow, boxsizing, boxshadow. Or no-gradient, no-borderimage etc…
  • Others:
    • pc, mobile (any non-mobile computer or mobile device)
    • desktop, tablet, phone (according to window width)
    • landscape, portrait (viewport orientation, according to window width and height)
    • retina, touchscreen (or no-retina, no-touchscreen)
    • cookie, flash, java (or no-cookie, no-flash, no-java)

JavaScript API

  • browser.is_modern — returns true if it’s a modern browser. Depends on whether browser supports the CSS3 transition property
  • browser.is_old — opposite of browser.is_modern
  • browser.is_mobile — returns true if it’s a mobile device
  • browser.is_pc — any non-mobile computer, including Mac OS
  • browser.is_desktop — window width 980px and more
  • browser.is_tablet — window width 768px to 979px
  • browser.is_phone — window width is 767px or less
  • browser.is_retina — returns true if it’s Retina display
  • browser.is_touchscreen — — returns true if it’s touchscreen device
  • browser.name — the name of the browser
  • browser.NAME — like browser.msie, browser.firefox etc. Returns true or undefined
  • browser.nameFull — returns the full name of the browser like “Firefox”, “Internet Explorer” etc.
  • browser.version — the version of the browser
  • browser.layout — the name of the layout engine, like “webkit”, “gecko”, “trident”, “presto”, “khtml” or “unknown”
  • browser.LAYOUT_NAME — like browser.webkit, browser.gecko etc. Returns true or undefined
  • browser.layoutFull — full name of the layout engine, like “WebKit”, “Gecko”, “Trident”, “Presto”, “KHTML” or “Unknown”
  • browser.layoutVersion — the version of the layout engine, like “533.1” for WebKit/533.1, “18.0” for Gecko/18.0, “18.0a1pre” for Gecko 18.0 Alpha 1 pre etc.
  • browser.os — returns the short name of the operation system, like “windows”, “macos”, “cros”, “unix”, “linux”, “ios”, “android” or “unknown”
  • browser.osFull — returns the full name of the operation system, like “Windows”, “Mac OS X”, “CrOS”, “Unix”, “Linux”, “iOS”, “Android” or “Unknown”
  • browser.osVersion — returns the OS version string, like “7” for Windows 7, “4.2” for Android 4.2 etc.
  • browser.device — returns the short name of the mobile device, like “iphone”, “ipad”, “ipod”, “blackberry” or “kindle”
  • browser.deviceFull — returns the full name of the mobile device, like “iPhone”, “iPad”, “iPod”, “BlackBerry” or “Kindle”
  • browser.supports.CSS_PROP — like browser.supports.opacity, browser.supports.gradient etc. Only predefined properties are alowed (“Common CSS properties” list). Please note that the second word must be capitalized like textShadow, borderRadius, boxSizing etc.
  • browser.mode — returns “desktop”, “tablet” or “phone” according to the current width of the window
  • browser.orientation — browser window orientation like “landscape” or “portrait”
  • browser.cookieEnabled — returns true if cookies are enabled in browser
  • browser.flashEnabled — returns true if Flash Player is installed and enabled in browser
  • browser.javaEnabled — returns true if JAVA is installed and enabled in browser
  • browser.width() — returns the width of the browser
  • browser.height() — returns the height of the browser
  • browser.supports("css-prop") — determine whether browser supports the CSS property.

Responsive Utilities

CSS/JS Browser Determiner is also supports basic responsive utilites for faster mobile-friendly development. You can use CSS selectors to determine the desktop, tablet or phone platform. It can be helpful if you need responsive support in Internet Explorer 8 (or less), which does not supports CSS3 Media Queries.Live demo and full documentation

Changelog

Version 2.0.3 | 29 May 2013 - Live orientation (landscape, portrait) update for CSS

Version 2.0.2 | 24 May 2013 - Fixed detection of mobile devices

Version 2.0.1 | 11 May 2013 - Opera is moving to WebKit soon, so now we ready for that! - Fixed a link to the documentation (moved to a new domain)

Version 2.0 | 23 Jan 2013 - Total reworking almoust from the ground up - Even more powerful. Added support of new browsers, OS, layout engines, devices and other features - New detection algorithm - Now you can detect version of OS and layout engine with both CSS and JavaScript - Updated demos - New testing tool added (see Live preview) - Replaced Firefox browser name from ”.mozilla” to ”.firefox” - Replaced “ie” propery to “msie” in JavaScript API (so now it’s browser.msie) - Replaced Mac OS from ”.mac” to ”.macos” - The same 4kb (minified)!

Version 1.0.5 | 01 Jan 2013 - Fixed window width detection

Version 1.0.4 | 28 Dec 2012 - Added OS: win8, win7, vista, xp - Added Retina displays detection

Version 1.0.3 | 27 Dec 2012 - Added iOS detection support - Fixed critical bug with Safari browsers - Other changes and bug fixes

Related produck This user:bit-labs

TAFTA — Tell a Friend to Access - CodeCanyon Item for Sale

More items by bit-labs

Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)