Last updated
Feature Detection vs User Agent Sniffing
Feature detection checks whether a specific API or capability exists in the current browser, rather than trying to identify the browser by its user agent string. Feature detection is the correct approach — user agent strings are unreliable, easily spoofed, and don't tell you what the browser actually supports. The Modernizr library popularized feature detection; today, most checks can be done with native JavaScript.
Common Feature Checks
JavaScript
const features = {
// Storage
localStorage: typeof localStorage !== 'undefined',
sessionStorage: typeof sessionStorage !== 'undefined',
indexedDB: 'indexedDB' in window,
// APIs
serviceWorker: 'serviceWorker' in navigator,
webWorker: typeof Worker !== 'undefined',
webSocket: typeof WebSocket !== 'undefined',
geolocation: 'geolocation' in navigator,
notifications: 'Notification' in window,
clipboard: 'clipboard' in navigator,
// Media
webRTC: 'RTCPeerConnection' in window,
mediaDevices: 'mediaDevices' in navigator,
speechSynthesis: 'speechSynthesis' in window,
// CSS (via JS)
cssGrid: CSS.supports('display', 'grid'),
cssFlexbox: CSS.supports('display', 'flex'),
cssVariables: CSS.supports('--test', '0'),
cssContainerQ: CSS.supports('container-type', 'inline-size'),
};
Object.entries(features).forEach(([name, supported]) => {
console.log(`${name}: ${supported ? '✓' : '✗'}`);
});