Something about backformation or analogy to vendor prefixed APIs.

19 Nov 2013

There's a few APIs that exist on the web created by backformation-y analogy from vendor-prefixed APIs, but they won't actually work. In web browsers...which is weird.

Prefixed document.mozRequestFullScreen document.mozFullScreenElement

Not Real document.requestFullScreen document.fullScreenElement

Real document.requestFullscreen document.fullscreenElement

There may be code with similar capitalization bugs for the rest of the Fullscreen APIs. I wouldn't be surprised.

Here's an example from Hulu:

AppHelper.isFullScreen = function() {
  return document.fullScreenElement ||
         document.mozFullScreen ||
         document.webkitIsFullScreen ||
         $('video').get(0).webkitDisplayingFullscreen;
};

(My favorite part is uppercase Screen in webkitIsFullScreen vs lowercase screen in webkitDisplayingFullscreen.)

And here's one I randomly grabbed from Github search:

document.body.requestFullScreen = document.body.webkitRequestFullScreen ||
                                  document.body.mozRequestFullScreen ||
                                  document.body.requestFullScreen;

Can you guess what will happen when (if?) browsers remove their prefixed versions? undefined city. (You can actually observe this using Opera 12, which implemented the Fullscreen API without prefixes.)

I remember complaining about this on Twitter a year ago and my friend Lon had a pretty great solution (editorialized to add semicolons; sorry not sorry):

for (var k in window) {
  window[k.toUpperCase()] = window[k];
}
window.REQUESTFULLSCREEN();

Update: Don't actually copy and past that into your site. It's not entirely clear if tweet-code has license issues. Will update again when Legal unblocks me from twitter.

Update 2: Seriously don't even look at that code.

<lawnsea> no i didn't open source that. there's a seat license