Just been playing with full-screen mode in Chrome, which lets any element become full-screen (not just video, as I think it was envisioned in earlier days). Wanting to get this working nicely on mobile devices, I’ve also done some experimenting with graceful degradation / progressive enhancement as it applies to full-screen mode.
Basic Version
Although you can full-screen any element, I decided to full-screen the entire body, then use a kind of classy HTML to show what needs to be shown in full-screen mode. (Mainly because I’m using a component that wasn’t immediately working when I full-screened it directly.)
I’m using a full-screen toggle element, here’s the CoffeeScript:
- $('#fullScreen').click (ev) ->
- if document.webkitIsFullScreen then document.webkitCancelFullScreen() else document.body.webkitRequestFullScreen()
Note that you cancel on document (that’s the only thing you can cancel on), but you set it on any element (though you actually can’t set it on document!). Also, note that the user could manually hit escape to exit, so don’t think that you’re always in control of full-screen state. Hence the webkitIsFullScreen check instead of trying to maintain state in a flag variable.
Following the Classy HTML pattern, the CSS here is based on a new pseudo-selector which gets applied to the body element. We can easily decide what to include in full-screen mode. In this case, as the SCSS below shows, I’ve simply elevated the map element above everything else, but knock yourself out.
- :-webkit-full-screen {
- #map {
- position: absolute;
- z-index: 2000;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- }
And no, it’s not just for Webkit…go check out MDN’s full-screen docs for more info.
Graceful Degradation Version
But what if there’s no full screen mode? We can still make that full-screen toggle useful by expanding content to max out the browser screen, even though the browser itself can’t switch into full screen mode. So here’s another crack at it, where we use the true Classy HTML pattern, i.e. instead of styling according to the built-in full-screen pseudoselector, we make our own “fullScreen” class. If the document is in either :-webkit-full-screen or “fullScreen” state, we’ll max out the important content.
- fullScreenEnabled = (typeof(document.webkitCancelFullScreen)!='undefined')
- $('#fullScreen').click (ev) ->
- if fullScreenEnabled
- if $('body:-webkit-full-screen').length
- document.webkitCancelFullScreen()
- else
- document.body.webkitRequestFullScreen()·
- else # oh well, at least we can big up the content inside the browser
- console.log('full not enabled')
- if $('body').hasClass('fullScreen')
- $('body').removeClass('fullScreen')
- else
- $('body').addClass('fullScreen')
The style is exactly the same as before, just with two selectors involved. Something like this, in theory:
- :-webkit-full-screen,.fullScreen {
- #map {
- position: absolute;
- z-index: 2000;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- }
But in practice, for some hair-pulling reason, non-webkit browsers will ignore that entire rule, so I had to duplicate it:
- :-webkit-full-screen {
- #map {
- position: absolute;
- z-index: 2000;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- }
- /* As DRY as mud...but I found this duplication required */
- .fullScreen {
- #map {
- position: absolute;
- z-index: 2000;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- }
Now the full-screen toggle works for all browsers. But full-screen enabled browsers get the nice bonus of busing out of the browser tab and taking up the entire desktop.
(Again, I confess, this is me messing around with webKit only for now. The graceful degradation stuff does work with Firefox of course, though it could do more than just that. I haven’t used full-screen on Firefox simply because there are other components not working on Firefox, and this post is based on practical experience. It’s well-supported on both Firefox though as well as Chrome.)
HTML5 Full Screen Mode: Quick Notes http://t.co/GftYDhxz
Updated that HTML5 full-screen post to cover graceful degradation. (Occupy full browser tab instead of full desktop.) http://t.co/zd9Kns7W
Pingback: Dew Drop – February 25, 2012 (#1,274) | Alvin Ashcraft's Morning Dew
RT @johnallsopp: HTML5 Full Screen Mode: Quick Notes http://t.co/D3tbWHhW
RT @mahemoff: On el blog: HTML5 Full Screen Mode: Quick Notes http://t.co/g7uDrEm2
Take HTML5 fullscreen: http://t.co/hox4I9ob As @liquidlev likes to say, ‘I’ve had that feature for a while’. #apple #fullscreen
HTML5 Full Screen Mode Quick Notes http://t.co/47tBjKz1 via @pryourblog
Quick note addition to your quick note: I gave this a try (thx for the inspiration) and added a fullscreen of document.body – imagine my suprise to get a plain black screen (Chrome v18 beta).
Turns out my body tag has a class that gives it style “position: relative” (with offsets zero), and when fullscreened this seems to cause problems – perhaps it removes some fake “outer element”.
Fullscreening document.documentElement works fine instead in this case….
HTML5 Full Screen Mode: Quick Notes http://t.co/JXRMZj4I
RT @remotesynth: Some tips from @mahemoff on using the #HTML5 full screen mode http://t.co/lsJOmh0U
Thanks @schmerg, hopefully I can get this working in Firefox too and we can then see if it’s a Chrome quirk.