Fun with fullscreen

I had to do a little research into the HTML5 Fullscreen API for work this past week. I ended up creating a couple utility classes that I thought could be shared.

February 22, 2015

I needed to manage the visibility of a couple elements based on whether or not the fullscreen mode was enabled. So I created a couple classes that would control this behavior.

I actually got the idea from the Bootstrap CSS framework. They have several responsive utility classes for targeting the visibility of elements, depending on the screen size breakpoint.

So I fashioned my own utility classes after Bootstrap’s pattern, naming them .visible-fullscreen and .hidden-fullscreen. Here is the working demo (modern browser required):

When you look at the CSS for this to work, it seems pretty straightforward. Actually, that’s not the case at all. I have Autoprefixer enabled on the pen, so this is all I have to write in order to target a fullscreened (that’s a word now) element:

:fullscreen .your-element-here {
  /* css stuff */
}

This is what you’d have to write if you coded all the styles by hand:


:-webkit-full-screen .your-element-here {
  /* css stuff */
}
:-moz-full-screen .your-element-here {
  /* css stuff */
}
:-ms-fullscreen .your-element-here {
  /* css stuff */
}
:fullscreen .your-element-here {
  /* css stuff */
}

Yep, one for each major browser, plus the actual standard, which is what everybody will use eventually. (That’s what we developers tell ourselves, anyway.) At least using post-processors like Autoprefixer saves us having to write more CSS.