Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Features detected by Modernizr
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in browsers. It provides both CSS classes and JavaScript properties to help developers create progressive enhancement strategies.
How Feature Detection Works
Modernizr adds CSS classes to the <html> element and creates JavaScript properties on the Modernizr object. This allows you to apply styles or run scripts only when features are supported.
// Check if canvas is supported
if (Modernizr.canvas) {
console.log("Canvas is supported!");
} else {
console.log("Canvas not supported - provide fallback");
}
Complete Feature Detection Reference
| Feature | CSS Class | JavaScript Check |
|---|---|---|
| @font-face | .fontface | Modernizr.fontface |
| Canvas | .canvas | Modernizr.canvas |
| Canvas Text | .canvastext | Modernizr.canvastext |
| HTML5 Audio | .audio | Modernizr.audio |
| HTML5 Audio Formats | N/A | Modernizr.audio[format] |
| HTML5 Video | .video | Modernizr.video |
| HTML5 Video Formats | N/A | Modernizr.video[format] |
| rgba() Colors | .rgba | Modernizr.rgba |
| hsla() Colors | .hsla | Modernizr.hsla |
| border-image | .borderimage | Modernizr.borderimage |
| border-radius | .borderradius | Modernizr.borderradius |
| box-shadow | .boxshadow | Modernizr.boxshadow |
| Multiple Backgrounds | .multiplebgs | Modernizr.multiplebgs |
| CSS Opacity | .opacity | Modernizr.opacity |
| CSS Animations | .cssanimations | Modernizr.cssanimations |
| CSS Columns | .csscolumns | Modernizr.csscolumns |
| CSS Gradients | .cssgradients | Modernizr.cssgradients |
| CSS Reflections | .cssreflections | Modernizr.cssreflections |
| CSS 2D Transforms | .csstransforms | Modernizr.csstransforms |
| CSS 3D Transforms | .csstransforms3d | Modernizr.csstransforms3d |
| CSS Transitions | .csstransitions | Modernizr.csstransitions |
| Geolocation API | .geolocation | Modernizr.geolocation |
| HTML5 Input Types | N/A | Modernizr.inputtypes[type] |
| HTML5 Input Attributes | N/A | Modernizr.input[attribute] |
| localStorage | .localstorage | Modernizr.localstorage |
| sessionStorage | .sessionstorage | Modernizr.sessionstorage |
| Web Workers | .webworkers | Modernizr.webworkers |
| Application Cache | .applicationcache | Modernizr.applicationcache |
| SVG Support | .svg | Modernizr.svg |
| SVG Clip Paths | .svgclippaths | Modernizr.svgclippaths |
| SMIL Animation | .smil | Modernizr.smil |
| Web SQL Database | .websqldatabase | Modernizr.websqldatabase |
| IndexedDB | .indexeddb | Modernizr.indexeddb |
| Web Sockets | .websockets | Modernizr.websockets |
| Hashchange Event | .hashchange | Modernizr.hashchange |
| History API | .historymanagement | Modernizr.historymanagement |
| Drag and Drop | .draganddrop | Modernizr.draganddrop |
| Cross-window Messaging | .crosswindowmessaging | Modernizr.crosswindowmessaging |
| Custom Test API | N/A | Modernizr.addTest(name, fn) |
Practical Example
// Check multiple features
if (Modernizr.canvas && Modernizr.localstorage) {
// Use canvas with local storage
console.log("Advanced features available");
} else {
// Provide alternative experience
console.log("Basic fallback needed");
}
// Check video format support
if (Modernizr.video.h264) {
console.log("H.264 video supported");
}
Conclusion
Modernizr provides comprehensive feature detection for modern web technologies. Use these detections to implement progressive enhancement and ensure compatibility across different browsers and devices.
Updated on: 2026-03-15T23:18:59+05:30
646 Views
Advertisements