Supporters of End User
Web

HTML5 and SharePoint 2010 - Part 3: Adding the Code

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Branding; HTML5; CSS; Site Manager/Power User; MOSS; WSS; 2010

You may also be interested in: Mobilize SharePoint Webinar by Sitefinity

 

Editor's note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield

In my first two articles (one and two) on HTML5 and SharePoint 2010, I provided an overview of HTML5, what it is, and why it is important for us SharePoint Branding folks to start learning it and using it. I've already provided a quick introduction on how to add the fundamental HTML5 elements to SharePoint but let us now review this proess in greater detail so that we build a solid foundation of HTML5 and how it will interact with SharePoint.

  1. Open your SharePoint 2010 development site in SharePoint Designer 2010 and create a copy of your v4.master found in the _catalogs/masterpage directory. For this example, I renamed my Master Page copy v4-html5.master.
  2. 2013-06-21-SharePoint2010HTML5-Part03-01.png

  3. Open your custom Master Page in SPD in Advanced Editing Mode, select the code view, and near the top, normally just before your <html> tag, look for <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. 2013-06-21-SharePoint2010HTML5-Part03-02.png

  5. Replace the existing DOCTYPE tag with the following HTML5 doctype. Note: make sure you replace the entire tag, often split in two lines in SPD.
    <!DOCTYPE html>
  6. 2013-06-21-SharePoint2010HTML5-Part03-03.png

  7. Now look for the meta tag, X-UA-Compatible, found in the head section. It should look like: <meta http-equiv=”X-UA-Compatible” content=”IE=8” />
  8. 2013-06-21-SharePoint2010HTML5-Part03-04.png

    Update the “content” value to either “IE=9”, “IE=edge” or ever better “IE=edge,chrome=1”.

    2013-06-21-SharePoint2010HTML5-Part03-05.png

  9. Add an additional script tag to link to html5shim somewhere in your head section. <!--[if lte IE 8]> <script type="text/javascript" src=”//html5shim.googlecode.com/svn/trunk/html5.js” /> <![endif]-->
  10. 2013-06-21-SharePoint2010HTML5-Part03-06.png

That is about it. You can now begin to add additional HTML5 elements such as <header>, <footer>, <nav>, etc. to this new HTML5 Master Page that is mostly backwards compatible with IE7 and IE8, as well as use CSS2 and CSS3 to providing styling. You can also begin to use the multimedia elements such as <canvas>, <audio> and <video>. Easy right?

Wait, What? What is Going On? Explain Please!

2013-06-21-SharePoint2010HTML5-Part03-07.png

Before I go on I would like to discuss these first five steps in greater detail to give you an understanding of what each step is doing. Step one is standard procedure, we need to open SPD and create our own copy of a Master Page, in our case a copy of the v4.master, as you never, ever make edits directly to the OOTB v4.master Master Page. In Step two we look for the doctype so that we can modify this in step three. Step three is straight forward enough as well, we are changing the doctype from XHTML 1.0 Strict to HTML5, but what is nice is how lean the doctype is. With html 4.1, XHTML 1, etc we had to have a very long doctype but now it’s just fifteen characters.

Note: When you change the doctype in SPD, SPD will now recognize your Master Page as for IE6 and still with CSS 2.1. I mentioned this in my previous article if you would like to review why and what this means. There is no current work-around and unfortunately this is also the case with SharePoint Designer 2013 Preview at this time. Basically if you are going to use HTML5 in SPD, you will only use the code view, but since that is going away in SPD 2013 you might as well start getting use to it.

Step four

Ah, now it is starting to get interesting. We update the X-UA-Compatible meta element because this tag tells IE9, and soon IE10, to render all pages in your SharePoint site in IE8 mode. Why you might ask? When Microsoft built the web interface to SharePoint they used html and JavaScript code that was only compatible in IE8 so for IE9 to render everything correctly, IE 9 had to be told to revert to IE8 standards. Note: This is only relevant to IE, Firefox, Chrome and Safari will ignore this X-UA-Compatible meta tag for all intensive purposes. If we keep the X-UA-Compatible content value as IE8 then IE9 and IE10 will not be able to use the full power of HTML5 as IE8 cannot properly render HTML5 code. But switching to IE9 compatibility can cause problems as certain aspects of SharePoint will not natively work in IE 9, in fact you might have already noticed that parts of SharePoint will not work in later version of Firefox, Chrome or Safari either. These issues include drag and drop web parts while in Edit mode, the people picker and more. The more is the real gotcha as there is no solid list that I have found of what breaks when changing X-UA-Compatible to IE9 so we cannot know for sure what will break on us.

Now I am recommending IE=edge,chrome=1 as the value for the content tag. The reason why is that IE has been, and supposedly will continue to support the IE=edge value to mean always render the page in the latest mode possible. This means that IE8 will render in IE8 mode, IE9 will render in IE9 mode and when IE 10 is released it should render the page in its latest mode. Adding the chrome=1 value tells the browser to render in Google Chrome Frame if available. You can learn more about GCF from https://developers.google.com/chrome/chrome-frame/ and http://www.chromium.org/developers/how-tos/chrome-frame-getting-started. The value of GCF is beyond the scope of this article so we will come back to this later on. It’s easy to add now, so let’s just do it so.

Why don’t we stop here for now? Next time I will explain step five in greater detail. We will then look at a few optional modifications that you may chose to make as well as review a few pre-build HTML5 Master Pages for SharePoint 2010. Until then,

Comments

Amrinder  Singh

TOPZ10S

This is very nice site for me

Posted 16-Jul-2013 by Amrinder Singh
kaino

I just stumbled upon

I just stumbled upon your informative blog and desired to say that I have really enjoyed reading your very well written blog posts. t mobile customer services

Posted 05-Jan-2014 by kaino
kjaini

This is my first opportunity

This is my first opportunity to visit this website I found some interesting things and I will apply to the development of my blog. income support contact number

Posted 08-Jan-2014 by kjaini
ak8nd

il ike

The Winer nor the RSS-DEV Working Group had Netscape's involvement, they could not make an official claim on the RSS name or format. This has fueled ongoing controversy in the syndication development community as to which entity was the proper publisher of RSS.http://www.stockholmcitynet.net |
http://www.subversiondeloshechos.com |
http://www.moleculareconomist.com |
http://www.sinkorswimphiladelphia.com |
http://www.dallas-paragliding.com |

Posted 15-Jan-2014 by ak8nd
rajakala

Mr......

Well, very good post with informative information. I really appreciate the fact that you approach these topics from a stand point of knowledge and information. This is the first time, I visited at your site and became your fan. You are bookmarked. Please keep on posting. garcinia fat loss dr oz

Posted 26-Jan-2014 by rajakala
rajakala

garcinia cambogia extract

You might write about the services on the blog. You should disclose it's refreshing. Your blog conclusion could accelerate your shoppers garcinia cambogia extract

Posted 26-Jan-2014 by rajakala
sadieuro

This is quite fantasti

This is quite fantastic post. It affects a lot of urgent challenges of our society. We can not be untouched to these issues. This post gives a lot of wonderful information and inspiration. Well done. how to heal Plantar Fasciitis

Posted 19-Feb-2014 by sadieuro
jorggray

123

I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. http://kellysdiamonds.com/engagement-rings/custom-made-engagement-rings/

Posted 20-Feb-2014 by jorggray
coach outlet store online

http://www.coachoutletstoreinc.com/

We know the old adage - that April showers bring coach factory outlet - but we're impatient! We want those heartwarming, spirit-lifting plants to blossom now! You just never know, and even on coach outlet store online when you're not looking for trouble, trouble could find coach factory outlet; in the form of a good ol' fashion fisticuffs.This coach outlet store roundup mourns Peaches Geldof, celebrates tiffany jewelry's marriage, embraces spring, and reveals the face of a new coach factory fragrance.Even if we're not Fashion tiffany and co bound, we're always seeking coach outlet online. This time it comes in the form of michael kors outlet online, classic stripes, and statement heels.The true religion jeans is always chic and exact. There is such a sense of michael kors outlet in wearing steely gray, especially when you do it with coach outlet. What you might not know: what a day in the life of a pro celine outlet really looks like. If you're unsure, I'll make it easy for you to decide: the coach factory outlet is YES.The tasty treats from toms shoes company are hittin' the spot with their sweet breakfast-y flavor and adorable elephant shape.alexander wang shoes to the present day, the alexander wang bags features stunning costumes but is still not dramatic enough to do justice to its glamorous subject.So, when celine bags offered me the chance to stay at a hotel, have a consultation with a sleep doctor and have my own little sleep sanctuary, that was an offer I definitely wasn't about to turn down.The toms usa has just opened a new website, so now you can see what you've been missing out on.

Posted 09-Apr-2014 by coach outlet store online
alksdsajdksfs

alksdsajdksfs

Wide (44 mm) stainless steel Replica Watches housing the new watch Alpina Sport polished black PVD bezel matching the color of Rolex Replica the shield. Note the presence of Orange of data, and minute hands, which is one of Hublot Replica Watches the colors that best resistant to "absorb" ... In fact, more that we're going to dive, more light and more colors.

Posted 16-Apr-2014 by alksdsajdksfs

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: