09

Think outside the box with the Fullscreen API

The browser used to be a box that could only fill as much of the screen as the OS permitted. Pages were trapped within the confines of the browser window. Time to bust out of this joint! How? Fullscreen API, that's how! With the Fullscreen API you can make any element (video & games, anyone?) go fullscreen, that includes the full page if you want.

What'cha gonna do with it then?

That's one tiny christmas alien...
Click the button to make the whole page go fullscreen

How would that go, matey?

Again, this is an easy to understand and straight-forward API. You can call requestFullScreen on any element in the DOM to make it go fullscreen (although fullscreen access is not guaranteed). You can detect when an element goes fullscreen by listening to the fullscreenchange event, and check which element is in fullscreen mode by calling document.fullscreenElement.

Once an element is in fullscreen mode you can apply specific styles to it with the :full-screen pseudo-selector. We used this selector to make the image as wide as the screen in the example above.

As there is a significant security risk in this fancy feature, browser-builders took some precautions. Chrome, as well as Firefox, won't allow anything to go fullscreen unless it is triggered by direct user action (ie. a click or keyboard input). In addition to that, a big message is displayed warning you that your browser is now in fullscreen mode. This warning can also be used by the user to deny or allow fullscreen for this window. There are some other cases where the browser vendors took precautions, so you might want to look into that before going to all out and salting your app heavily with Fullscreen API goodness.

To see what a hostile website could do, go check out Feross Aboukhadijeh's article "Using the HTML5 Fullscreen API for Phishing attacks" (don't worry, the link is safe — it just describes what happens).

Useful?

If you're building games or are working with video, it is a must-have. Other things you could do with it include (but not limited to):

  • Make your fullscreen presentations in HTML (we know some of you already do this)
  • Full-screen gaming
  • Kiosk-style apps (you'd probably need something more here though; wouldn't want people to exit full-screen mode)

Now, how'bout them source?

Opera is the only one with an un-prefixed version. Firefox, Chrome and Safari support the API but only with a prefix. IE is absent from the supported list.

Show me the source!

Feel free to stroll about, enjoy the fresh sea air and look up the various source files we used for this example.