Full Blog -Here
The basics
- Simplify the DOCTYPE
Before the DOCTYPE was:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
With HTML5 you only need:<!doctype html>
Please note that using this DOCTYPE can cause issues with JavaScript in IE8. Use at your own risk. - Removed xmlns from the HTML tag
Before the HTML tag was:<html lang="" dir="" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr">
We can omit xmlns because it is not required by HTML5 (it is required by XHTML). Our new HTML tag is:<html lang="" dir="" runat="server" __expr-val-dir="ltr">
- Removed trailing slashes from self closing tags within the HEAD element that are not SharePoint controls
That was a mouthful. HTML5 doesn’t require that you self close tags. You certainly can if you want to, it will still validate. I took them out for the fun of it. Here is an example of before:<meta http-equiv="Expires" content="0"/>
And then after:<meta http-equiv="Expires" content="0">
- Changed X-UA-Compatible from IE8 to IE9
IE8 doesn’t support HTML5 so we have to tell SharePoint to render based on IE9. Here is the tag before:<meta http-equiv="X-UA-Compatible" content="IE=8"/>
Once the change is made:<meta http-equiv="X-UA-Compatible" content="IE=9">
Please note that changing the IE meta tag can cause issues with JavaScript in IE. Use at your own risk. I have started a list of identified bugs at the end of this article that I will add on to as issues are discovered. - Simplify the character encoding
Another HTML5 gem, the character encoding can be much shorter. Here is the tag before:<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
And you know the drill by now, here is the tag after the change:<meta charset="utf-8">
- Removed type=”text/css” from link tags and type=”text/javascript” from script tags
In HTML5 is is assumed that your link tags are for CSS and script tags are for JavaScript. Here is the before:<script type="text/javascript"> <link rel="stylesheet" type="text/css" href="file.css" />
And the after:<script> <link rel="stylesheet" href="file.css" />
- Add the HTML5 shiv (shim)
So far our changes have been pretty tame. But we are about to start adding new tags to the master page such as <section> and <nav>. Seeing these tags usually makes people assume they can’t use HTML5 until the year 2022 (I didn’t make that up… it is a real misconception). The truth is you can add a tag in your HTML that says <gettinjiggywithit> and use CSS to style it and almost every browser will render the page just fine (and no, it won’t validate). The exception being Internet Explorer version 8 and earlier. If you toss <gettinjiggywithit> to IE and add some styles, your styles will be completely ignored. This applies to our new HTML5 tags as well. In order for IE8 (and older) to properly render your page, you need to add the HTML5 shiv (also referred to as shim) to your master page. Here is the code:<!--[if lt IE 9]> <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
The first line is a conditional comment that is only read by IE. It translates to “if this is Internet Explorer lower than version 9, do the following”. For those of you who say “what about users who have JavaScript disabled?” – If your users have JavaScript disabled they aren’t going to be using SharePoint very well to begin with.
No comments:
Post a Comment