Free tools Windows power users keep installed
One-click scans. No signup required.
Use Modernizr to test whether a browser supports a capability, then adapt your JavaScript or CSS to the result. It is more reliable than guessing from a browser name or version, but a passing test does not prove that an implementation works correctly in every situation.
What Modernizr detects and how results are exposed
Modernizr runs feature tests and exposes their results on the Modernizr object. For example, a test for Canvas can be read in JavaScript as Modernizr.canvas. By default, Modernizr also adds feature classes to the root HTML element: a supported feature gets its feature class, while an unsupported feature gets a class prefixed with no-. These outputs let you choose an enhancement or fallback based on capability rather than browser identity. See the Modernizr documentation.
As an Amazon Associate I earn from qualifying purchases.
Set up a build with the tests your page needs
- Open the official Modernizr download and build interface.
- Select the feature detects the application actually relies on; avoid treating an arbitrary collection of tests as a substitute for deciding what behavior needs support.
- Download or otherwise include the generated script in the page before code that reads its results or relies on its generated classes.
- Check that the chosen build includes each property you use. A missing test cannot provide a meaningful result.
Modernizr’s documentation describes configurable feature detects and configuration options including classPrefix, enableClasses, and enableJSClass. Their effects depend on the build and configuration you include; consult the documentation for the version in use rather than assuming defaults have not changed.
Branch in JavaScript on a built-in result
With a build that includes the Canvas test, use the boolean result to choose the relevant path:
#1 Best Overall
if (Modernizr.canvas) {
drawWithCanvas();
} else {
showCanvasFallback();
}Replace the example functions with application code. A true value indicates the test passed; it does not establish that every Canvas operation, device, or workload will behave correctly. Where a failure would be consequential, also handle errors and test the actual user-facing operation.
Use generated classes for CSS fallbacks and enhancements
When the build enables classes, style both the supported and unsupported cases. For example, if the selected build adds canvas or no-canvas to the root element:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.no-canvas .chart {
/* Provide a non-canvas presentation. */
}
.canvas .chart {
/* Apply styles for the canvas-capable experience. */
}Use the class names that the loaded build actually generates. If classes are disabled or customized, adjust the CSS or configuration accordingly. CSS classes are useful for styling; use the JavaScript result when you need to choose application logic.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Register a custom feature test
Use Modernizr.addTest when the capability you need is not covered by a built-in test. The name is lowercased when exposed as a property, so choose a clear key and read it in lowercase:
Rank #3
Modernizr.addTest('featurekey', function () {
return /* boolean check for the capability the application needs */;
});
if (Modernizr.featurekey) {
useFeature();
} else {
useFallback();
}Replace the comment with a real test that returns a boolean. Do not use a generic proxy for the capability: for example, checking that an API object exists may not establish that the specific operation your page needs works. The documentation also describes registering multiple tests with an object of names and values or functions. Keep custom tests focused and ensure they run at a time when the required browser APIs are available.
Choose a CSS helper that matches the question
Modernizr provides different helpers for different kinds of CSS capability checks. Pick the one that measures the condition your code depends on:
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
testProp: test support for an unprefixed CSS property.testAllProps: check a property including prefixed forms.prefixed: resolve a supported prefixed property name.mq: test whether a media query is valid or supported.testStyles: inject styles and inspect resulting DOM or style behavior when the test requires rendered behavior.
These helpers are not interchangeable. A property/value check does not necessarily answer whether a layout or rendered effect works as intended. Modernizr 3 documentation notes that some CSS helpers use CSS.supports() where available; confirm behavior against the API and build version your page loads. See the API documentation.
Validate behavior, not just the detection result
A positive detection is evidence that a test passed, not a universal guarantee of correct implementation. Modernizr’s policy discussion acknowledges that browser vendors can expose APIs with buggy or incomplete behavior, even when the API appears available. For important features, combine detection with defensive error handling and tests of the user-visible flow. The project discusses this limitation in its policies.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common problems and fixes
Modernizris undefined: confirm the generated script loaded successfully and runs before the code that reads it; check the browser console and network request for a load failure.- A property is undefined: verify that the build includes that feature detect and that the property name matches the test’s key. Custom test names are lowercased on the object.
- CSS fallback never applies: inspect the root element’s actual classes, confirm classes are enabled, and check whether
classPrefixorenableJSClasschanges the class you expect. - The test passes but the feature fails: detection can miss buggy or incomplete implementations. Test the operation the application relies on and retain a fallback or error path where needed.
- A CSS helper gives an unexpected result: make sure the helper matches the question—property/value, prefixed property, media query, or rendered behavior—and consult documentation for the loaded Modernizr version.
- Legacy code calls
Modernizr.load: Modernizr 3 release notes deprecated it in favor of using yepnope.js directly and state that yepnope.js must be included forModernizr.loadto work in Modernizr 3. This is version-specific guidance, not proof of the status of every current build or fork; check the exact package you use. See the Modernizr 3 release notes.
Or skip the browser setup
Modernizr detects browser capabilities for your own web experience; it does not capture screenshots. If your task is to produce a website screenshot, ScreenshotNeo provides a one-call API instead of requiring you to set up a browser capture flow. Its API can accept a URL and return an image or PDF. The example below saves the response as a WebP file; see the ScreenshotNeo documentation for request options.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers identifying the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Learn more at ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
