-
Book Overview & Buying
-
Table Of Contents
You Don't Need JavaScript
By :
Browser support (https://caniuse.com/?search=%3Ahas()) for :has() is already excellent (over 93.7% globally as of March 2026), but it's always smart to plan for the edge cases. That's where @supports comes in.
Think of @supports as CSS's built-in feature detection. Instead of trying to guess which browser is being used, you simply ask the browser: "Do you understand this feature?" If the answer is yes, the styles inside the block apply. If not, they're ignored.
Here's a simple example with :has():
/* Fallback styling */
.feature {
opacity: 0.5;
}
@supports selector(:has(*)) {
.feature:has(.enabled) {
opacity: 1;
}
}
In a modern browser, the @supports query succeeds and the enhanced rule kicks in. In an older browser, it fails gracefully, and the fallback style remains.
One last word on performance: :has() is powerful, but like any relational selector, it asks the browser to do extra work. A rule like article:has...