Fullscreen API not working if triggered with F11

You can use the display-mode: fullscreen media query which properly captures both Fullscreen API changes and F11.

CSS version:

#fullscreen::before {
    content: 'not ';
}

@media (display-mode: fullscreen) {
    #fullscreen::before {
        content: none;
    }
}

<span id='fullscreen'>fullscreen</span>

JavaScript version:

const el = document.getElementById('fullscreen')

const query = matchMedia('(display-mode: fullscreen)')
const handler = e => {
    el.innerHTML = (e.matches ? '' : 'not ') + 'fullscreen'
}

handler(query)
query.addListener(handler)

<span id='fullscreen'></span>

It seems impossible as of now.

See this question that was asking exact same thing. But it's an evolving situation that deserves being revisited from time to time, so here are some details I gathered.

One comment there said:

This fullscreen window mode is OS dependent, only at an app level, and not tied to any API available to us poor web-devs. [...] You won't find any cross-browser/cross-OS hack (I don't even know any for my own browser/OS). The only way you could get something would be through [a] more powerful API, giving you an application access to the browser's window.

The API that allows to programmatically control fullscreen state is defined in fullscreen spec, and I was hoping it would shed light on the issue. Browsers do not fully implement it yet (e.g. document.exitFullscreen() is not implemented in Chrome and document.webkitExitFullscreen() does not return a Promise), but it gives hints about where things are going. Unfortunately it does not mention the pre-existing full-screen browser feature (the one triggered by F11), so it's difficult to say how this would evolve.

For now, F11-fullscreen and programmatic-fullscreen are 2 different things, although not entirely isolated from one another. Also, on macOS for example, browser's "full screen" feature is completely different, as it does take the whole screen but can still leave address bar and/or tabs shown.

If you check this demo page for a library that wraps browser-specific implementations, you can see that:

• When programmatically setting body or any element fullscreen, the browser applies special CSS rules (e.g. background becomes black).
• This does not happen with F11-fullscreen
• This also does not happen with programmatic fullscreen on document (document.documentElement), so that's the closest you can get from F11-fullscreen.

But that does not make F11-FS and programmatic-FS-on-doc-element equivalent:

• animated transitions are different (and actually a bit clunky for example on Firefox and programmatic-fullscreen on document element, as it fades to black in anticipation of black background, but there is no black background when fullscreened element is document, as stated above)
• When F11-fullscreened, document.documentElement === (document.msFullscreenElement || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) is false, but true when programmatic-fullscreen-on-document-element (verified on Chrome & Firefox & IE11)
• F11 key can exit programmatic-fullscreen, but programmatic-exitFullscreen cannot exit F11-fullscreen. Which is the problem you are running into. Also, Esc key cannot exit F11-fullscreen, but does exit programmatic-fullscreen.

So, what should we do then?

Since there are 2 different features, maybe it's OK to leave them be: if users enter F11-fullscreen, they will know how to exit by just pressing the same key again. If they enter programmatic-fullscreen with your UI controls, make sure you make it as obvious how to exit. It might be (understandably) frustrating as a dev not to be able to control both 100%, but in practice users will probably be fine, as they will use one or the other.

Use shortcut.js for manipulation the pressed key. It's good.

Exemple code :

shortcut.add("F11",function() {
    alert("F11 PRESS");
});

Or

JSFiddle Exemple