Share via


Fullscreen API Changes

With Microsoft Edge, you can update your sites to match the latest Fullscreen API standard and simplify cross-browser code.

Going prefix-free

An implementation of the Fullscreen API was introduced in Internet Explorer 11. Due to the in-flux state of the standard, it was prefixed to represent its experimental state.

In Microsoft Edge, the Fullscreen API gets official support in the browser and the methods, properties, events, attributes and CSS selectors have been unprefixed.

The following table provides the two versions.

Unprefixed API Prefixed API Type Description
requestFullscreen msRequestFullscreen Method Requests full-screen display of an image, video, or other element.
exitFullscreen msExitFullscreen Method Returns an element to its original size from full-screen mode.
fullscreenElement msFullscreenElement Property Returns the top or current element that's being displayed in full-screen mode. Otherwise it returns undefined.
fullscreenEnabled msFullscreenEnabled Property Returns true if a document lets elements be displayed in full-screen mode. Otherwise it returns false.
fullscreenChange MSFullscreenChange Event Fires when an element is displayed in full-screen mode, or when it exits full-screen mode.
fullscreenError MSFullscreenError Event Fires when a full-screen display is requested of an element, but this request can't be fulfilled.
:fullscreen :-ms-fullscreen Pseudo class Enables you to set specific CSS properties based on whether an element is in full-screen mode or not.
::backdrop ::-ms-backdrop Pseudo element Enables you to set the background properties when an element is displayed in full-screen mode.
allowfullscreen allowfullscreen Attribute Enables an iframe's content to display in full-screen mode. If missing, only the iframe (and not the content within the frame) can go to full-screen mode.

 

The recommended approach is to continue to use feature detection and support prefixing for all major browsers as is shown in many of the code samples on the Fullscreen API page.

Additionally, to provide improved compatibility with legacy code around the World Wide Web, many of the items above also support their webkit-prefixed variants as aliases.

Fullscreen API