Search code examples
javascriptcssscope

Detecting CSS @scope support with JavaScript

Is there a way to detect @scope support via JavaScript?

I've tried: CSS.supports('@scope') or CSS.supports(':scope') but both of those are returning false in browsers that do support it.

I tried CSS.supports('selector(:scope)') but that returns true in browsers that don't support @scope yet (like Firefox), I checked and it returns false for selector(:invalid).

I'm currently thinking of adding a style with @scope { :scope { --supports-scope: true; } } to the body and using that, but would love an easier way.

Solution

  • typeof CSSScopeRule != 'undefined' from comments