Understanding a javascript code snippet

Question

Hello, I was wondering if someone could explain me this piece of code, it activates the Full Screen mode of the browsers, however I wanted to understand and also wanted to know if "Document.fullscreenElement" is something native or something created by the person who did.

function toggleFullScreen() {
if (!document.fullscreenElement && !document.mozFullScreenElement
        && !document.webkitFullscreenElement
        && !document.msFullscreenElement) {
    if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement
                .webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
}

Answer 1

Properties with and without prefixes

• The document.fullscreenElement, requestFullscreen and document.exitFullscreen are native, but only newer browsers support it

• The document.mozFullScreenElement, mozRequestFullScreen and document.exitFullscreen are native to older browsers with Mozilla technology, such as outdated Firefox browsers (probably still supported to maintain backward compatibility), the moz is a prefix used for experimental features in Mozilla browsers or features that only exist in these browsers, CSS in Mozillas also uses the -moz, prefix

• The document.webkitFullscreenElement, webkitRequestFullscreen and document.mozCancelFullScreen are native to outdated Chrome and Safari browsers (probably still supported to maintain backward compatibility), the webkit is a prefix used for experimental functionality in Webkit browsers or features that only exist in these browsers, CSS in Blink and Webkit also uses the -webkit, prefix

• The document.msFullscreenElement, msRequestFullscreen and document.msExitFullscreen are used by only IE11

The use of document.fullscreenElement

To properties document.fullscreenElement, document.mozFullScreenElement, document.webkitFullscreenElement and document.msFullscreenElement, return the element that is in fullscreen, if you have nothing in fullscreen will return null, in case your code is being used to check if there is nothing in fullscreen to run the code, if it is, it will run the document.exitFullscreen (or with prefixes)

---

The Reason to use the prefixes Moz, ms, Webkit

Today virtually all browsers use only document.fullscreenElement, the code you are using is what we call backward compatibility or reverse compatibility, is a term widely used in gaming console, but is fully valid for almost anything, the goal of retro-compatibility is to support older technologies, chance the user has an older browser, or computer that does not support newer browsers.