hoangweb
3/7/2018 - 8:10 AM

Modernizr

browser utils

//keeps track of the results of all of it's feature detections
if (Modernizr.awesomeNewFeature) {
  showOffAwesomeNewFeature();
} else {
  getTheOldLameExperience();
}

/**-------------------------------------------------
 * creating your own feature detects
 */
Modernizr.addTest('itsTuesday', function() {
 var d = new Date();
 return d.getDay() === 2;
});
//now using: not `Modernizr.itsTuesday`
if(Modernizr.itstuesday){}

//examples
Modernizr.addTest('hasJquery', 'jQuery' in window);

//add multiple test
var detects = {
 'hasjquery': 'jQuery' in window,
 'itstuesday': function() {
   var d = new Date();
   return d.getDay() === 2;
 }
}
Modernizr.addTest(detects);

/**-------------------------------------------------
 * media queries
*/
//check if the current browser window state matches a media query.
var query = Modernizr.mq('(min-width: 900px)');
if (query) {
 // the browser window is larger than 900px
}

Modernizr.mq('only all'); // true if MQ are supported, false if not

/**-------------------------------------------------
 *  Events
*/
Modernizr.on('flash', function( result ) {
  if (result) {
   // the browser has flash
  } else {
    // the browser does not have flash
  }
});

//determine if the browser supports a supplied event
Modernizr.hasEvent('blur')  //true

//give an object as a second argument to hasEvent, to detect an event on something other than a div.
.hasEvent('devicelight', window) // true;