HTML5 and SharePoint 2010 (and the IE9 Beta) 4

With the release of the IE9 Beta yesterday (http://ie.microsoft.com/testdrive/) I’ve already started getting questions about whether HTML5 / CSS3 can be used with SharePoint. There is technically nothing that would stand in the way of using either with SharePoint (note, the page won’t validate as proper HTML5 code… but that should be obvious). That being said, I thought it would be interesting to take some SharePoint 2010 master pages and change the DOCTYPE to HTML5 and see how they look in the IE9 Beta. So I changed out the typical DOCTYPE with:

   
<!DOCTYPE HTML>

Also note, by default, most SharePoint 2010 master pages have the following meta tag in them:


<meta http-equiv="X-UA-Compatible" content="IE=8" />

This locks the page to displaying in IE8 rendering even in IE9, so I had to change this to IE=9 as well. With the DOCTYPE set and the meta tag changed, the master pages renders as an HTML5 page. Here is how the modified v4.master renders:

image

The biggest problem I see here is the scrollbar at the bottom shouldn’t be there. I tested this in the latest Chrome build and the scrollbar isn’t there, so I’m guessing this is something SharePoint injects just for IE. I’m not sure what causes that, but in theory, if there is a work around for that issue, we should be able to create SharePoint 2010 sites that leverage all of the great new HTML5 functionality (such as: Canvas, Web Fonts, Border Radius, etc.).

Remember that I was testing this by forcing the page to render in IE9 mode. Without me forcing it, IE9 would display a typical SharePoint 2010 without any problems at all because the browser will use the IE8 rendering engine. Check out, how IE9 renders my custom master page, after I Pin it to the taskbar:

image

Notice that the Favicon is shown in the taskbar and the Back and Forward buttons are colored in a similar shade to the icon. That was all automagic behavior… pretty cool. BTW – I can’t figure out how to get Aero Glass turned on for my Remote Desktop to my VM, so that’s why we don’t see the cool transparency stuff.

Now, we just need to wait until all the latest browsers are installed on the majority of machines so that we can actually rely on using these new HTML5 / CSS3 techniques. For now, I’m off to try out some rounded corners in SharePoint 2010 and HTML5.

 

Update October 5th 2010:

I played around with the canvas tag using this example: https://developer.mozilla.org/en/Canvas_tutorial%3aDrawing_shapes. Here is the result loaded in a Content Editor Web Part:

image

As you can see, I used the Canvas to draw a unique little thought bubble. Pretty cool!

Its also worth noting that I did see another problem with SP2010 layout in IE9 / HTML5, take a look at the New Page dialog:

image

Hopefully they can get that cleaned up with an update or something.

4 thoughts on “HTML5 and SharePoint 2010 (and the IE9 Beta)

  1. Reply Christian Stahl Sep 17,2010 3:52 pm

    Hi Randy!

    Yes, now after the release of IE9 beta, it´s a good time to preparing for some cool HTML5 stuff in SP2010. I really like this new IE9 beta!

    IE9 seems to be a bit stricter when we come to stuff like content overflow, absolut positioning.

    One way to avoid the this scroll is to use CSS3 for the overflow-x property.

    _____________________________
    html{
    overflow-x:hidden
    }
    body #s4-workspace{
    overflow:visible;
    }
    _____________________________

    // Christian Ståhl

  2. Reply Todd Sep 25,2010 12:05 am

    Internet Explorer 6 added a horizontal scroll bar to documents that had deprecated and invalid HTML tags:
    See Where Did that Scroll Bar Come From?

    Perhaps this is also happening in the IE9 beta.

  3. Reply Kevin Graeme Oct 10,2010 9:51 am

    Nice test, Randy. While I love some of the features of HTML5, the retro simplicity of the tags like the doctype not including a version reference is just begging for failure when HTML5.1 or whatever comes along. That’s what got us into trouble back in the early days of HTML with no doctypes!

    By the way, border-radius is part of the CSS3 spec, not HTML5 and has been supported in Firefox and Webkit browsers for a while (both wish custom browser css extensions and more recently natively).

  4. Reply Daniel C. Kline Mar 7,2012 1:29 pm

    Hi Randy. I loved your SharePoint Branding Book. It was a great help in learning SharePoint Branding. Along those lines I have a way to resolve those differences between the regular SharePoint page styles and the Dialog Pages in my blog SharePoint 2010: Dealing With MasterPage Customizations on the Dialog Pages, and an Introduction to Modernizr. http://paratechnica.com. It’s the least I can do to repay you for the guidance while I was learning.

Leave a Reply