Making Sense of HTML5 with SharePoint: Internet Explorer 9 Capabilities

Let’s take as a sort of given that the majority of people who use SharePoint, at least for Intranets, are using Internet Explorer. I know that’s a big assumption, and in most organizations it’s not fully true. Many people choose to go rogue from the standards and use other browsers, most front end developers refuse to use IE, etc.

So why make the assumption, you might ask? Well, I want to focus first on the HTML5 capabilities that organizations that use SharePoint can reasonably expect to use. Knowing that the majority of real users (maybe not the people reading this article) use IE as their browser means that our palette is somewhat limited. The fact that many users out there in the real world are still using IE8, IE7, or yes, even IE6 makes it even worse.

So let’s go with the using IE assumption, but allow that the version is IE9. Without that, this HTML5 stuff is all pipe dreams and smoke. When I I use the IE Developer Tools to set IE9 to IE7 or IE8 modes, I get a measly 42 / 500 points at the HTML5Test site. It’s hardly worth bothering with HTML5 goodness at that point. The HTML5Please site takes a different slant and gives a good,. clear overview of the capabilities of the different levels of IE. Without IE9, not so much. When can I use… shows every single HTML5 capability in tables for each browser level. The point is, there’s lots of information out there about what we should use, use with assistance like shims or shivs, use with fallbacks, or avoid. There’s no real excuse for developing something that won’t work with a known browser base.

So let’s look at the major cool HTML5 stuff that we can do if our users are on IE9, taking the majority of the information from looking across the sites mentioned above. I captured the images (yes, they are just images – no interactivity) from the HTML5Rocks Playground.

Elements

HTML5 Elements

Elements give us ways to prepare our content to live out on the Semantic Web. For us SharePointilists building internally focused applications it may be of less interest, but over time as content gets wrapped in these elements, we’ll be able to more easily reuse and redisplay content in different contexts.

Canvas

HTML5 Canvas

Canvas may be the HTML5 capability that has the most people excited. Canvas gives us a container into which we can add graphics on the fly using script. ‘Nuff sed on this one for now. I’ll show some cool demos later.

Video

HTML5 Video

Everyone loves a good video player, and HTML5 makes it oh-so-easy. Well, sort of. There are some odd inconsistencies due to the different standard which different browsers support, but remember that we’re focused on IE here, at least for now. We get a nice video player without any plug-ins or add-ons. See HTML5Video.org for demos and examples.

Audio

HTML5 Audio

Similar to the video player, we get an easy to use audio player. It’s basically the same thing from the user standpoint – it looks like the video player, but without the video part – but the way we set things up is a little bit different (but still really easy).

Now What?

So, that looks like a pretty short list, doesn’t it? Unfortunately, it is. The more I dig into this HTML5 stuff, the more I feel that while HTML5 as a standard contains a lot of great stuff, the browsers just aren’t there yet. Or they are too inconsistent for us to reliably build HTML5-based capabilities without using a lot of shimming.

But it’s not all bad. In the next set of articles in the series, I’ll show you how to take advantage of the capabilities above and then get into some of the others that you can use with the appropriate shims and fallbacks.

This post also appeared at NothingButSharePoint.com on 2012-04-27. Visit the post there to read additional comments.