CSS.supports to feature detect fullscreen support

Question

I'm trying to feature detect fullscreen API support.

Using CSS.supports(), I cannot understand how to check selectors rather than property/value pairs.
My code looks like:

CSS.supports(':fullscreen {}')

Please note that feature detection by checking if requestFullscreen exists returns a false positive.

Answer 1

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.

Answer 2

It is advisable to use the Modernizr feature detection library for HTML5/CSS3

It has a property to detect full screen : Modernizr.fullscreen

http://modernizr.com/