master-class

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:

JavaScript Support
Touch Support
Mobile OS
Orientation
Pixel Density

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

More Examples
Using Master Class

Master Class is an open-source component of Mobify.

Examples

Show high resolution images to high pixel density devices:

low resolution image
high resolution image

img { width: 160px; height: 160px; }
.no-hd img { background: url(no-hd.png); }
.hd img { background: url(hd.png); background-size: 100%; }

Show form elements inline in landscape orientation:
Label:
- landscape orientation
```
form * { display: block; }
.landscape form * { display: inline; }
```

Show different buttons to iOS, Android and BlackBerry devices:

other
ios
android
blackberry

.no-os button { /*...*/ }
.ios button { /*...*/ }
.android button { /*...*/ }
.blackberry button { /*...*/ }

Inform views that a site requires JavaScript:

javascript is disabled
javascript is enabled

.no-os #button { /*...*/ }
.ios #button { /*...*/ }
.android #button { /*...*/ }
.blackberry #button { /*...*/ }

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:

Include the master-class JavaScript file in page
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:

JavaScript Support: no-js, js
Mobile OS: no-os, ios, android, nokia, blackberry
Orientation: portrait, landscape
Orientation classes are only added to devices that support the window.orientation property.
Pixel Density: no-hd, hd, hd15, h20
The hd class is added to all high pixel density devices, while hd15, hd20 are added to devices with specific pixel densities.

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

Thanks

Inspiration from Modrnizr, jQuery, and feedback from @nico604

License

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