One thing which has been very important when it comes to creating special end user experiences have been the ability to show something fullscreen, effectively hiding all the other content etc.
Remember when web sites gave you instructions how to configure your web browser with hiding toolbars and more, just to get a slightly better user experience? Or maybe it’s just me… :-)
Either way, some time ago we got fullscreen support in web browsers where the user could choose to view the current web site in fullscreen. That’s all good and well, but as an extension to that, as web developers we want to be able to trigger that. Either for the entire web site or just a specific element.
And now we can!
Requesting fullscreen
We now have access to a method called requestFullScreen, so far implemented in Firefox, Google Chrome and Safari. Therefore, to make it work at the moment, we need this code:
Please note that the Fullscreen standard in the W3C specification uses a lowercase ‘s’ in all methods, whereas Firefox, Google Chrome and Safari use an uppercase one.
What the code above does is just getting a reference to the documentElement and request for it to be displayed fullscreen. Naturally, you could also make just a certain element fullscreen, for instance, a video, with the same method called for the element you wish.
Cancelling fullscreen
If you want to cancel the fullscreen state, you need to call it on the document element:
Note here that W3C has decided to call it exitFullscreen, but in all existing web browser implementations it’s about cancelling the state.
Detecting fullscreen state change
The user could, for instance, exit fullscreen, something that might be good for you to know. For that we have a fullscreenchange event, that you can apply both to the element that requested fullscreen, but also to the document. Then we just detect the fullscreen state and take act accordingly, like this:
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);
Styling fullscreen
In CSS, we get a number of pseudo-classes for styling fullscreen elements. The most reliable one is for full-screen and automatically gets triggered when the document/element is in fullscreen mode:
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
Notice here that the W3C approach doesn’t use a hyphen between the word ‘full’ and the word ‘screen’.
It should also be added that Firefox is the only web browser that applies a width and height of 100% to the element that is requesting fullscreen, since we believe that is the desired behavior. This can of course be overridden with the above CSS.
Full screen with key input
For security reasons, most keyboard inputs have been blocked in the fullscreen mode. However, in Google Chrome you can request keyboard support by calling the method with a flag:
docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
This does not work in Safari, and the method won’t be called.
With Firefox, we are discussing and looking into various ways of how we we could add keyboard input support without jeopardizing the end user’s security. One suggestion, that no one has implemented yet, is the requestFullscreenWithKeys method, which in turn would trigger certain notifications for the user.
Web browser support
This feature is currently available in Firefox beta, but it’s due to land in the official release of Firefox, version 10, tomorrow! It has also been available in Google Chrome since version 15 and Safari since 5.1.
Play with fullscreen!
I have a Fullscreen API demo available for you to play with, and all the code is available in the Fullscreen repository on GitHub.
27 comments
Post a comment