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
How to check web browser support in HTML5
Checking web browser support for HTML5 features is essential for creating compatible web applications. This guide shows you how to detect HTML5 features using both modern JavaScript methods and the Modernizr library.
Using Modernizr Library
Modernizr is a popular JavaScript library that detects HTML5 and CSS3 features. Here's how to check for web worker support:
<!DOCTYPE HTML>
<html>
<head>
<title>Web Worker Support Check</title>
<script src="/js/modernizr-1.5.min.js"></script>
<script>
function checkWebWorkerSupport(){
if (Modernizr.webworkers) {
alert("Congratulations!! You have web workers support.");
} else {
alert("Sorry!! You do not have web workers support.");
}
}
</script>
</head>
<body>
<button onclick="checkWebWorkerSupport()">Check Web Worker Support</button>
</body>
</html>
Native JavaScript Feature Detection
You can also check HTML5 features without external libraries using native JavaScript:
<!DOCTYPE HTML>
<html>
<head>
<title>Native HTML5 Feature Detection</title>
<script>
function checkHTML5Features() {
// Check Web Workers
const hasWebWorkers = typeof Worker !== 'undefined';
// Check Local Storage
const hasLocalStorage = typeof Storage !== 'undefined';
// Check Canvas
const canvas = document.createElement('canvas');
const hasCanvas = !!(canvas.getContext && canvas.getContext('2d'));
// Check Geolocation
const hasGeolocation = "geolocation" in navigator;
// Display results
document.getElementById('results').innerHTML = `
<p>Web Workers: ${hasWebWorkers ? '? Supported' : '? Not Supported'}</p>
<p>Local Storage: ${hasLocalStorage ? '? Supported' : '? Not Supported'}</p>
<p>Canvas: ${hasCanvas ? '? Supported' : '? Not Supported'}</p>
<p>Geolocation: ${hasGeolocation ? '? Supported' : '? Not Supported'}</p>
`;
}
</script>
</head>
<body>
<button onclick="checkHTML5Features()">Check HTML5 Support</button>
<div id="results"></div>
</body>
</html>
Common HTML5 Feature Detection Methods
| Feature | Detection Method | Modernizr Property |
|---|---|---|
| Web Workers | typeof Worker !== 'undefined' |
Modernizr.webworkers |
| Local Storage | typeof Storage !== 'undefined' |
Modernizr.localstorage |
| Canvas | canvas.getContext('2d') |
Modernizr.canvas |
| Geolocation | "geolocation" in navigator |
Modernizr.geolocation |
Best Practices
When implementing feature detection, always provide fallbacks for unsupported features. Test your detection code across different browsers and versions to ensure reliability.
Conclusion
HTML5 feature detection ensures your web applications work across different browsers. Use native JavaScript for simple checks or Modernizr for comprehensive feature detection with polyfill support.
303 Views
