Using CSS.supports(), I cannot understand how to check selectors rather than property/value pairs.
The CSS.supports()
method and the @supports
at-rule only support (oddly enough) checking support for property-value pairs, not selectors.
Generally, a JS-based workaround for detecting support for a CSS selector is to feed it to document.querySelector()
and seeing if that causes an exception — if it does, then the browser does not support that selector. The main problem with this is with pseudo-classes and pseudo-elements that are implemented with prefixes; since different prefixes will invalidate a selector for different browsers, you'll have a very hard time testing for vendor-specific versions of a selector.
Specifically for the fullscreen API, David Storey has an excellent article covering most of what you need to know about making it work cross-browser. It includes a snippet of code that covers feature detection for the API:
The following code tests to see if the Fullscreen API is enabled using all the relevant prefixes, except Webkit’s version of the old syntax:
if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || document.mozFullScreenEnabled) { // add Fullscreen API code here. Remember all the prefixes } else { // in reality you should use fallback code here alert("Your browser doesn’t support the fullscreen API"); }
Note that the standard syntax is used unprefixed as well as prefixed for WebKit/Blink and IE. The old syntax is uses for Firefox.