{ Browser Feature Detector }

// scan your browser features in one click

Instantly detect browser feature support: APIs, CSS, JS, media, storage, and more. Free browser-based tool, no sign-up required.

Detected Browser: Detecting...
🔍

Ready to scan your browser

Click Scan Features to detect support for 60+ browser APIs, CSS features, storage mechanisms, and more.

HOW TO USE

  1. 01
    Open the tool

    Navigate to this page in the browser you want to test. Results are specific to your current browser and device.

  2. 02
    Click Scan Features

    Hit the "Scan Features" button. The tool will instantly probe 60+ browser capabilities in real time.

  3. 03
    Review and filter

    Browse results by category or use the filter tabs to focus on supported, partial, or unsupported features. Copy a report to share.

FEATURES DETECTED

JavaScript APIs CSS Features Storage APIs Media APIs Network APIs Input APIs Graphics APIs Security APIs

USE CASES

  • 🔧 Debugging browser compatibility issues
  • 🔧 Validating progressive enhancement strategies
  • 🔧 Testing before deploying new web features
  • 🔧 Checking device capability for PWAs

WHAT IS THIS?

The Browser Feature Detector scans your current browser and reports which modern web APIs, CSS features, and platform capabilities are available. Results are shown in real time with color-coded support status.

RELATED TOOLS

FREQUENTLY ASKED QUESTIONS

What does Browser Feature Detector check?

It checks 60+ features across 8 categories: JavaScript APIs (Web Workers, Service Workers, WebSockets, etc.), CSS features (Grid, Variables, Animations), Storage (localStorage, IndexedDB, Cache API), Media (WebRTC, Audio/Video APIs), Network (Fetch, WebSocket, Beacon), Input (Touch, Pointer, Gamepad), Graphics (Canvas, WebGL, WebGPU), and Security (Crypto, CSP, Permissions API).

Are results accurate for my browser version?

Yes. Every check is performed live against your actual browser's JavaScript runtime. There are no cached or database-driven results — the tool directly probes each feature using standard detection techniques like property existence checks, constructor tests, and CSS.supports().

What does "Partial" support mean?

Partial support indicates the feature exists in your browser but may have limited functionality, require a vendor prefix, or lack some sub-features. For example, WebGL might be available but WebGL2 may not be supported. Always test the specific sub-features your app requires.

Does this tool send data to a server?

No. Everything runs entirely in your browser. No data is transmitted to any server. All detection logic is pure client-side JavaScript, making it safe to use with any browser, including private or incognito modes.

How is this different from caniuse.com?

Can I Use shows historical data about browser support across versions. This tool detects your specific browser's real-time capabilities. It's useful when you need to confirm what your exact environment supports — not what a browser version theoretically should support according to published specs.

Can I export the results?

Yes. After scanning, click "Copy Report" to copy a formatted text summary to your clipboard. The report lists every feature, its category, and support status — useful for sharing with team members or including in bug reports.

What Is a Browser Feature Detector?

A browser feature detector is a tool that probes your current web browser and reports which modern web platform capabilities are available in real time. Unlike static compatibility tables, a feature detector runs directly in your browser and gives you ground-truth results about what your specific environment supports right now.

Web developers have relied on feature detection — rather than browser sniffing — since the early 2000s. Libraries like Modernizr popularized the technique, but today the modern web platform exposes enough introspective APIs that you can build accurate detection tools with vanilla JavaScript alone.

Why Feature Detection Matters in Modern Web Development

The web is an incredibly diverse platform. At any given moment, users visit websites using dozens of different browsers, versions, operating systems, and device types. Each combination supports a slightly different subset of the web platform. Progressive enhancement and graceful degradation — two foundational strategies in resilient web development — both depend on knowing what your environment actually supports before you try to use it.

Relying on browser version strings is notoriously unreliable. User agent strings can be spoofed, modified, or misleading, and even knowing the browser version doesn't always tell you which features are enabled. Feature detection bypasses this entirely by directly testing whether a capability exists and functions correctly.

What Features Can Be Detected?

Modern browsers expose hundreds of APIs, and most can be checked with simple JavaScript tests. This tool covers eight major categories:

How Feature Detection Works Under the Hood

Each check in this tool uses one of a few standard detection patterns:

Property existence checks test whether an object or property exists on a known global: 'serviceWorker' in navigator tells you if the Service Worker API is available. Constructor checks verify that a class can be instantiated: typeof WebSocket !== 'undefined'. CSS.supports() queries the browser's CSS engine directly: CSS.supports('display', 'grid') is the most reliable way to detect CSS layout feature support.

Some features require a combination of checks. WebRTC detection, for example, tests for RTCPeerConnection, its prefixed equivalents, and the getUserMedia API separately, since browsers have rolled these out piecemeal over several years.

Reading the Results

Results are organized by category and displayed with three status levels. Supported (green) means the feature is fully available and ready to use. Partial (yellow) means the API exists but may be prefixed, limited, or missing key sub-features. Unsupported (red) means the feature is not detected in your current environment.

A feature showing "Partial" support is particularly important to investigate before using in production. For example, a browser might support the Clipboard API for reading text but not for reading images. Always test the specific sub-features your application actually needs.

Practical Applications

This tool is useful in a variety of scenarios. When debugging a compatibility issue reported by a user, you can ask them to run the scan and share the report — the plain-text output makes it easy to include in bug reports or support tickets. When evaluating progressive enhancement strategies, you can use the results to decide which features to polyfill and which to make optional. When testing PWA or offline features, the storage and network API results show exactly what's available for your Service Worker implementation.

Front-end engineers testing new features before shipping them can use this tool to validate their own dev environment, and then share the report with QA to confirm parity across test devices. Mobile developers can load this page on a target device to see which device-specific APIs — like geolocation, sensors, or the Web Bluetooth API — are available.

Browser Feature Detection vs. Browser Detection

It's worth emphasizing why the industry moved away from browser detection (sniffing the user agent string) toward feature detection decades ago. Browser detection is brittle: browsers change, user agents get spoofed, and a browser that didn't support a feature last year might support it today. Feature detection tests the actual capability, not the browser's identity.

The principle is simple: don't ask "is this Chrome?" — ask "does this browser support WebGL?" The former can be wrong; the latter is definitively true or false in the current execution context. This tool embodies that philosophy by running every test against your live browser rather than looking up your user agent in a database.