A very simple javascript plugin for browser detection that just add related classes to html element.
You can try it with this DEMO.
braowser.js can detect :
- Operating system
- Mobile or Touch Screen
- Browser
- Browser version
- Screen resolution
- Browser detection enhancements on Microsoft Edge (previoulsy detected as Opera)
- Adding DEMO page.
<html class="mac firefox v-48 retina"><html class="windows ie v-9">To use braowser.js just add this following line in your head element (braowser.js doesn't need jquery or something else to work).
<script type="text/javascript" src="/path/to/braowser.min.js"></script>Or using npm
npm install braowserThat's it!
- mac
- windows
- linux
- windows_phone
- android
- ios
- if mobile is detected braowser.js add "mobile" class to html element.
- if touch screen is detected braowser.js add "touch" class to html element.
- chrome
- safari
- firefox
- edge
- ie
- opera
if devicePixelRatio >= 2 braowser.js add "retina" class to html element.
html.ie.v-8{
border: 1px solid #999;
}
html.safari,
html.chrome{
-webkit-font-smoothing: subpixel-antialiased;
}
html.retina{
background-image:url(image@2x.png);
}// Only javascript
if((' ' + document.documentElement.className + ' ').indexOf('ie v-8') > -1){
// Do something if browser is IE8
}
// With braowser function (purely javascript)
if(braowser_hasClass('ie v-8')){
// Do something if browser is IE8
}
// with jQuery or Zepto
if($('html').hasClass('ie v-8')){
// Do something if browser is IE8
}
// With ES6 import
import braowser_init, braowser_hasClass from "braowser";
// then you can use :
if(braowser_hasClass('ie v-8')){
// Do something if browser is IE8
}
// or use braowser_init to launch braowser again (this function is launched by default)
braowser_init();We're always looking for:
- Bug reports, especially those for aspects with a reduced test case
- Pull requests for features, spelling errors, clarifications, etc.
- Ideas for enhancements