How to detect a particular feature through JavaScript with HTML

Feature detection in JavaScript allows you to check if a browser supports specific HTML5 features before using them. This ensures your web application works across different browsers and devices.

Using Native JavaScript Feature Detection

You can detect features using native JavaScript without external libraries:

// Detect audio support
function supportsAudio() {
    return !!document.createElement('audio').canPlayType;
}

// Detect video support
function supportsVideo() {
    return !!document.createElement('video').canPlayType;
}

// Detect canvas support
function supportsCanvas() {
    var canvas = document.createElement('canvas');
    return !!(canvas.getContext && canvas.getContext('2d'));
}

// Test the features
console.log('Audio supported:', supportsAudio());
console.log('Video supported:', supportsVideo());
console.log('Canvas supported:', supportsCanvas());

Audio supported: true
Video supported: true
Canvas supported: true

Using Modernizr Library

Modernizr is a popular JavaScript library that detects HTML5 and CSS3 features. Include it in your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

Then use it to detect features:

if (Modernizr.audio) {
    console.log('Audio is supported');
    // Enable audio features
    document.getElementById('audio-player').style.display = 'block';
} else {
    console.log('Audio not supported');
    // Show fallback message
    document.getElementById('fallback-message').style.display = 'block';
}

// Check multiple features
if (Modernizr.canvas && Modernizr.webgl) {
    console.log('Advanced graphics supported');
} else {
    console.log('Using basic graphics fallback');
}

Audio is supported
Advanced graphics supported

Detecting Local Storage

Check if the browser supports localStorage:

function supportsLocalStorage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

if (supportsLocalStorage()) {
    console.log('LocalStorage is available');
    localStorage.setItem('test', 'value');
} else {
    console.log('LocalStorage not supported, using cookies');
}

LocalStorage is available

Comparison of Detection Methods

Best Practices

Always provide fallbacks for unsupported features and test gracefully rather than assuming support. Use feature detection early in your application lifecycle to determine which functionality to enable.

Conclusion

Feature detection ensures cross-browser compatibility by checking support before using HTML5 features. Use native JavaScript for simple checks or Modernizr for comprehensive detection.