Fullscreen API

Pseudo classe Fullscreen par défaut sur l'élément pour lequel dans le cas de document c'est html. Ne fonctionne pas avec F11 Standard (Edge) :

document.documentElement.requestFullscreen();
document.exitFullscreen();

Passer en plein écran Quitter le plein écran

Préfixes

Mozilla (Firefox) :

Passer en plein écran Quitter le plein écran

Mozilla (Firefox)

Webkit (Chrome, Opera, Safari) :

Passer en plein écran Quitter le plein écran

Microsoft (10 ≤ Internet Explorer ≤ 11) :

Passer en plein écran Quitter le plein écran

div:fullscreen { }

backdrop

Passer en plein écran

The el in the above example now matches the :fullscreen selector, and can be styled in that mode:

https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/

Examples:

• Go to http://robnyman.github.com/fullscreen/
• Click on the 'fullscreen' button. => Fullscreen mode is on and background become red => OK, works as intended
• Press escape or F11 or click on the 'cancel fullscreen' button => OK, works as intended
• Now, press F11 => fullscreen is on but page background remains yellow. html:-moz-full-screen { background: red; } doesn't work.
• With F11 Fullscreen still enabled, click on the 'fullscreen' button => Background become red.
• With F11 Fullscreen still enabled, click 'cancel fullscreen' => Nothing happens.

Issues: 1: You can't cancel fullscreen mode programmatically if it has been toggled on with F11 2: When triggered with F11 no event is fired and CSS ':-moz-full-screen' is not supported. 3: You can toggle fullscreen mode with the JS API when F11 fullscreen is already on. This leads to confusion for developers as well as for users. 4: To cancel fullscreen mode with their keyboard, users need to press either ESC or F11 depending on how they enabled fullscreen mode. This is confusing. 5: Lets say you are creating a game and would like to offer fullscreen mode to your players. As far as i am aware, you cannot keep track of whether the fullscreen mode is enabled or not since F11 fullscreen doesn't trigger events. So for instance you can not reliably change the visual aspect of your fullscreen button accordingly (like with a 'toggle on' icon and a 'toggle off' icon).

Expected results:

I think the Fullscreen API and F11 fullscreen should behave the same.

FWIW, F11 fullscreen and API Fullscreen behave inconsistently in Webkit too. I can confirm that this happens. F11 behavior has an animation and doesn't seem to be consistent with the fullscreen API. We're building games using this, and Firefox is the only major browser that is showing issues with fullscreen.

https://caniuse.com/fullscreen