特征检测的最佳方法：focus-within 伪类

Question

I can't find any syntax using @supports that works with pseudo-class, except for not which is very specific to that pseudo-class.

What is the best way to detect if a browser supports focus-within, as I don't want to write a lot of browser hacks that will change in a few versions? I'm using Node and npm, but don't want to import a whole package for it (usually not the best way to handle things).

Trying to read the browser version string or use today's browser parsing hacks isn't a good idea because it will be difficult to maintain when browsers do start supporting a feature, so I'm looking for a feature detection method besides @supports. Is there a way to determine this in javascript?

Answer 1

Since it's a pseudo class and therefor part of selectors, you would need the @supports selector (…) syntax here - but browser support for that specifically is not very good yet. (Basically just Firefox as of now.)

With some quick research I came across https://github.com/Modernizr/Modernizr/issues/2270 though - part of a discussion regarding implementing a test for this in the Modernizr library. User patrickkettner suggests the following JavaScript solution:

Actually. There is a simpler way.

document.querySelector throws on invalid selectors. You can just call document.querySelector(':focus-within') within a try-catch, if it doesn't throw it should be supported. We may find a browser that gives a false result, in which case we would need to actually test the style. However, in the mean time since it is a modern feature, we should be good with just that sniff test for now

Since this basic test still seems to be all Modernizer is doing in that regard currently ( https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/focuswithin.js ), I guess this should be safe to use.