Per-Element FullScreen API

I have been following the developments on Chromium channel and one thing which caught my attention last week is the fullscreen API. As the name suggests, the API supports “per-element” fullscreen on the browser. Traditionally browsers have been supporting fullscreen mode for the entire page but not for the elements on the page. This API will be handy if you want to focus on a particular piece of information on the page. Most of the analytics application can make use of this API to show more detailed information. I have worked on applications which spans across two monitors as it displays huge amount of information. With this API, I can utilize the real estate effectively. Multimedia contents can also be shown on fullscreen. The API, which is based on the Mozilla’s proposal, has two JavaScript methods: requestFullScreen() and cancelFullScreen(). Check out the demo here.

How do we use it?

The API includes the following methods to all the elements in the DOM:

• requestFullScreen(): Requesting the browser to render the current element in fullscreen. On using this method, the keys will be disabled and the element will not receive any keyboard events. This is to protect the users from potential phishing attacks in fullscreen mode. 
• requestFullScreenWithKeys(): Same as requestFullScreen() but with access to keyboard events.
• cancelFullScreen(): Use this method to return back to the normal mode.

These methods have been added to all the elements in the DOM. Apart of this, a new attribute allowfullscreen has been added for the iframe element. You can also listen to the event fullscreenchange to know the state of the element. Three CSS pseudo elements have also been added: :full-screen, :full-screen-doc and :full-screen-root-with-target. Using these pseudo elements, you can control how you want your elements to appear in fullscreen mode.

Criticism:

The proposal received many criticism from the security experts. Some of the concerns are:

• Attackers can request fullscreen and pre-empt keyboard focus. Your security credentials could possibly be stolen.
• Increased chances for phishing attacks.
• One could open up fullscreen mode without user interaction (which in my opinion is very bad). 

The aforementioned concerns can be addressed if control is given to the users to allow / deny fullscreen mode. Also, plug-ins should be disabled in the fullscreen mode.

Browser Support:

• Safari 5+ (with webkit prefix)
• Chrome 14+ (with webkit prefix). Chrome 14 requires the flag: –enable-fullscreen. It has been enabled by default in Chrome 15 (not yet released at the time of this post)
• Implementation of the API is in progress for Firefox. It is expected to be available as part of Firefox 10.

Check out this page for demo. More details can be found here. 

-- Varun