CSS Feature Detection with @supports (No Modernizr)
CSS feature detection without JavaScript
Detecting CSS feature support required JavaScript: either Modernizr, inline CSS.supports() checks, or testing computed styles. @supports lets CSS apply styles conditionally based on whether the browser supports a given property and value.
// JS: detect support, add classif (CSS.supports('container-type', 'inline-size')) { document.documentElement.classList.add('has-container-queries');}@supports (display: grid) { .layout { display: grid; }}css featurequeries Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
Detection and fallback in one place
@supports keeps feature detection in CSS where the styles live. No JS, no class toggling, no DOM mutation to apply a CSS branch.
Supports not, and, or
@supports not (), @supports (a) and (b), and @supports (a) or (b) cover all combinatorial cases for progressive enhancement.
Selector detection too
@supports selector(:has()) tests whether a CSS selector is supported, which is useful for detecting newer pseudo-classes before using them.
How it works
Progressive enhancement with JavaScript meant detecting support, adding a class to the root element, then writing separate CSS for that class. This split the feature logic across two files and required JS to run before styles applied correctly. That's a fragile dependency.
@supports is a CSS conditional block. Styles inside only apply when the browser supports the tested declaration. @supports not provides a fallback path. @supports selector(:has()) tests selector support. Because the detection is in CSS, no JavaScript is needed and styles are self-contained.