master-class is a JavaScript library that allows you to target mobile browser functionality with CSS. It's designed to be used in websites that support many types of mobile browsers.

For example, you can use master-class to show high resolution images to devices with a high pixel density like the iPhone4:

/* Show high resolution images to lower pixel density devices */
.hd #image {
  background: url(high-resolution.png); 
  background-size: 100%; 

/* Show low resolution images to everything else */
.no-hd #image { 
  background: url(normal-resolution.png); 

master-class adds classes to the <html> element which lets you target browsers by:

The current master-class is: <html class="">

Master Class is an open-source component of Mobify.


Using master-class

master-class works by adding classes to the <html> element which allows you to target browsers with specific properties. To use master-class:

  1. Include the master-class JavaScript file in page
  2. Add the default master classes to the <html> element on your page:
    <html class="no-js no-os no-touch no-hd">

The following master classes are available:

The source code for master-class is available on GitHub.


Inspiration from Modrnizr, jQuery, and feedback from @nico604


© 2010 Mobify

master-class may be freely distributed under the MIT license.