CSS/JS Browser Determiner Download

DOWNLOAD/LIVE PREVIEW

CSS/JS Browser Determiner Download

It’s light-weight (2kb gzipped or 3,8kb minified) JavaScript browser detector that can be utilized in all of your internet tasks. It’s created that will help you to jot down CSS or JavaScript code for any particular browser, model of browser or whatnot in a very simple manner. Detect structure engine, OS, help for CSS options and extra.

It’s indispensable answer for constructing cross-browser and cross-platform web-sites and web-applications.

The way it works? Quite simple. It generates an inventory of courses with detailed details about browser, structure engine, OS, gadget after which attaches it to <html> tag.

Not like well-known Modernizr, the CSS/JS Browser Determiner is generally centered not on the browser options however on the browser and the gadget itself. But it surely additionally determines the help of widespread CSS options.

Browser Detection With CSS

.opera           .component {coloration:purple} // All variations of Opera
.ie8             .component {coloration:purple} // MSIE 8
.ie7_5           .component {coloration:purple} // MSIE 7.5
.ie8-            .component {coloration:purple} // MSIE Eight or much less
.chrome24-       .component {coloration:purple} // Chrome 24 or much less (25 model is the utmost accessible)
.webkit          .component {coloration:purple} // Webkit based mostly browsers reminiscent of Chrome, Safari, IOS, Android and so on.
.gecko18         .component {coloration:purple} // Browsers that based mostly on Gecko v18

.macos           .component {coloration:purple} // Mac OS solely
.home windows         .component {coloration:purple} // Any model of Home windows
.win7            .component {coloration:purple} // Home windows 7 solely
.computer              .component {coloration:purple} // Any non-mobile pc together with Mac OS
.cellular          .component {coloration:purple} // Any cellular gadget
.desktop         .component {coloration:purple} // Window width 980px or extra
.iphone          .component {coloration:purple} // iPhone
.ipad.panorama  .component {coloration:purple} // iPad in panorama orientation
.android         .component {coloration:purple} // System with Android OS
.android.crmo    .component {coloration:purple} // Chrome Cellular on Android OS
.cellular.pill   .component {coloration:purple} // Solely cellular gadget with present width of the window from 768px to 979px

.boxsizing       .component {coloration:purple} // Browser that helps the CSS3 box-sizing property
.no-gradient     .component {coloration:purple} // Browser that doesn't helps CSS3 gradients

.cookie          .component {coloration:purple} // Cookies enabled
.no-flash        .component {coloration:purple} // Flash will not be put in

... and a lot extra!

Browser Detection With JavaScript

if (browser.ie && browser.model <= 8 ) {
    // Code for MSIE Eight or much less
}
if (browser.is_mobile) {
    // Code for cellular units
}
if (browser.is_old) {
    // Code for previous browsers reminiscent of:
    // MSIE 9 or much less
    // Firefox 3.6 or much less
    // Safari 3.Zero or much less
    // Opera 10.1 or much less
}
if (browser.helps("border-radius")) {
    // Code for browsers that helps the CSS3 border-radius property
}
if (browser.is_desktop) {
    // Window width is 980px or extra
}

And far-much extra.

All CSS selectors

  • Browsers – chrome, safari, firefox, ie, konqueror, opera, operamobi, operamini, crmo, unknown
  • Browser model like: firefox18, firefox18-, firefox18_0 (however NOT firefox18_0- or firefox18_0_1234 or firefox18_0a1)
  • Structure engines: webkit, gecko, trident, presto, khtml
  • Structure model like: gecko18, gecko18_0 (however NOT gecko18- or gecko18_0_1 or gecko18_0a1)
  • Cellular units: iphone, ipod, ipad, blackberry, kindle
  • Operation techniques: home windows, win8, win7, vista, xp, win2003, cros, unix, linux, ios, android, unknown_os
  • Fundamental CSS3 properties:
    opacity, gradient, borderradius, borderimage, animation, transition, remodel, textshadow, boxsizing, boxshadow. Or no-gradient, no-borderimage and so on…
  • Others:
    • computer, cellular (any non-mobile pc or cellular gadget)
    • desktop, pill, cellphone (based on window width)
    • panorama, portrait (viewport orientation, based on window width and peak)
    • 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 contemporary browser. Relies on whether or not browser helps the CSS3 transition property
  • browser.is_old — reverse of browser.is_modern
  • browser.is_mobile — returns true if it’s a cellular gadget
  • browser.is_pc — any non-mobile pc, together with Mac OS
  • browser.is_desktop — window width 980px and extra
  • browser.is_tablet — window width 768px to 979px
  • browser.is_phone — window width is 767px or much less
  • browser.is_retina — returns true if it’s Retina show
  • browser.is_touchscreen — — returns true if it’s touchscreen gadget
  • browser.title — the title of the browser
  • browser.NAME — like browser.ie, browser.firefox and so on. Returns true or undefined
  • browser.nameFull — returns the total title of the browser like “Firefox”, “Web Explorer” and so on.
  • browser.model — the model of the browser
  • browser.structure — the title of the structure engine, like “webkit”, “gecko”, “trident”, “presto”, “khtml” or “unknown”
  • browser.LAYOUT_NAME — like browser.webkit, browser.gecko and so on. Returns true or undefined
  • browser.layoutFull — full title of the structure engine, like “WebKit”, “Gecko”, “Trident”, “Presto”, “KHTML” or “Unknown”
  • browser.layoutVersion — the model of the structure engine, like “533.1” for WebKit/533.1, “18.0” for Gecko/18.0, “18.0a1pre” for Gecko 18.Zero Alpha 1 pre and so on.
  • browser.os — returns the brief title of the operation system, like “home windows”, “macos”, “cros”, “unix”, “linux”, “ios”, “android” or “unknown”
  • browser.osFull — returns the total title of the operation system, like “Home windows”, “Mac OS X”, “CrOS”, “Unix”, “Linux”, “iOS”, “Android” or “Unknown”
  • browser.osVersion — returns the OS model string, like “7” for Home windows 7, “4.2” for Android 4.2 and so on.
  • browser.gadget — returns the brief title of the cellular gadget, like “iphone”, “ipad”, “ipod”, “blackberry” or “kindle”
  • browser.deviceFull — returns the total title of the cellular gadget, like “iPhone”, “iPad”, “iPod”, “BlackBerry” or “Kindle”
  • browser.helps.CSS_PROP — like browser.helps.opacity, browser.helps.gradient and so on. Solely predefined properties are alowed (“Common CSS properties” record). Please observe that the second phrase have to be capitalized like textShadow, borderRadius, boxSizing and so on.
  • browser.mode — returns “desktop”, “pill” or “cellphone” based on the present width of the window
  • browser.orientation — browser window orientation like “panorama” or “portrait”
  • browser.cookieEnabled — returns true if cookies are enabled in browser
  • browser.flashEnabled — returns true if Flash Participant is put in and enabled in browser
  • browser.javaEnabled — returns true if JAVA is put in and enabled in browser
  • browser.width() — returns the width of the browser
  • browser.peak() — returns the peak of the browser
  • browser.helps("css-prop") — decide whether or not browser helps the CSS property.

Responsive Utilities

CSS/JS Browser Determiner can also be helps primary responsive utilites for quicker mobile-friendly growth. You should use CSS selectors to find out the desktop, pill or cellphone platform. It may be useful if you happen to want responsive help in Web Explorer 8 (or much less), which doesn’t helps CSS3 Media Queries.

Live demo and full documentation

Changelog

Model 2.3 | 06 Feb 2014
– Minor bugfixes

Model 2.2 | 15 Dec 2013
– Fastened flash detection
– different bugfixes

Model 2.1 | 15 Oct 2013
– Fastened detection of Opera 15+, IE 11
– Switched again to “ie” property from “msie” in JavaScript API (so now it’s browser.ie)

Model 2.0.3 | 29 Could 2013
– Dwell orientation (panorama, portrait) replace for CSS

Model 2.0.2 | 24 Could 2013
– Fastened detection of cellular units

Model 2.0.1 | 11 Could 2013
– Opera is transferring to WebKit quickly, so now we prepared for that!
– Fastened a hyperlink to the documentation (moved to a brand new area)

Model 2.0 | 23 Jan 2013
– Complete remodeling almoust from the bottom up
– Much more highly effective. Added help of recent browsers, OS, structure engines, units and different options
– New detection algorithm
– Now you’ll be able to detect model of OS and structure engine with each CSS and JavaScript
– Up to date demos
– New testing instrument added (see Dwell preview)
– Changed Firefox browser title from ”.mozilla” to ”.firefox”
– Changed “ie” property to “msie” in JavaScript API (so now it’s browser.msie)
– Changed Mac OS from ”.mac” to ”.macos”
– The identical 4kb (minified)!

Model 1.0.5 | 01 Jan 2013
– Fastened window width detection

Model 1.0.4 | 28 Dec 2012
– Added OS: win8, win7, vista, xp
– Added Retina shows detection

Model 1.0.3 | 27 Dec 2012
– Added iOS detection help
– Fastened important bug with Safari browsers
– Different adjustments and bug fixes

DOWNLOAD/LIVE PREVIEW
Source

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.