INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1832, 3, '2012-01-09 16:24:35', '2012-01-09 20:24:35', 'Document compatibility defines how a browser renders your website.  The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by explicitly declaring the HTML5 document type:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nThis markup triggers standards mode in Internet Explorer 9 and 10.  And it also works well in Chrome and Firefox.  Four steps will get your site ready for many browsers and devices:\r\n\r\n<h2>Step 1: Validate that your site uses standards mode</h2>\r\nCheck whether or not your site is currently in standards mode:\r\n<ol>\r\n<li>Open the website in IE10 platform preview.\r\n<ul><li><strong>Note:</strong> You can also follow the same steps to update the docmode for IE9 only without downloading the preview.</li></ul></li> \r\n<li>Press F12 to launch the IE Developer Tools or find it on the <em>Tools</em> menu as shown below: \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png" alt="" title="dev-tool-menu-1" width="243" height="268" class="alignleft size-full wp-image-1806" /></a>\r\n<ul><li><strong>Note:</strong> If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the <a href="http://msdn.microsoft.com/en-us/library/gg589507%28v=VS.85%29.aspx">following tutorial</a>.</li></ul></li> \r\n<li>Check if your site indicates <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> as shown in the toolbar below:\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1-300x39.png" alt="" title="ie-dev-tools-1" width="300" height="39" class="alignleft size-medium wp-image-1808" /></a>\r\n<em>Click to Enlarge</em></li>\r\n<li>If your site is in <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 Standards</em>, <strong>you’re done!</strong>  Note if the Browser Mode and Document Mode of your site are different than above.  A common example is <em>Browser Mode = IE8</em> and <em>Document Mode = Quirks</em> which indicates that your website was designed for older versions of IE and may not be ready for web standards.  \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2-300x42.png" alt="" title="ie-dev-tools-2" width="300" height="42" class="alignleft size-medium wp-image-1809" /></a></li></ol>\r\n\r\n<h2>Step 2: Implement docmode for web standards</h2>\r\nForce IE10 standards mode to test your website:\r\n\r\n<ol><li>Insert [code lang="html"]&lt;!DOCTYPE html&gt;[/code] into your website’s HTML page\r\n<ul><li>Learn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a></li></ul></li>\r\n<li>Reload your page in the browser and check the <em>Browser Mode</em> and <em>Document Mode</em> again using the F12 Developer Tools.  If <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> are not shown, continue below.</li></ol>\r\n\r\n<h2>Step 3: Determine why your site is not in Standards Mode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n\r\n<ol><li>My page is not in Browser Mode: IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website may flagged in <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx">Compatibility View</a> and forced into an older browser mode to ensure the site functions<ul><li><strong>Resolution:</strong> Check if your site is on the list <a href="http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml">here</a>.  Learn more about the Compatibility View list and request removal <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx#removal">here</a>.</li></ul></li></ul></li>\r\n<li>My page is not in Document Mode = IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website’s doctype is invalid or missing\r\n<ul><li><strong>Resolution:</strong> Check for a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">valid, well-formed doctype</a> like:\r\n[code lang="html"]&lt;!DOCTYPE html&gt;\r\n&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;\r\n&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/code]\r\nLearn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a>.</li></ul></li>\r\n	\r\n<ul><li><strong>Possible Cause:</strong> Docmode being forced via <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible meta tag</a>\r\n<ul><li><strong>Resolution:</strong> Check for code similar to this in the <head> of the page.\r\n[code lang="html"]&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;\r\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt;[/code]\r\n\r\nRemove it and reload your page.  Continue testing.  Learn more about Specifying Document Compatibility Modes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx#SetMode">here</a>.</li></ul></li></li></ol>\r\n\r\n<h2>Step 4: Resolve common IE problems when updating docmode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n<ul><li><strong>Possible Cause:</strong> <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">Conditional comments</a> support browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">conditional comments</a> that run non-standard code.  These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully.  Check for code similar to this:\r\n[code lang="html"]&lt;!--[if IE 8]&gt;\r\n&lt;p&gt;Welcome to Internet Explorer 8.&lt;/p&gt;\r\n&lt;![endif]--&gt;\r\n[/code]\r\nRemove it and reload your page.  Continue testing. Learn more about Conditional Comments <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">here</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">User agent sniffing</a> supports browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">user agent sniffing</a>. These are often used to specifically target a browser based on the user agent string presented via the browser mode.  Check for code similar to this:\r\n[code lang="js"]if (version = /MSIE (\\d+\\.\\d+)/.exec(navigator.userAgent)) {\r\n	isIE = true;\r\nbrowserVersion = parseFloat(version[1]);\r\n}[/code]\r\nStart by implementing <a href="http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx">feature detection</a> where possible with web standards.  Learn more about User-Agent Strings <a href="http://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx">here</a>. The IE10 User-Agent String is located <a href="http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx">here</a>.</li></ul></li></ul>\r\n\r\n<h2>Other reasons my page does not render correctly:</h2>\r\n\r\n<ul><li><strong>Possible Cause:</strong> Your website may be using browser specific features that are no longer supported.  Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Run the <a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/Default.html">Compatibility Inspector tool</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Learn how to create plug-in free experiences.  A complete step-by-step guide will be available shortly.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be loading browser version-specific CSS files:\r\n<ul><li><strong>Resolution:</strong> Ensure layout is avoiding CSS hacks where possible.  Learn more about investigating CSS issues <a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">here</a>.</li></ul></li></ul>\r\n\r\nA list of common problems is available in the <a href="http://msdn.microsoft.com/en-us/library/ff986083(v=VS.85).aspx">IE Compatibility Cookbook</a>. \r\n\r\nIf you’re unable to update your docmode with these resolution steps, tweet us <a href="http://twitter.com/#!/IE">@IE</a> or check the <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads">Forums on MSDN</a>.\r\n\r\nFor further detail, try these articles:\r\n<ul><li><a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">Defining Document Capability</a> @ MSDN</li>\r\n<li><a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">Investigating Document Mode Issues</a> @ MSDN</li>\r\n<li><a href="http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx">Interoperable Quirks Mode in IE10</a> @ IE Blog</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/">Compatibility Inspector tool</a> @ IETestDrive.com</li>\r\n<li><a href="http://www.w3.org/QA/Tips/Doctype">Don’t Forget to Add a Doctype</a> @ W3C.org</li></ul>\r\n', 'Fix common IE problems: Update your Docmode for Web Standards', 0, '', 'inherit', 'open', 'open', '', '1800-revision-27', '', '', '2012-01-09 16:24:35', '2012-01-09 20:24:35', '', 1800, 'http://blog.reybango.com/2012/01/09/1800-revision-27/', 0, 'revision', '', 0),
(1833, 3, '2012-01-09 16:25:00', '2012-01-09 20:25:00', 'Document compatibility defines how a browser renders your website.  The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by explicitly declaring the HTML5 document type:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nThis markup triggers standards mode in Internet Explorer 9 and 10.  And it also works well in Chrome and Firefox.  Four steps will get your site ready for many browsers and devices:\r\n\r\n<h2>Step 1: Validate that your site uses standards mode</h2>\r\nCheck whether or not your site is currently in standards mode:\r\n<ol>\r\n<li>Open the website in IE10 platform preview.\r\n<ul><li><strong>Note:</strong> You can also follow the same steps to update the docmode for IE9 only without downloading the preview.</li></ul></li> \r\n<li>Press F12 to launch the IE Developer Tools or find it on the <em>Tools</em> menu as shown below: \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png" alt="" title="dev-tool-menu-1" width="243" height="268" class="alignleft size-full wp-image-1806" /></a>\r\n<ul><li><strong>Note:</strong> If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the <a href="http://msdn.microsoft.com/en-us/library/gg589507%28v=VS.85%29.aspx">following tutorial</a>.</li></ul></li> \r\n<li>Check if your site indicates <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> as shown in the toolbar below:\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1-300x39.png" alt="" title="ie-dev-tools-1" width="300" height="39" class="alignleft size-medium wp-image-1808" /></a>\r\n<em>Click to Enlarge</em></li>\r\n<li>If your site is in <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 Standards</em>, <strong>you’re done!</strong>  Note if the Browser Mode and Document Mode of your site are different than above.  A common example is <em>Browser Mode = IE8</em> and <em>Document Mode = Quirks</em> which indicates that your website was designed for older versions of IE and may not be ready for web standards.  \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2-300x42.png" alt="" title="ie-dev-tools-2" width="300" height="42" class="alignleft size-medium wp-image-1809" /></a><em>Click to Enlarge</em></li></ol>\r\n\r\n<h2>Step 2: Implement docmode for web standards</h2>\r\nForce IE10 standards mode to test your website:\r\n\r\n<ol><li>Insert [code lang="html"]&lt;!DOCTYPE html&gt;[/code] into your website’s HTML page\r\n<ul><li>Learn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a></li></ul></li>\r\n<li>Reload your page in the browser and check the <em>Browser Mode</em> and <em>Document Mode</em> again using the F12 Developer Tools.  If <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> are not shown, continue below.</li></ol>\r\n\r\n<h2>Step 3: Determine why your site is not in Standards Mode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n\r\n<ol><li>My page is not in Browser Mode: IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website may flagged in <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx">Compatibility View</a> and forced into an older browser mode to ensure the site functions<ul><li><strong>Resolution:</strong> Check if your site is on the list <a href="http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml">here</a>.  Learn more about the Compatibility View list and request removal <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx#removal">here</a>.</li></ul></li></ul></li>\r\n<li>My page is not in Document Mode = IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website’s doctype is invalid or missing\r\n<ul><li><strong>Resolution:</strong> Check for a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">valid, well-formed doctype</a> like:\r\n[code lang="html"]&lt;!DOCTYPE html&gt;\r\n&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;\r\n&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/code]\r\nLearn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a>.</li></ul></li>\r\n	\r\n<ul><li><strong>Possible Cause:</strong> Docmode being forced via <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible meta tag</a>\r\n<ul><li><strong>Resolution:</strong> Check for code similar to this in the <head> of the page.\r\n[code lang="html"]&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;\r\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt;[/code]\r\n\r\nRemove it and reload your page.  Continue testing.  Learn more about Specifying Document Compatibility Modes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx#SetMode">here</a>.</li></ul></li></li></ol>\r\n\r\n<h2>Step 4: Resolve common IE problems when updating docmode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n<ul><li><strong>Possible Cause:</strong> <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">Conditional comments</a> support browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">conditional comments</a> that run non-standard code.  These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully.  Check for code similar to this:\r\n[code lang="html"]&lt;!--[if IE 8]&gt;\r\n&lt;p&gt;Welcome to Internet Explorer 8.&lt;/p&gt;\r\n&lt;![endif]--&gt;\r\n[/code]\r\nRemove it and reload your page.  Continue testing. Learn more about Conditional Comments <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">here</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">User agent sniffing</a> supports browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">user agent sniffing</a>. These are often used to specifically target a browser based on the user agent string presented via the browser mode.  Check for code similar to this:\r\n[code lang="js"]if (version = /MSIE (\\d+\\.\\d+)/.exec(navigator.userAgent)) {\r\n	isIE = true;\r\nbrowserVersion = parseFloat(version[1]);\r\n}[/code]\r\nStart by implementing <a href="http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx">feature detection</a> where possible with web standards.  Learn more about User-Agent Strings <a href="http://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx">here</a>. The IE10 User-Agent String is located <a href="http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx">here</a>.</li></ul></li></ul>\r\n\r\n<h2>Other reasons my page does not render correctly:</h2>\r\n\r\n<ul><li><strong>Possible Cause:</strong> Your website may be using browser specific features that are no longer supported.  Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Run the <a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/Default.html">Compatibility Inspector tool</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Learn how to create plug-in free experiences.  A complete step-by-step guide will be available shortly.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be loading browser version-specific CSS files:\r\n<ul><li><strong>Resolution:</strong> Ensure layout is avoiding CSS hacks where possible.  Learn more about investigating CSS issues <a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">here</a>.</li></ul></li></ul>\r\n\r\nA list of common problems is available in the <a href="http://msdn.microsoft.com/en-us/library/ff986083(v=VS.85).aspx">IE Compatibility Cookbook</a>. \r\n\r\nIf you’re unable to update your docmode with these resolution steps, tweet us <a href="http://twitter.com/#!/IE">@IE</a> or check the <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads">Forums on MSDN</a>.\r\n\r\nFor further detail, try these articles:\r\n<ul><li><a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">Defining Document Capability</a> @ MSDN</li>\r\n<li><a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">Investigating Document Mode Issues</a> @ MSDN</li>\r\n<li><a href="http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx">Interoperable Quirks Mode in IE10</a> @ IE Blog</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/">Compatibility Inspector tool</a> @ IETestDrive.com</li>\r\n<li><a href="http://www.w3.org/QA/Tips/Doctype">Don’t Forget to Add a Doctype</a> @ W3C.org</li></ul>\r\n', 'Fix common IE problems: Update your Docmode for Web Standards', 0, '', 'inherit', 'open', 'open', '', '1800-revision-28', '', '', '2012-01-09 16:25:00', '2012-01-09 20:25:00', '', 1800, 'http://blog.reybango.com/2012/01/09/1800-revision-28/', 0, 'revision', '', 0),
(1834, 3, '2012-01-09 16:25:16', '2012-01-09 20:25:16', 'Document compatibility defines how a browser renders your website.  The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by explicitly declaring the HTML5 document type:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nThis markup triggers standards mode in Internet Explorer 9 and 10.  And it also works well in Chrome and Firefox.  Four steps will get your site ready for many browsers and devices:\r\n\r\n<h2>Step 1: Validate that your site uses standards mode</h2>\r\nCheck whether or not your site is currently in standards mode:\r\n<ol>\r\n<li>Open the website in IE10 platform preview.\r\n<ul><li><strong>Note:</strong> You can also follow the same steps to update the docmode for IE9 only without downloading the preview.</li></ul></li> \r\n<li>Press F12 to launch the IE Developer Tools or find it on the <em>Tools</em> menu as shown below: \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png" alt="" title="dev-tool-menu-1" width="243" height="268" class="alignleft size-full wp-image-1806" /></a>\r\n<ul><li><strong>Note:</strong> If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the <a href="http://msdn.microsoft.com/en-us/library/gg589507%28v=VS.85%29.aspx">following tutorial</a>.</li></ul></li> \r\n<li>Check if your site indicates <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> as shown in the toolbar below:\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1-300x39.png" alt="" title="ie-dev-tools-1" width="300" height="39" class="alignleft size-medium wp-image-1808" /></a>\r\n<em>Click to Enlarge</em></li>\r\n<li>If your site is in <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 Standards</em>, <strong>you’re done!</strong>  Note if the Browser Mode and Document Mode of your site are different than above.  A common example is <em>Browser Mode = IE8</em> and <em>Document Mode = Quirks</em> which indicates that your website was designed for older versions of IE and may not be ready for web standards.  \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2-300x42.png" alt="" title="ie-dev-tools-2" width="300" height="42" class="alignleft size-medium wp-image-1809" /></a>\r\n<em>Click to Enlarge</em></li></ol>\r\n\r\n<h2>Step 2: Implement docmode for web standards</h2>\r\nForce IE10 standards mode to test your website:\r\n\r\n<ol><li>Insert [code lang="html"]&lt;!DOCTYPE html&gt;[/code] into your website’s HTML page\r\n<ul><li>Learn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a></li></ul></li>\r\n<li>Reload your page in the browser and check the <em>Browser Mode</em> and <em>Document Mode</em> again using the F12 Developer Tools.  If <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> are not shown, continue below.</li></ol>\r\n\r\n<h2>Step 3: Determine why your site is not in Standards Mode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n\r\n<ol><li>My page is not in Browser Mode: IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website may flagged in <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx">Compatibility View</a> and forced into an older browser mode to ensure the site functions<ul><li><strong>Resolution:</strong> Check if your site is on the list <a href="http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml">here</a>.  Learn more about the Compatibility View list and request removal <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx#removal">here</a>.</li></ul></li></ul></li>\r\n<li>My page is not in Document Mode = IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website’s doctype is invalid or missing\r\n<ul><li><strong>Resolution:</strong> Check for a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">valid, well-formed doctype</a> like:\r\n[code lang="html"]&lt;!DOCTYPE html&gt;\r\n&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;\r\n&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/code]\r\nLearn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a>.</li></ul></li>\r\n	\r\n<ul><li><strong>Possible Cause:</strong> Docmode being forced via <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible meta tag</a>\r\n<ul><li><strong>Resolution:</strong> Check for code similar to this in the <head> of the page.\r\n[code lang="html"]&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;\r\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt;[/code]\r\n\r\nRemove it and reload your page.  Continue testing.  Learn more about Specifying Document Compatibility Modes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx#SetMode">here</a>.</li></ul></li></li></ol>\r\n\r\n<h2>Step 4: Resolve common IE problems when updating docmode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n<ul><li><strong>Possible Cause:</strong> <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">Conditional comments</a> support browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">conditional comments</a> that run non-standard code.  These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully.  Check for code similar to this:\r\n[code lang="html"]&lt;!--[if IE 8]&gt;\r\n&lt;p&gt;Welcome to Internet Explorer 8.&lt;/p&gt;\r\n&lt;![endif]--&gt;\r\n[/code]\r\nRemove it and reload your page.  Continue testing. Learn more about Conditional Comments <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">here</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">User agent sniffing</a> supports browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">user agent sniffing</a>. These are often used to specifically target a browser based on the user agent string presented via the browser mode.  Check for code similar to this:\r\n[code lang="js"]if (version = /MSIE (\\d+\\.\\d+)/.exec(navigator.userAgent)) {\r\n	isIE = true;\r\nbrowserVersion = parseFloat(version[1]);\r\n}[/code]\r\nStart by implementing <a href="http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx">feature detection</a> where possible with web standards.  Learn more about User-Agent Strings <a href="http://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx">here</a>. The IE10 User-Agent String is located <a href="http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx">here</a>.</li></ul></li></ul>\r\n\r\n<h2>Other reasons my page does not render correctly:</h2>\r\n\r\n<ul><li><strong>Possible Cause:</strong> Your website may be using browser specific features that are no longer supported.  Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Run the <a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/Default.html">Compatibility Inspector tool</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Learn how to create plug-in free experiences.  A complete step-by-step guide will be available shortly.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be loading browser version-specific CSS files:\r\n<ul><li><strong>Resolution:</strong> Ensure layout is avoiding CSS hacks where possible.  Learn more about investigating CSS issues <a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">here</a>.</li></ul></li></ul>\r\n\r\nA list of common problems is available in the <a href="http://msdn.microsoft.com/en-us/library/ff986083(v=VS.85).aspx">IE Compatibility Cookbook</a>. \r\n\r\nIf you’re unable to update your docmode with these resolution steps, tweet us <a href="http://twitter.com/#!/IE">@IE</a> or check the <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads">Forums on MSDN</a>.\r\n\r\nFor further detail, try these articles:\r\n<ul><li><a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">Defining Document Capability</a> @ MSDN</li>\r\n<li><a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">Investigating Document Mode Issues</a> @ MSDN</li>\r\n<li><a href="http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx">Interoperable Quirks Mode in IE10</a> @ IE Blog</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/">Compatibility Inspector tool</a> @ IETestDrive.com</li>\r\n<li><a href="http://www.w3.org/QA/Tips/Doctype">Don’t Forget to Add a Doctype</a> @ W3C.org</li></ul>\r\n', 'Fix common IE problems: Update your Docmode for Web Standards', 0, '', 'inherit', 'open', 'open', '', '1800-revision-29', '', '', '2012-01-09 16:25:16', '2012-01-09 20:25:16', '', 1800, 'http://blog.reybango.com/2012/01/09/1800-revision-29/', 0, 'revision', '', 0),
(1835, 3, '2012-01-09 16:26:48', '2012-01-09 20:26:48', 'Document compatibility defines how a browser renders your website.  The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">explicitly declaring</a> the HTML5 document type:\n\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\n\nThis markup triggers <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">standards mode</a> in Internet Explorer 9 and 10.  And it also works well in Chrome and Firefox.  Four steps will get your site ready for many browsers and devices:\n\n<h2>Step 1: Validate that your site uses standards mode</h2>\nCheck whether or not your site is currently in standards mode:\n<ol>\n<li>Open the website in <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">IE10 platform preview</a>.\n<ul><li><strong>Note:</strong> You can also follow the same steps to update the docmode for IE9 only without downloading the preview.</li></ul></li> \n<li>Press F12 to launch the IE Developer Tools or find it on the <em>Tools</em> menu as shown below: \n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png" alt="" title="dev-tool-menu-1" width="243" height="268" class="alignleft size-full wp-image-1806" /></a>\n<ul><li><strong>Note:</strong> If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the <a href="http://msdn.microsoft.com/en-us/library/gg589507%28v=VS.85%29.aspx">following tutorial</a>.</li></ul></li> \n<li>Check if your site indicates <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> as shown in the toolbar below:\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1-300x39.png" alt="" title="ie-dev-tools-1" width="300" height="39" class="alignleft size-medium wp-image-1808" /></a>\n<em>Click to Enlarge</em></li>\n<li>If your site is in <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 Standards</em>, <strong>you’re done!</strong>  Note if the Browser Mode and Document Mode of your site are different than above.  A common example is <em>Browser Mode = IE8</em> and <em>Document Mode = Quirks</em> which indicates that your website was designed for older versions of IE and may not be ready for web standards.  \n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2-300x42.png" alt="" title="ie-dev-tools-2" width="300" height="42" class="alignleft size-medium wp-image-1809" /></a>\n<em>Click to Enlarge</em></li></ol>\n\n<h2>Step 2: Implement docmode for web standards</h2>\nForce IE10 standards mode to test your website:\n\n<ol><li>Insert [code lang="html"]&lt;!DOCTYPE html&gt;[/code] into your website’s HTML page\n<ul><li>Learn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a></li></ul></li>\n<li>Reload your page in the browser and check the <em>Browser Mode</em> and <em>Document Mode</em> again using the F12 Developer Tools.  If <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> are not shown, continue below.</li></ol>\n\n<h2>Step 3: Determine why your site is not in Standards Mode</h2>\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\n\n<ol><li>My page is not in Browser Mode: IE10\n<ul><li><strong>Possible Cause:</strong> Your website may flagged in <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx">Compatibility View</a> and forced into an older browser mode to ensure the site functions<ul><li><strong>Resolution:</strong> Check if your site is on the list <a href="http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml">here</a>.  Learn more about the Compatibility View list and request removal <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx#removal">here</a>.</li></ul></li></ul></li>\n<li>My page is not in Document Mode = IE10\n<ul><li><strong>Possible Cause:</strong> Your website’s doctype is invalid or missing\n<ul><li><strong>Resolution:</strong> Check for a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">valid, well-formed doctype</a> like:\n[code lang="html"]&lt;!DOCTYPE html&gt;\n&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;\n&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/code]\nLearn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a>.</li></ul></li>\n	\n<ul><li><strong>Possible Cause:</strong> Docmode being forced via <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible meta tag</a>\n<ul><li><strong>Resolution:</strong> Check for code similar to this in the <head> of the page.\n[code lang="html"]&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt;[/code]\n\nRemove it and reload your page.  Continue testing.  Learn more about Specifying Document Compatibility Modes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx#SetMode">here</a>.</li></ul></li></li></ol>\n\n<h2>Step 4: Resolve common IE problems when updating docmode</h2>\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\n<ul><li><strong>Possible Cause:</strong> <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">Conditional comments</a> support browser version-specific features \n<ul><li><strong>Resolution:</strong> Check for <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">conditional comments</a> that run non-standard code.  These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully.  Check for code similar to this:\n[code lang="html"]&lt;!--[if IE 8]&gt;\n&lt;p&gt;Welcome to Internet Explorer 8.&lt;/p&gt;\n&lt;![endif]--&gt;\n[/code]\nRemove it and reload your page.  Continue testing. Learn more about Conditional Comments <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">here</a>.</li></ul></li>\n<li><strong>Possible Cause:</strong> <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">User agent sniffing</a> supports browser version-specific features \n<ul><li><strong>Resolution:</strong> Check for <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">user agent sniffing</a>. These are often used to specifically target a browser based on the user agent string presented via the browser mode.  Check for code similar to this:\n[code lang="js"]if (version = /MSIE (\\d+\\.\\d+)/.exec(navigator.userAgent)) {\n	isIE = true;\nbrowserVersion = parseFloat(version[1]);\n}[/code]\nStart by implementing <a href="http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx">feature detection</a> where possible with web standards.  Learn more about User-Agent Strings <a href="http://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx">here</a>. The IE10 User-Agent String is located <a href="http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx">here</a>.</li></ul></li></ul>\n\n<h2>Other reasons my page does not render correctly:</h2>\n\n<ul><li><strong>Possible Cause:</strong> Your website may be using browser specific features that are no longer supported.  Use web standards whenever possible.\n<ul><li><strong>Resolution:</strong> Run the <a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/Default.html">Compatibility Inspector tool</a>.</li></ul></li>\n<li><strong>Possible Cause:</strong> Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.\n<ul><li><strong>Resolution:</strong> Learn how to create plug-in free experiences.  A complete step-by-step guide will be available shortly.</li></ul></li>\n<li><strong>Possible Cause:</strong> Your website may be loading browser version-specific CSS files:\n<ul><li><strong>Resolution:</strong> Ensure layout is avoiding CSS hacks where possible.  Learn more about investigating CSS issues <a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">here</a>.</li></ul></li></ul>\n\nA list of common problems is available in the <a href="http://msdn.microsoft.com/en-us/library/ff986083(v=VS.85).aspx">IE Compatibility Cookbook</a>. \n\nIf you’re unable to update your docmode with these resolution steps, tweet us <a href="http://twitter.com/#!/IE">@IE</a> or check the <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads">Forums on MSDN</a>.\n\nFor further detail, try these articles:\n<ul><li><a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">Defining Document Capability</a> @ MSDN</li>\n<li><a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">Investigating Document Mode Issues</a> @ MSDN</li>\n<li><a href="http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx">Interoperable Quirks Mode in IE10</a> @ IE Blog</li>\n<li><a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/">Compatibility Inspector tool</a> @ IETestDrive.com</li>\n<li><a href="http://www.w3.org/QA/Tips/Doctype">Don’t Forget to Add a Doctype</a> @ W3C.org</li></ul>\n', 'Fix common IE problems: Update your Docmode for Web Standards', 0, '', 'inherit', 'open', 'open', '', '1800-revision-30', '', '', '2012-01-09 16:26:48', '2012-01-09 20:26:48', '', 1800, 'http://blog.reybango.com/2012/01/09/1800-revision-30/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1836, 3, '2012-01-09 16:26:57', '2012-01-09 20:26:57', 'Document compatibility defines how a browser renders your website.  The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">explicitly declaring</a> the HTML5 document type:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nThis markup triggers <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">standards mode</a> in Internet Explorer 9 and 10.  And it also works well in Chrome and Firefox.  Four steps will get your site ready for many browsers and devices:\r\n\r\n<h2>Step 1: Validate that your site uses standards mode</h2>\r\nCheck whether or not your site is currently in standards mode:\r\n<ol>\r\n<li>Open the website in <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">IE10 platform preview</a>.\r\n<ul><li><strong>Note:</strong> You can also follow the same steps to update the docmode for IE9 only without downloading the preview.</li></ul></li> \r\n<li>Press F12 to launch the IE Developer Tools or find it on the <em>Tools</em> menu as shown below: \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png" alt="" title="dev-tool-menu-1" width="243" height="268" class="alignleft size-full wp-image-1806" /></a>\r\n<ul><li><strong>Note:</strong> If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the <a href="http://msdn.microsoft.com/en-us/library/gg589507%28v=VS.85%29.aspx">following tutorial</a>.</li></ul></li> \r\n<li>Check if your site indicates <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> as shown in the toolbar below:\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1-300x39.png" alt="" title="ie-dev-tools-1" width="300" height="39" class="alignleft size-medium wp-image-1808" /></a>\r\n<em>Click to Enlarge</em></li>\r\n<li>If your site is in <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 Standards</em>, <strong>you’re done!</strong>  Note if the Browser Mode and Document Mode of your site are different than above.  A common example is <em>Browser Mode = IE8</em> and <em>Document Mode = Quirks</em> which indicates that your website was designed for older versions of IE and may not be ready for web standards.  \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2-300x42.png" alt="" title="ie-dev-tools-2" width="300" height="42" class="alignleft size-medium wp-image-1809" /></a>\r\n<em>Click to Enlarge</em></li></ol>\r\n\r\n<h2>Step 2: Implement docmode for web standards</h2>\r\nForce IE10 standards mode to test your website:\r\n\r\n<ol><li>Insert [code lang="html"]&lt;!DOCTYPE html&gt;[/code] into your website’s HTML page\r\n<ul><li>Learn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a></li></ul></li>\r\n<li>Reload your page in the browser and check the <em>Browser Mode</em> and <em>Document Mode</em> again using the F12 Developer Tools.  If <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> are not shown, continue below.</li></ol>\r\n\r\n<h2>Step 3: Determine why your site is not in Standards Mode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n\r\n<ol><li>My page is not in Browser Mode: IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website may flagged in <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx">Compatibility View</a> and forced into an older browser mode to ensure the site functions<ul><li><strong>Resolution:</strong> Check if your site is on the list <a href="http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml">here</a>.  Learn more about the Compatibility View list and request removal <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx#removal">here</a>.</li></ul></li></ul></li>\r\n<li>My page is not in Document Mode = IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website’s doctype is invalid or missing\r\n<ul><li><strong>Resolution:</strong> Check for a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">valid, well-formed doctype</a> like:\r\n[code lang="html"]&lt;!DOCTYPE html&gt;\r\n&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;\r\n&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/code]\r\nLearn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a>.</li></ul></li>\r\n	\r\n<ul><li><strong>Possible Cause:</strong> Docmode being forced via <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible meta tag</a>\r\n<ul><li><strong>Resolution:</strong> Check for code similar to this in the <head> of the page.\r\n[code lang="html"]&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;\r\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt;[/code]\r\n\r\nRemove it and reload your page.  Continue testing.  Learn more about Specifying Document Compatibility Modes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx#SetMode">here</a>.</li></ul></li></li></ol>\r\n\r\n<h2>Step 4: Resolve common IE problems when updating docmode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n<ul><li><strong>Possible Cause:</strong> <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">Conditional comments</a> support browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">conditional comments</a> that run non-standard code.  These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully.  Check for code similar to this:\r\n[code lang="html"]&lt;!--[if IE 8]&gt;\r\n&lt;p&gt;Welcome to Internet Explorer 8.&lt;/p&gt;\r\n&lt;![endif]--&gt;\r\n[/code]\r\nRemove it and reload your page.  Continue testing. Learn more about Conditional Comments <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">here</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">User agent sniffing</a> supports browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">user agent sniffing</a>. These are often used to specifically target a browser based on the user agent string presented via the browser mode.  Check for code similar to this:\r\n[code lang="js"]if (version = /MSIE (\\d+\\.\\d+)/.exec(navigator.userAgent)) {\r\n	isIE = true;\r\nbrowserVersion = parseFloat(version[1]);\r\n}[/code]\r\nStart by implementing <a href="http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx">feature detection</a> where possible with web standards.  Learn more about User-Agent Strings <a href="http://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx">here</a>. The IE10 User-Agent String is located <a href="http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx">here</a>.</li></ul></li></ul>\r\n\r\n<h2>Other reasons my page does not render correctly:</h2>\r\n\r\n<ul><li><strong>Possible Cause:</strong> Your website may be using browser specific features that are no longer supported.  Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Run the <a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/Default.html">Compatibility Inspector tool</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Learn how to create plug-in free experiences.  A complete step-by-step guide will be available shortly.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be loading browser version-specific CSS files:\r\n<ul><li><strong>Resolution:</strong> Ensure layout is avoiding CSS hacks where possible.  Learn more about investigating CSS issues <a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">here</a>.</li></ul></li></ul>\r\n\r\nA list of common problems is available in the <a href="http://msdn.microsoft.com/en-us/library/ff986083(v=VS.85).aspx">IE Compatibility Cookbook</a>. \r\n\r\nIf you’re unable to update your docmode with these resolution steps, tweet us <a href="http://twitter.com/#!/IE">@IE</a> or check the <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads">Forums on MSDN</a>.\r\n\r\nFor further detail, try these articles:\r\n<ul><li><a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">Defining Document Capability</a> @ MSDN</li>\r\n<li><a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">Investigating Document Mode Issues</a> @ MSDN</li>\r\n<li><a href="http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx">Interoperable Quirks Mode in IE10</a> @ IE Blog</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/">Compatibility Inspector tool</a> @ IETestDrive.com</li>\r\n<li><a href="http://www.w3.org/QA/Tips/Doctype">Don’t Forget to Add a Doctype</a> @ W3C.org</li></ul>\r\n', 'Fix common IE problems: Update your Docmode for Web Standards', 0, '', 'inherit', 'open', 'open', '', '1800-revision-31', '', '', '2012-01-09 16:26:57', '2012-01-09 20:26:57', '', 1800, 'http://blog.reybango.com/2012/01/09/1800-revision-31/', 0, 'revision', '', 0),
(1837, 3, '2012-01-09 16:37:13', '2012-01-09 20:37:13', 'Document compatibility defines how a browser renders your website.  The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">explicitly declaring</a> the HTML5 document type:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nThis markup triggers <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">standards mode</a> in Internet Explorer 9 and 10.  And it also works well in Chrome and Firefox.  Four steps will get your site ready for many browsers and devices:\r\n\r\n<h2>Step 1: Validate that your site uses standards mode</h2>\r\nCheck whether or not your site is currently in standards mode:\r\n<ol>\r\n<li>Open the website in <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">IE10 platform preview</a>.\r\n<ul><li><strong>Note:</strong> You can also follow the same steps to update the docmode for IE9 only without downloading the preview.</li></ul></li> \r\n<li>Press F12 to launch the IE Developer Tools or find it on the <em>Tools</em> menu as shown below: \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png" alt="" title="dev-tool-menu-1" width="243" height="268" class="alignleft size-full wp-image-1806" /></a>\r\n<ul><li><strong>Note:</strong> If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the <a href="http://msdn.microsoft.com/en-us/library/gg589507%28v=VS.85%29.aspx">following tutorial</a>.</li></ul></li> \r\n<li>Check if your site indicates <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> as shown in the toolbar below:\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1-300x39.png" alt="" title="ie-dev-tools-1" width="300" height="39" class="alignleft size-medium wp-image-1808" /></a>\r\n<em>Click to Enlarge</em></li>\r\n<li>If your site is in <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 Standards</em>, <strong>you’re done!</strong>  Note if the Browser Mode and Document Mode of your site are different than above.  A common example is <em>Browser Mode = IE8</em> and <em>Document Mode = Quirks</em> which indicates that your website was designed for older versions of IE and may not be ready for web standards.  \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2-300x42.png" alt="" title="ie-dev-tools-2" width="300" height="42" class="alignleft size-medium wp-image-1809" /></a>\r\n<em>Click to Enlarge</em></li></ol>\r\n\r\n<h2>Step 2: Implement docmode for web standards</h2>\r\nForce IE10 standards mode to test your website:\r\n\r\n<ol><li>Insert [code lang="html"]&lt;!DOCTYPE html&gt;[/code] into your website’s HTML page\r\n<ul><li>Learn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a></li></ul></li>\r\n<li>Reload your page in the browser and check the <em>Browser Mode</em> and <em>Document Mode</em> again using the F12 Developer Tools.  If <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> are not shown, continue below.</li></ol>\r\n\r\n<h2>Step 3: Determine why your site is not in Standards Mode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n\r\n<ol><li>My page is not in Browser Mode: IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website may flagged in <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx">Compatibility View</a> and forced into an older browser mode to ensure the site functions<ul><li><strong>Resolution:</strong> Check if your site is on the list <a href="http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml">here</a>.  Learn more about the Compatibility View list and request removal <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx#removal">here</a>.</li></ul></li></ul></li>\r\n<li>My page is not in Document Mode = IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website’s doctype is invalid or missing\r\n<ul><li><strong>Resolution:</strong> Check for a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">valid, well-formed doctype</a> like:\r\n[code lang="html"]&lt;!DOCTYPE html&gt;\r\n&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;\r\n&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/code]\r\nLearn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a>.</li></ul></li>\r\n	\r\n<ul><li><strong>Possible Cause:</strong> Docmode being forced via <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible meta tag</a>\r\n<ul><li><strong>Resolution:</strong> Check for code similar to this in the <head> of the page.\r\n[code lang="html"]&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;\r\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt;[/code]\r\n\r\nRemove it and reload your page.  Continue testing.  Learn more about Specifying Document Compatibility Modes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx#SetMode">here</a>.</li></ul></li></li></ol>\r\n\r\n<h2>Step 4: Resolve common IE problems when updating docmode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n<ul><li><strong>Possible Cause:</strong> <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">Conditional comments</a> support browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">conditional comments</a> that run non-standard code.  These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully.  Check for code similar to this:\r\n[code lang="html"]&lt;!--[if IE 8]&gt;\r\n&lt;p&gt;Welcome to Internet Explorer 8.&lt;/p&gt;\r\n&lt;![endif]--&gt;\r\n[/code]\r\nRemove it and reload your page.  Continue testing. Learn more about Conditional Comments <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">here</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">User agent sniffing</a> supports browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">user agent sniffing</a>. These are often used to specifically target a browser based on the user agent string presented via the browser mode.  Check for code similar to this:\r\n[code lang="js"]if (version = /MSIE (\\d+\\.\\d+)/.exec(navigator.userAgent)) {\r\n	isIE = true;\r\nbrowserVersion = parseFloat(version[1]);\r\n}[/code]\r\nStart by implementing <a href="http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx">feature detection</a> where possible with web standards.  Learn more about User-Agent Strings <a href="http://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx">here</a>. The IE10 User-Agent String is located <a href="http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx">here</a>.</li></ul></li></ul>\r\n\r\n<h2>Other reasons my page does not render correctly:</h2>\r\n\r\n<ul><li><strong>Possible Cause:</strong> Your website may be using browser specific features that are no longer supported.  Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Run the <a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/Default.html">Compatibility Inspector tool</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Learn how to create plug-in free experiences.  A complete step-by-step guide will be available shortly.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be loading browser version-specific CSS files:\r\n<ul><li><strong>Resolution:</strong> Ensure layout is avoiding CSS hacks where possible.  Learn more about investigating CSS issues <a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">here</a>.</li></ul></li></ul>\r\n\r\nA list of common problems is available in the <a href="http://msdn.microsoft.com/en-us/library/ff986083(v=VS.85).aspx">IE Compatibility Cookbook</a>. \r\n\r\nIf you’re unable to update your docmode with these resolution steps, tweet us <a href="http://twitter.com/#!/IE">@IE</a> or check the <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads">Forums on MSDN</a>.\r\n\r\nFor further detail, try these articles:\r\n<ul><li><a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">Defining Document Capability</a> @ MSDN</li>\r\n<li><a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">Investigating Document Mode Issues</a> @ MSDN</li>\r\n<li><a href="http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx">Interoperable Quirks Mode in IE10</a> @ IE Blog</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/">Compatibility Inspector tool</a> @ IETestDrive.com</li>\r\n<li><a href="http://www.w3.org/QA/Tips/Doctype">Don’t Forget to Add a Doctype</a> @ W3C.org</li></ul>\r\n', 'Fix common IE problems: Update your Docmode for Web Standards', 0, '', 'inherit', 'open', 'open', '', '1800-revision-32', '', '', '2012-01-09 16:37:13', '2012-01-09 20:37:13', '', 1800, 'http://blog.reybango.com/2012/01/09/1800-revision-32/', 0, 'revision', '', 0),
(1838, 3, '2012-01-09 16:37:44', '2012-01-09 20:37:44', 'Document compatibility defines how a browser renders your website.  The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">explicitly declaring</a> the HTML5 document type:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nThis markup triggers <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">standards mode</a> in Internet Explorer 9 and 10.  And it also works well in Chrome and Firefox.  Four steps will get your site ready for many browsers and devices:\r\n\r\n<h2>Step 1: Validate that your site uses standards mode</h2>\r\nCheck whether or not your site is currently in standards mode:\r\n<ol>\r\n<li>Open the website in <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">IE10 platform preview</a>.\r\n<ul><li><strong>Note:</strong> You can also follow the same steps to update the docmode for IE9 only without downloading the preview.</li></ul></li> \r\n<li>Press F12 to launch the IE Developer Tools or find it on the <em>Tools</em> menu as shown below: \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png" alt="" title="dev-tool-menu-1" width="243" height="268" class="alignleft size-full wp-image-1806" /></a>\r\n<ul><li><strong>Note:</strong> If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the <a href="http://msdn.microsoft.com/en-us/library/gg589507%28v=VS.85%29.aspx">following tutorial</a>.</li></ul></li> \r\n<li>Check if your site indicates <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> as shown in the toolbar below:\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1-300x39.png" alt="" title="ie-dev-tools-1" width="300" height="39" class="alignleft size-medium wp-image-1808" /></a>\r\n<em>Click to Enlarge</em></li>\r\n<li>If your site is in <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 Standards</em>, <strong>you’re done!</strong>  Note if the Browser Mode and Document Mode of your site are different than above.  A common example is <em>Browser Mode = IE8</em> and <em>Document Mode = Quirks</em> which indicates that your website was designed for older versions of IE and may not be ready for web standards.  \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2-300x42.png" alt="" title="ie-dev-tools-2" width="300" height="42" class="alignleft size-medium wp-image-1809" /></a>\r\n<em>Click to Enlarge</em></li></ol>\r\n\r\n<h2>Step 2: Implement docmode for web standards</h2>\r\nForce IE10 standards mode to test your website:\r\n\r\n<ol><li>Insert [code lang="html"]&lt;!DOCTYPE html&gt;[/code] into your website’s HTML page\r\n<ul><li>Learn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a></li></ul></li>\r\n<li>Reload your page in the browser and check the <em>Browser Mode</em> and <em>Document Mode</em> again using the F12 Developer Tools.  If <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> are not shown, continue below.</li></ol>\r\n\r\n<h2>Step 3: Determine why your site is not in Standards Mode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n\r\n<ol><li>My page is not in Browser Mode: IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website may flagged in <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx">Compatibility View</a> and forced into an older browser mode to ensure the site functions<ul><li><strong>Resolution:</strong> Check if your site is on the list <a href="http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml">here</a>.  Learn more about the Compatibility View list and request removal <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx#removal">here</a>.</li></ul></li></ul></li>\r\n<li>My page is not in Document Mode = IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website’s doctype is invalid or missing\r\n<ul><li><strong>Resolution:</strong> Check for a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">valid, well-formed doctype</a> like:\r\n[code lang="html"]&lt;!DOCTYPE html&gt;\r\n&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;\r\n&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/code]\r\nLearn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a>.</li></ul></li>\r\n	\r\n<ul><li><strong>Possible Cause:</strong> Docmode being forced via <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible meta tag</a>\r\n<ul><li><strong>Resolution:</strong> Check for code similar to this in the <head> of the page.\r\n[code lang="html"]&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;\r\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt;[/code]\r\n\r\nRemove it and reload your page.  Continue testing.  Learn more about Specifying Document Compatibility Modes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx#SetMode">here</a>.</li></ul></li></li></ol>\r\n\r\n<h2>Step 4: Resolve common IE problems when updating docmode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n<ul><li><strong>Possible Cause:</strong> <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">Conditional comments</a> support browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">conditional comments</a> that run non-standard code.  These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully.  Check for code similar to this:\r\n[code lang="html"]&lt;!--[if IE 8]&gt;\r\n&lt;p&gt;Welcome to Internet Explorer 8.&lt;/p&gt;\r\n&lt;![endif]--&gt;\r\n[/code]\r\nRemove it and reload your page.  Continue testing. Learn more about Conditional Comments <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">here</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">User agent sniffing</a> supports browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">user agent sniffing</a>. These are often used to specifically target a browser based on the user agent string presented via the browser mode.  Check for code similar to this:\r\n[code lang="js"]if (version = /MSIE (\\d+\\.\\d+)/.exec(navigator.userAgent)) {\r\n	isIE = true;\r\nbrowserVersion = parseFloat(version[1]);\r\n}[/code]\r\nStart by implementing <a href="http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx">feature detection</a> where possible with web standards.  Learn more about User-Agent Strings <a href="http://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx">here</a>. The IE10 User-Agent String is located <a href="http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx">here</a>.</li></ul></li></ul>\r\n\r\n<h2>Other reasons my page does not render correctly:</h2>\r\n\r\n<ul><li><strong>Possible Cause:</strong> Your website may be using browser specific features that are no longer supported.  Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Run the <a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/Default.html">Compatibility Inspector tool</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Learn how to create plug-in free experiences.  A complete step-by-step guide will be available shortly.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be loading browser version-specific CSS files:\r\n<ul><li><strong>Resolution:</strong> Ensure layout is avoiding CSS hacks where possible.  Learn more about investigating CSS issues <a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">here</a>.</li></ul></li></ul>\r\n\r\nA list of common problems is available in the <a href="http://msdn.microsoft.com/en-us/library/ff986083(v=VS.85).aspx">IE Compatibility Cookbook</a>. \r\n\r\nIf you’re unable to update your docmode with these resolution steps, tweet us <a href="http://twitter.com/#!/IE">@IE</a> or check the <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads">Forums on MSDN</a>.\r\n\r\nFor further detail, try these articles:\r\n<ul><li><a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">Defining Document Capability</a> @ MSDN</li>\r\n<li><a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">Investigating Document Mode Issues</a> @ MSDN</li>\r\n<li><a href="http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx">Interoperable Quirks Mode in IE10</a> @ IE Blog</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/">Compatibility Inspector tool</a> @ IETestDrive.com</li>\r\n<li><a href="http://www.w3.org/QA/Tips/Doctype">Don’t Forget to Add a Doctype</a> @ W3C.org</li></ul>\r\n', 'Fix Common IE Problems: Update your Docmode for Web Standards', 0, '', 'inherit', 'open', 'open', '', '1800-revision-33', '', '', '2012-01-09 16:37:44', '2012-01-09 20:37:44', '', 1800, 'http://blog.reybango.com/2012/01/09/1800-revision-33/', 0, 'revision', '', 0),
(1839, 3, '2012-11-13 22:02:03', '2012-11-14 02:02:03', 'Document compatibility defines how a browser renders your website.  The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">explicitly declaring</a> the HTML5 document type:\n\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\n\nThis markup triggers <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">standards mode</a> in Internet Explorer 9 and 10.  And it also works well in Chrome and Firefox.  Four steps will get your site ready for many browsers and devices:\n\n<h2>Step 1: Validate that your site uses standards mode</h2>\nCheck whether or not your site is currently in standards mode:\n<ol>\n<li>Open the website in <a href="http://windows.microsoft.com/en-US/internet-explorer/ie-10-release-preview">Internet Explorer 10</a>.\n<ul><li><strong>Note:</strong> You can also follow the same steps to update the docmode for IE9 only without downloading the preview.</li></ul></li> \n<li>Press F12 to launch the IE Developer Tools or find it on the <em>Tools</em> menu as shown below: \n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png" alt="" title="dev-tool-menu-1" width="243" height="268" class="alignleft size-full wp-image-1806" /></a>\n<ul><li><strong>Note:</strong> If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the <a href="http://msdn.microsoft.com/en-us/library/gg589507%28v=VS.85%29.aspx">following tutorial</a>.</li></ul></li> \n<li>Check if your site indicates <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> as shown in the toolbar below:\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1-300x39.png" alt="" title="ie-dev-tools-1" width="300" height="39" class="alignleft size-medium wp-image-1808" /></a>\n<em>Click to Enlarge</em></li>\n<li>If your site is in <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 Standards</em>, <strong>you’re done!</strong>  Note if the Browser Mode and Document Mode of your site are different than above.  A common example is <em>Browser Mode = IE8</em> and <em>Document Mode = Quirks</em> which indicates that your website was designed for older versions of IE and may not be ready for web standards.  \n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2-300x42.png" alt="" title="ie-dev-tools-2" width="300" height="42" class="alignleft size-medium wp-image-1809" /></a>\n<em>Click to Enlarge</em></li></ol>\n\n<h2>Step 2: Implement docmode for web standards</h2>\nForce IE10 standards mode to test your website:\n\n<ol><li>Insert [code lang="html"]&lt;!DOCTYPE html&gt;[/code] into your website’s HTML page\n<ul><li>Learn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a></li></ul></li>\n<li>Reload your page in the browser and check the <em>Browser Mode</em> and <em>Document Mode</em> again using the F12 Developer Tools.  If <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> are not shown, continue below.</li></ol>\n\n<h2>Step 3: Determine why your site is not in Standards Mode</h2>\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\n\n<ol><li>My page is not in Browser Mode: IE10\n<ul><li><strong>Possible Cause:</strong> Your website may flagged in <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx">Compatibility View</a> and forced into an older browser mode to ensure the site functions<ul><li><strong>Resolution:</strong> Check if your site is on the list <a href="http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml">here</a>.  Learn more about the Compatibility View list and request removal <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx#removal">here</a>.</li></ul></li></ul></li>\n<li>My page is not in Document Mode = IE10\n<ul><li><strong>Possible Cause:</strong> Your website’s doctype is invalid or missing\n<ul><li><strong>Resolution:</strong> Check for a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">valid, well-formed doctype</a> like:\n[code lang="html"]&lt;!DOCTYPE html&gt;\n&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;\n&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/code]\nLearn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a>.</li></ul></li>\n	\n<ul><li><strong>Possible Cause:</strong> Docmode being forced via <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible meta tag</a>\n<ul><li><strong>Resolution:</strong> Check for code similar to this in the <head> of the page.\n[code lang="html"]&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt;[/code]\n\nRemove it and reload your page.  Continue testing.  Learn more about Specifying Document Compatibility Modes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx#SetMode">here</a>.</li></ul></li></li></ol>\n\n<h2>Step 4: Resolve common IE problems when updating docmode</h2>\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\n<ul><li><strong>Possible Cause:</strong> <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">Conditional comments</a> support browser version-specific features \n<ul><li><strong>Resolution:</strong> Check for <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">conditional comments</a> that run non-standard code.  These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully.  Check for code similar to this:\n[code lang="html"]&lt;!--[if IE 8]&gt;\n\n&lt;p&gt;Welcome to Internet Explorer 8.&lt;/p&gt;\n\n&lt;![endif]--&gt;\n[/code]\nRemove it and reload your page.  Continue testing. Learn more about Conditional Comments <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">here</a>.</li></ul></li>\n<li><strong>Possible Cause:</strong> <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">User agent sniffing</a> supports browser version-specific features \n<ul><li><strong>Resolution:</strong> Check for <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">user agent sniffing</a>. These are often used to specifically target a browser based on the user agent string presented via the browser mode.  Check for code similar to this:\n[code lang="js"]if (version = /MSIE (\\d+\\.\\d+)/.exec(navigator.userAgent)) {\n\n	isIE = true;\n\nbrowserVersion = parseFloat(version[1]);\n}[/code]\nStart by implementing <a href="http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx">feature detection</a> where possible with web standards.  Learn more about User-Agent Strings <a href="http://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx">here</a>. The IE10 User-Agent String is located <a href="http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx">here</a>.</li></ul></li></ul>\n\n<h2>Other reasons my page does not render correctly:</h2>\n\n<ul><li><strong>Possible Cause:</strong> Your website may be using browser specific features that are no longer supported.  Use web standards whenever possible.\n<ul><li><strong>Resolution:</strong> Run the <a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/Default.html">Compatibility Inspector tool</a>.</li></ul></li>\n<li><strong>Possible Cause:</strong> Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.\n<ul><li><strong>Resolution:</strong> Learn how to create plug-in free experiences.  A complete step-by-step guide will be available shortly.</li></ul></li>\n<li><strong>Possible Cause:</strong> Your website may be loading browser version-specific CSS files:\n<ul><li><strong>Resolution:</strong> Ensure layout is avoiding CSS hacks where possible.  Learn more about investigating CSS issues <a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">here</a>.</li></ul></li></ul>\n\nA list of common problems is available in the <a href="http://msdn.microsoft.com/en-us/library/ff986083(v=VS.85).aspx">IE Compatibility Cookbook</a>. \n\nIf you’re unable to update your docmode with these resolution steps, tweet us <a href="http://twitter.com/#!/IE">@IE</a> or check the <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads">Forums on MSDN</a>.\n\nFor further detail, try these articles:\n<ul><li><a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">Defining Document Capability</a> @ MSDN</li>\n<li><a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">Investigating Document Mode Issues</a> @ MSDN</li>\n<li><a href="http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx">Interoperable Quirks Mode in IE10</a> @ IE Blog</li>\n<li><a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/">Compatibility Inspector tool</a> @ IETestDrive.com</li>\n<li><a href="http://www.w3.org/QA/Tips/Doctype">Don’t Forget to Add a Doctype</a> @ W3C.org</li></ul>\n', 'Fix Common IE Problems: Update your Docmode for Web Standards', 0, '', 'inherit', 'open', 'open', '', '1800-autosave', '', '', '2012-11-13 22:02:03', '2012-11-14 02:02:03', '', 1800, 'http://blog.reybango.com/2012/01/09/1800-autosave/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1840, 3, '2012-01-09 16:39:18', '2012-01-09 20:39:18', 'Document compatibility defines how a browser renders your website.  The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">explicitly declaring</a> the HTML5 document type:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nThis markup triggers <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">standards mode</a> in Internet Explorer 9 and 10.  And it also works well in Chrome and Firefox.  Four steps will get your site ready for many browsers and devices:\r\n\r\n<h2>Step 1: Validate that your site uses standards mode</h2>\r\nCheck whether or not your site is currently in standards mode:\r\n<ol>\r\n<li>Open the website in <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">IE10 platform preview</a>.\r\n<ul><li><strong>Note:</strong> You can also follow the same steps to update the docmode for IE9 only without downloading the preview.</li></ul></li> \r\n<li>Press F12 to launch the IE Developer Tools or find it on the <em>Tools</em> menu as shown below: \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/dev-tool-menu-1.png" alt="" title="dev-tool-menu-1" width="243" height="268" class="alignleft size-full wp-image-1806" /></a>\r\n<ul><li><strong>Note:</strong> If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the <a href="http://msdn.microsoft.com/en-us/library/gg589507%28v=VS.85%29.aspx">following tutorial</a>.</li></ul></li> \r\n<li>Check if your site indicates <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> as shown in the toolbar below:\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-1-300x39.png" alt="" title="ie-dev-tools-1" width="300" height="39" class="alignleft size-medium wp-image-1808" /></a>\r\n<em>Click to Enlarge</em></li>\r\n<li>If your site is in <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 Standards</em>, <strong>you’re done!</strong>  Note if the Browser Mode and Document Mode of your site are different than above.  A common example is <em>Browser Mode = IE8</em> and <em>Document Mode = Quirks</em> which indicates that your website was designed for older versions of IE and may not be ready for web standards.  \r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/01/ie-dev-tools-2-300x42.png" alt="" title="ie-dev-tools-2" width="300" height="42" class="alignleft size-medium wp-image-1809" /></a>\r\n<em>Click to Enlarge</em></li></ol>\r\n\r\n<h2>Step 2: Implement docmode for web standards</h2>\r\nForce IE10 standards mode to test your website:\r\n\r\n<ol><li>Insert [code lang="html"]&lt;!DOCTYPE html&gt;[/code] into your website’s HTML page\r\n<ul><li>Learn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a></li></ul></li>\r\n<li>Reload your page in the browser and check the <em>Browser Mode</em> and <em>Document Mode</em> again using the F12 Developer Tools.  If <em>Browser Mode: IE10</em> and <em>Document Mode: IE10 standards</em> are not shown, continue below.</li></ol>\r\n\r\n<h2>Step 3: Determine why your site is not in Standards Mode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n\r\n<ol><li>My page is not in Browser Mode: IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website may flagged in <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx">Compatibility View</a> and forced into an older browser mode to ensure the site functions<ul><li><strong>Resolution:</strong> Check if your site is on the list <a href="http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml">here</a>.  Learn more about the Compatibility View list and request removal <a href="http://msdn.microsoft.com/en-us/library/dd567845(v=VS.85).aspx#removal">here</a>.</li></ul></li></ul></li>\r\n<li>My page is not in Document Mode = IE10\r\n<ul><li><strong>Possible Cause:</strong> Your website’s doctype is invalid or missing\r\n<ul><li><strong>Resolution:</strong> Check for a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">valid, well-formed doctype</a> like:\r\n[code lang="html"]&lt;!DOCTYPE html&gt;\r\n&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;\r\n&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/code]\r\nLearn more about how to update your doctypes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">here</a>.</li></ul></li>\r\n	\r\n<ul><li><strong>Possible Cause:</strong> Docmode being forced via <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible meta tag</a>\r\n<ul><li><strong>Resolution:</strong> Check for code similar to this in the <head> of the page.\r\n[code lang="html"]&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;\r\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt;[/code]\r\n\r\nRemove it and reload your page.  Continue testing.  Learn more about Specifying Document Compatibility Modes <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx#SetMode">here</a>.</li></ul></li></li></ol>\r\n\r\n<h2>Step 4: Resolve common IE problems when updating docmode</h2>\r\nMost problems are related to supporting older versions of IE.  Start by ensuring your standards-based code is rendered in IE9 and 10.  Then keep your non-standards-based code for older versions of IE.\r\n<ul><li><strong>Possible Cause:</strong> <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">Conditional comments</a> support browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">conditional comments</a> that run non-standard code.  These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully.  Check for code similar to this:\r\n[code lang="html"]&lt;!--[if IE 8]&gt;\r\n&lt;p&gt;Welcome to Internet Explorer 8.&lt;/p&gt;\r\n&lt;![endif]--&gt;\r\n[/code]\r\nRemove it and reload your page.  Continue testing. Learn more about Conditional Comments <a href="http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx">here</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">User agent sniffing</a> supports browser version-specific features \r\n<ul><li><strong>Resolution:</strong> Check for <a href="http://blogs.msdn.com/b/ieinternals/archive/2011/06/30/perils-of-user-agent-sniffing-browser-mode-document-mode-compatibility-view.aspx">user agent sniffing</a>. These are often used to specifically target a browser based on the user agent string presented via the browser mode.  Check for code similar to this:\r\n[code lang="js"]if (version = /MSIE (\\d+\\.\\d+)/.exec(navigator.userAgent)) {\r\n	isIE = true;\r\nbrowserVersion = parseFloat(version[1]);\r\n}[/code]\r\nStart by implementing <a href="http://blogs.msdn.com/b/ie/archive/2010/04/14/same-markup-writing-cross-browser-code.aspx">feature detection</a> where possible with web standards.  Learn more about User-Agent Strings <a href="http://msdn.microsoft.com/en-us/library/ms537503(v=VS.85).aspx">here</a>. The IE10 User-Agent String is located <a href="http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx">here</a>.</li></ul></li></ul>\r\n\r\n<h2>Other reasons my page does not render correctly:</h2>\r\n\r\n<ul><li><strong>Possible Cause:</strong> Your website may be using browser specific features that are no longer supported.  Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Run the <a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/Default.html">Compatibility Inspector tool</a>.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.\r\n<ul><li><strong>Resolution:</strong> Learn how to create plug-in free experiences.  A complete step-by-step guide will be available shortly.</li></ul></li>\r\n<li><strong>Possible Cause:</strong> Your website may be loading browser version-specific CSS files:\r\n<ul><li><strong>Resolution:</strong> Ensure layout is avoiding CSS hacks where possible.  Learn more about investigating CSS issues <a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">here</a>.</li></ul></li></ul>\r\n\r\nA list of common problems is available in the <a href="http://msdn.microsoft.com/en-us/library/ff986083(v=VS.85).aspx">IE Compatibility Cookbook</a>. \r\n\r\nIf you’re unable to update your docmode with these resolution steps, tweet us <a href="http://twitter.com/#!/IE">@IE</a> or check the <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads">Forums on MSDN</a>.\r\n\r\nFor further detail, try these articles:\r\n<ul><li><a href="http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx">Defining Document Capability</a> @ MSDN</li>\r\n<li><a href="http://msdn.microsoft.com/en-us/library/gg699340(v=VS.85).aspx">Investigating Document Mode Issues</a> @ MSDN</li>\r\n<li><a href="http://blogs.msdn.com/b/ie/archive/2011/12/14/interoperable-html5-quirks-mode-in-ie10.aspx">Interoperable Quirks Mode in IE10</a> @ IE Blog</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/">Compatibility Inspector tool</a> @ IETestDrive.com</li>\r\n<li><a href="http://www.w3.org/QA/Tips/Doctype">Don’t Forget to Add a Doctype</a> @ W3C.org</li></ul>\r\n', 'Fix Common IE Problems: Update your Docmode for Web Standards', 0, '', 'inherit', 'open', 'open', '', '1800-revision-34', '', '', '2012-01-09 16:39:18', '2012-01-09 20:39:18', '', 1800, 'http://blog.reybango.com/2012/01/09/1800-revision-34/', 0, 'revision', '', 0),
(1843, 3, '2012-04-09 12:35:50', '2012-04-09 16:35:50', 'I''ve had the good fortune of working with my friend <a href="https://twitter.com/#!/jonathansampson">Jonathan Sampson</a> recently on figuring out how to help developers build plugin-free experiences. With IE10 Metro going plugin-free, it''s incredibly important to document steps to help developers provide their users with great experiences without the need for proprietary 3rd party add-ons.\r\n\r\nIf you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on <em>-webkit</em> properties, omitting the prefixes which target other browsers such as <em>-o, -ms, and -moz</em>. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is <em>browser sniffing</em>. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called <em>feature detection</em>.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the <em>canPlayType</em> method exists on our newly-created <em>video</em> tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a <em>video</em> element is, the <em>canPlayType</em> method will be present. If the video element is unknown to the browser, the <em>canPlayType</em> method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “<em>Modernizr</em>â€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions-300x225.png" alt="" title="fiddler-sessions" width="300" height="225" class="alignleft size-medium wp-image-1858" /></a>\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select <em>Edit Response</em>. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a <em>pointer</em>. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the <em>pointerType</em> property.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png" alt="" title="20110920-pointer" width="264" height="272" class="alignleft size-full wp-image-1859" /></a>\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like <em>touchstart, touchmove</em>, and <em>touchend</em>,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like <em>MSPointerDown, MSPointerUP</em>, and <em>MSPointerMove</em>.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like <em>onresizeend</em> and <em>keyup</em>. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the <em>event.targetTouches</em> <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the <em>pageX</em> and <em>pageY</em> properties from the first item in the <em>TouchList</em>, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf <em>event.pageX</em> is not found, we fall back to assigning the value of <em>targetTouches[0].pageX</em> to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to <em>touchmove</em>. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n\r\n<strong><em>Update: In the rush to get this post up, I realized that I forgot to thank and give credit to <a href="https://twitter.com/#!/jonathansampson">Jonathan Sampson</a> for helping investigate and write about the great techniques mentioned above. He was a huge help in generating many of these great techniques. Thanks JS!</em></strong>\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'publish', 'open', 'open', '', 'ios-to-ie10-metro-building-cross-browser-plugin-free-experiences', '', '', '2012-04-10 12:20:11', '2012-04-10 16:20:11', '', 0, 'http://blog.reybango.com/?p=1843', 0, 'post', '', 17);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1844, 3, '2012-04-09 11:49:11', '2012-04-09 15:49:11', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\n\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \n\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from http://fiddler2.com. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\n\nStep 1: Declare Standards mode and valid markup for modern browsers\n\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\n\n<!DOCTYPE html>\n\nStep 2: Update your CSS vendor prefixes\n\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\n\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\n\nFor instance, we find the following on MSNBC:\n\nbackground: -webkit-gradient(\n  linear,\n  left top,\n  left bottom,\n  color-stop(1, rgba(192,192,192,.6)),\n  color-stop(0.5, rgba(0,0,0,.6))\n);\n\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \n\nbackground: -webkit-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: -moz-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: -ms-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: -o-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: linear-gradient(\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\n\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.\n\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.\n\nStep 3: Get rid of browser sniffing methods\n\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\n\nif ( navigator.userAgent.indexOf("iPad") > -1 ) {\n  // Load HTML5 Experience\n} else {\n  // Load Flash Experience\n}\n\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\n\nHere is an attempt to find the version of Internet Explorer. \n\nif ( tests.IE ) {\n  j = /msie.(\\d\\.\\d+)/i;\n  k = navigator.userAgent.match(j)[1];\n}\n\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\n\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\n\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\n\n \n\nFeature Detection\n\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\n\nif ( !!document.createElement(“videoâ€).canPlayType  ) {\n  // Load HTML5 Video\n} else {\n  // Load Flash Video\n}\n\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\n\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\n\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\n\nif ( Modernizr.video ) {\n  // Load HTML5 Video\n}\n\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \n\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.\n\n \n\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\n\n \n\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an AutoResponder for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\n\n1.	Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.\n2.	Select the AutoResponder tab on the right.\n3.	Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.\n4.	Drag the selected session from the left panel into the AutoResponder tab.\n\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\n\nâ—	If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/\nâ—	Then respond with: *200-SESSION_3\n\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\n\nif(!(navigator.userAgent.toLowerCase().indexOf("ipad")>-1)){\n  // Flash Experience\n}\n\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\n\nif ( !document.createElement("video").canPlayType ) {\n  // Flash Experience\n}\n\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\n\nStep 4: Update touch and pointer events\n\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\n\n \n\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.\n\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\n\nif (window.navigator.msPointerEnabled) {\n  myCanvas.addEventListener("MSPointerMove", paint, false);\n} else {\n  myCanvas.addEventListener("mousemove", paint, false);\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\n}\n\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\n\nOur events are tied up in http://www.msnbc.msn.com/id/43662671/15:\n\ndocument.addEventListener("touchstart", touchHandler, false);\ndocument.addEventListener("touchmove", touchHandler, false);\ndocument.addEventListener("touchend", touchHandler, false);\n\nWe’re going to update this to include the MSPointer events as well:\n\nif (window.navigator.msPointerEnabled) {\n  document.addEventListener("MSPointerDown", touchHandler, false);\n  document.addEventListener("MSPointerMove", touchHandler, false);\n  document.addEventListener("MSPointerUp", touchHandler, false);\n} else {\n  document.addEventListener("touchstart", touchHandler, false);\n  document.addEventListener("touchmove", touchHandler, false);\n  document.addEventListener("touchend", touchHandler, false);\n  document.addEventListener("mousedown", touchHandler, false);\n  document.addEventListener("mousemove", touchHandler, false);\n  document.addEventListener("mouseup", touchHandler, false);\n}\n\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \n\nNext we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:\n\nif ( event.type == "touchstart" ) {\n  /* Start drag logic */\n} else \nif ( event.type == "touchmove" ) {\n  /* Drag logic */\n} else \nif ( event.type == "touchend" ) {\n  /* Complete drag logic */\n}\n\nWe’ll modify this to listen for all of the registered event types:\n\nif ( event.type.match( /(down|start)$/i ) ) {\n  /* Start drag logic */\n} else \nif ( event.type.match( /move$/i ) ) {\n  /* Drag logic */\n} else \nif ( event.type.match( /(up|end)$/i ) ) {\n  /* Complete drag logic */\n}\n\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\n\nThe above is an implementation of Ted Johnson’s solution in Handling Multi-touch and Mouse Input in All Browsers.\n\nThe drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\n\nvar curX = event.targetTouches[0].pageX;\n\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\n\nvar curX = event.pageX || event.targetTouches[0].pageX;\n\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\n\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\n\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\n\nFor further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.\n\nTesting both experiences\n\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\n\n1.	Press F12 to reveal the Developer Tools\n2.	Change your Document Mode to Internet Explorer 7 Standards\n3.	Refresh the page\n\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\n\nThat’s all!\n\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision', '', '', '2012-04-09 11:49:11', '2012-04-09 15:49:11', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision/', 0, 'revision', '', 0),
(1845, 3, '2012-04-09 11:53:56', '2012-04-09 15:53:56', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\n\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \n\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\n\nStep 1: Declare Standards mode and valid markup for modern browsers\n\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\n\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\n\nStep 2: Update your CSS vendor prefixes\n\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\n\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\n\nFor instance, we find the following on MSNBC:\n\n[code lang="css"]background: -webkit-gradient(\n  linear,\n  left top,\n  left bottom,\n  color-stop(1, rgba(192,192,192,.6)),\n  color-stop(0.5, rgba(0,0,0,.6))\n);[/code]\n\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \n\n[code lang="css"]background: -webkit-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: -moz-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: -ms-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: -o-linear-gradient( \n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\nbackground: linear-gradient(\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\n\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.\n\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.\n\nStep 3: Get rid of browser sniffing methods\n\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\n\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\n  // Load HTML5 Experience\n} else {\n  // Load Flash Experience\n}[/code]\n\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\n\nHere is an attempt to find the version of Internet Explorer. \n\n[code lang="javascript"]if ( tests.IE ) {\n  j = /msie.(\\d\\.\\d+)/i;\n  k = navigator.userAgent.match(j)[1];\n}[/code]\n\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\n\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\n\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\n\n \n\nFeature Detection\n\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\n\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\n  // Load HTML5 Video\n} else {\n  // Load Flash Video\n}[/code]\n\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\n\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\n\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\n\n[code lang="javascript"]if ( Modernizr.video ) {\n  // Load HTML5 Video\n}[/code]\n\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \n\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.\n\n \n\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\n\n \n\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an AutoResponder for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\n\n1.	Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.\n2.	Select the AutoResponder tab on the right.\n3.	Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.\n4.	Drag the selected session from the left panel into the AutoResponder tab.\n\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\n\nâ—	If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/\nâ—	Then respond with: *200-SESSION_3\n\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\n\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\n  // Flash Experience\n}[/code]\n\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\n\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\n  // Flash Experience\n}[/code]\n\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\n\nStep 4: Update touch and pointer events\n\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\n\n \n\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.\n\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\n\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\n} else {\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\n}[/code]\n\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\n\nOur events are tied up in http://www.msnbc.msn.com/id/43662671/15:\n\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\n\nWe’re going to update this to include the MSPointer events as well:\n\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\n} else {\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\n}[/code]\n\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \n\nNext we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:\n\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\n  /* Start drag logic */\n} else \nif ( event.type == &quot;touchmove&quot; ) {\n  /* Drag logic */\n} else \nif ( event.type == &quot;touchend&quot; ) {\n  /* Complete drag logic */\n}[/code]\n\nWe’ll modify this to listen for all of the registered event types:\n\n[code lang="javascript"][/code]if ( event.type.match( /(down|start)$/i ) ) {\n  /* Start drag logic */\n} else \nif ( event.type.match( /move$/i ) ) {\n  /* Drag logic */\n} else \nif ( event.type.match( /(up|end)$/i ) ) {\n  /* Complete drag logic */\n}\n\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\n\nThe above is an implementation of Ted Johnson’s solution in Handling Multi-touch and Mouse Input in All Browsers.\n\nThe drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\n\nvar curX = event.targetTouches[0].pageX;\n\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\n\nvar curX = event.pageX || event.targetTouches[0].pageX;\n\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\n\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\n\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\n\nFor further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.\n\nTesting both experiences\n\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\n\n1.	Press F12 to reveal the Developer Tools\n2.	Change your Document Mode to Internet Explorer 7 Standards\n3.	Refresh the page\n\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\n\nThat’s all!\n\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-2', '', '', '2012-04-09 11:53:56', '2012-04-09 15:53:56', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-2/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1846, 3, '2012-04-09 11:54:22', '2012-04-09 15:54:22', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\nStep 1: Declare Standards mode and valid markup for modern browsers\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nStep 2: Update your CSS vendor prefixes\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following on MSNBC:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.\r\n\r\nStep 3: Get rid of browser sniffing methods\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n \r\n\r\nFeature Detection\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.\r\n\r\n \r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\n \r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an AutoResponder for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n1.	Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.\r\n2.	Select the AutoResponder tab on the right.\r\n3.	Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.\r\n4.	Drag the selected session from the left panel into the AutoResponder tab.\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\nâ—	If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/\r\nâ—	Then respond with: *200-SESSION_3\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\nStep 4: Update touch and pointer events\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\n \r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in http://www.msnbc.msn.com/id/43662671/15:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\nTesting both experiences\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n1.	Press F12 to reveal the Developer Tools\r\n2.	Change your Document Mode to Internet Explorer 7 Standards\r\n3.	Refresh the page\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\nThat’s all!\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-3', '', '', '2012-04-09 11:54:22', '2012-04-09 15:54:22', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-3/', 0, 'revision', '', 0),
(1847, 3, '2012-04-09 11:54:51', '2012-04-09 15:54:51', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nStep 2: Update your CSS vendor prefixes\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following on MSNBC:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.\r\n\r\nStep 3: Get rid of browser sniffing methods\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n \r\n\r\nFeature Detection\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.\r\n\r\n \r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\n \r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an AutoResponder for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n1.	Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.\r\n2.	Select the AutoResponder tab on the right.\r\n3.	Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.\r\n4.	Drag the selected session from the left panel into the AutoResponder tab.\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\nâ—	If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/\r\nâ—	Then respond with: *200-SESSION_3\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\nStep 4: Update touch and pointer events\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\n \r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in http://www.msnbc.msn.com/id/43662671/15:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\nTesting both experiences\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n1.	Press F12 to reveal the Developer Tools\r\n2.	Change your Document Mode to Internet Explorer 7 Standards\r\n3.	Refresh the page\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\nThat’s all!\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-4', '', '', '2012-04-09 11:54:51', '2012-04-09 15:54:51', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-4/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1848, 3, '2012-04-09 11:54:56', '2012-04-09 15:54:56', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\nStep 2: Update your CSS vendor prefixes\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following on MSNBC:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.\r\n\r\nStep 3: Get rid of browser sniffing methods\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n \r\n\r\nFeature Detection\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.\r\n\r\n \r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\n \r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an AutoResponder for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n1.	Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.\r\n2.	Select the AutoResponder tab on the right.\r\n3.	Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.\r\n4.	Drag the selected session from the left panel into the AutoResponder tab.\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\nâ—	If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/\r\nâ—	Then respond with: *200-SESSION_3\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\nStep 4: Update touch and pointer events\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\n \r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in http://www.msnbc.msn.com/id/43662671/15:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\nTesting both experiences\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n1.	Press F12 to reveal the Developer Tools\r\n2.	Change your Document Mode to Internet Explorer 7 Standards\r\n3.	Refresh the page\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\nThat’s all!\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-5', '', '', '2012-04-09 11:54:56', '2012-04-09 15:54:56', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-5/', 0, 'revision', '', 0),
(1849, 3, '2012-04-09 11:57:25', '2012-04-09 15:57:25', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following on MSNBC:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.\r\n\r\n \r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\n \r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an AutoResponder for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n1.	Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.\r\n2.	Select the AutoResponder tab on the right.\r\n3.	Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.\r\n4.	Drag the selected session from the left panel into the AutoResponder tab.\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\nâ—	If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/\r\nâ—	Then respond with: *200-SESSION_3\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\n \r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in http://www.msnbc.msn.com/id/43662671/15:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n1.	Press F12 to reveal the Developer Tools\r\n2.	Change your Document Mode to Internet Explorer 7 Standards\r\n3.	Refresh the page\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-6', '', '', '2012-04-09 11:57:25', '2012-04-09 15:57:25', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-6/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1850, 3, '2012-04-09 11:58:04', '2012-04-09 15:58:04', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following on MSNBC:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.\r\n\r\n \r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\n \r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an AutoResponder for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n1.	Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.\r\n2.	Select the AutoResponder tab on the right.\r\n3.	Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.\r\n4.	Drag the selected session from the left panel into the AutoResponder tab.\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\nâ—	If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/\r\nâ—	Then respond with: *200-SESSION_3\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\n \r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in http://www.msnbc.msn.com/id/43662671/15:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n1.	Press F12 to reveal the Developer Tools\r\n2.	Change your Document Mode to Internet Explorer 7 Standards\r\n3.	Refresh the page\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-7', '', '', '2012-04-09 11:58:04', '2012-04-09 15:58:04', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-7/', 0, 'revision', '', 0),
(1851, 3, '2012-04-09 12:00:21', '2012-04-09 16:00:21', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following on MSNBC:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.\r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an AutoResponder for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in http://www.msnbc.msn.com/id/43662671/15:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-8', '', '', '2012-04-09 12:00:21', '2012-04-09 16:00:21', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-8/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1852, 3, '2012-04-09 12:00:28', '2012-04-09 16:00:28', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following on MSNBC:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as SASS and Compass, -prefix-free, or even CSS Snippets in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in A Best Practice for Programming with Vendor Prefixes on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is Modernizr. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our Developer Tools. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of http://www.msnbc.msn.com/id/37156949/.\r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an AutoResponder for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for MSPointer events like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in http://www.msnbc.msn.com/id/43662671/15:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in http://www.msnbc.com/id/44937131/. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches TouchList. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see Handling Multi-touch and Mouse Input in All Browsers.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or document mode, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download Internet Explorer 10 (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-9', '', '', '2012-04-09 12:00:28', '2012-04-09 16:00:28', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-9/', 0, 'revision', '', 0),
(1853, 3, '2012-04-09 12:08:13', '2012-04-09 16:08:13', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-10', '', '', '2012-04-09 12:08:13', '2012-04-09 16:08:13', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-10/', 0, 'revision', '', 0),
(1854, 3, '2012-04-09 12:13:31', '2012-04-09 16:13:31', '', 'get-flash', 0, '', 'inherit', 'open', 'open', '', 'get-flash', '', '', '2012-04-09 12:13:31', '2012-04-09 16:13:31', '', 1843, 'http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png', 0, 'attachment', 'image/png', 0),
(1855, 3, '2012-04-09 12:14:12', '2012-04-09 16:14:12', '', 'find-userAgent', 0, '', 'inherit', 'open', 'open', '', 'find-useragent', '', '', '2012-04-09 12:14:12', '2012-04-09 16:14:12', '', 1843, 'http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png', 0, 'attachment', 'image/png', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1856, 3, '2012-04-09 12:08:24', '2012-04-09 16:08:24', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-11', '', '', '2012-04-09 12:08:24', '2012-04-09 16:08:24', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-11/', 0, 'revision', '', 0),
(1857, 3, '2012-04-09 12:14:25', '2012-04-09 16:14:25', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-12', '', '', '2012-04-09 12:14:25', '2012-04-09 16:14:25', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-12/', 0, 'revision', '', 0),
(1858, 3, '2012-04-09 12:15:00', '2012-04-09 16:15:00', '', 'fiddler-sessions', 0, '', 'inherit', 'open', 'open', '', 'fiddler-sessions', '', '', '2012-04-09 12:15:00', '2012-04-09 16:15:00', '', 1843, 'http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions.png', 0, 'attachment', 'image/png', 0),
(1859, 3, '2012-04-09 12:16:08', '2012-04-09 16:16:08', '', '20110920-pointer', 0, '', 'inherit', 'open', 'open', '', '20110920-pointer', '', '', '2012-04-09 12:16:08', '2012-04-09 16:16:08', '', 1843, 'http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png', 0, 'attachment', 'image/png', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1860, 3, '2012-04-09 12:14:32', '2012-04-09 16:14:32', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-13', '', '', '2012-04-09 12:14:32', '2012-04-09 16:14:32', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-13/', 0, 'revision', '', 0),
(1861, 3, '2012-04-09 12:16:20', '2012-04-09 16:16:20', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on -webkit properties, omitting the prefixes which target other browsers such as -o, -ms, and -moz. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is browser sniffing. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called feature detection.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the canPlayType method exists on our newly-created video tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a video element is, the canPlayType method will be present. If the video element is unknown to the browser, the canPlayType method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “Modernizrâ€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions-300x225.png" alt="" title="fiddler-sessions" width="300" height="225" class="alignleft size-medium wp-image-1858" /></a>\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select Edit Response. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a pointer. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the pointerType property.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png" alt="" title="20110920-pointer" width="264" height="272" class="alignleft size-full wp-image-1859" /></a>\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like touchstart, touchmove, and touchend,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like MSPointerDown, MSPointerUP, and MSPointerMove.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like onresizeend and keyup. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the event.targetTouches <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the pageX and pageY properties from the first item in the TouchList, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf event.pageX is not found, we fall back to assigning the value of targetTouches[0].pageX to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to touchmove. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-14', '', '', '2012-04-09 12:16:20', '2012-04-09 16:16:20', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-14/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1862, 3, '2012-04-09 12:22:35', '2012-04-09 16:22:35', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on <em>-webkit</em> properties, omitting the prefixes which target other browsers such as <em>-o, -ms, and -moz</em>. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is <em>browser sniffing</em>. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called <em>feature detection</em>.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the <em>canPlayType</em> method exists on our newly-created <em>video</em> tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a <em>video</em> element is, the <em>canPlayType</em> method will be present. If the video element is unknown to the browser, the <em>canPlayType</em> method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “<em>Modernizr</em>â€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions-300x225.png" alt="" title="fiddler-sessions" width="300" height="225" class="alignleft size-medium wp-image-1858" /></a>\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select <em>Edit Response</em>. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a <em>pointer</em>. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the <em>pointerType</em> property.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png" alt="" title="20110920-pointer" width="264" height="272" class="alignleft size-full wp-image-1859" /></a>\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like <em>touchstart, touchmove</em>, and <em>touchend</em>,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like <em>MSPointerDown, MSPointerUP</em>, and <em>MSPointerMove</em>.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like <em>onresizeend</em> and <em>keyup</em>. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the <em>event.targetTouches</em> <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the <em>pageX</em> and <em>pageY</em> properties from the first item in the <em>TouchList</em>, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf <em>event.pageX</em> is not found, we fall back to assigning the value of <em>targetTouches[0].pageX</em> to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to <em>touchmove</em>. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-15', '', '', '2012-04-09 12:22:35', '2012-04-09 16:22:35', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-15/', 0, 'revision', '', 0),
(1863, 3, '2012-04-09 12:22:42', '2012-04-09 16:22:42', 'If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new <a href="http://blogs.msdn.com/b/ie/archive/2011/08/31/browsing-without-plug-ins.aspx">IE10 plug-in-free experience</a> on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.\r\n\r\nToday we’re going to work with a <a href="http://www.msnbc.msn.com/id/22825103/vp/46802160">MSNBC plug-in-free experience</a> for rich media. It breaks down to two things: styles and scripts. \r\n\r\nTo modify the files of MSNBC, I will be using a proxy application known as Fiddler. You can download this tool from <a href="http://fiddler2.com">http://fiddler2.com</a>. This tool allows me to modify remote files as though they were on my local machine. If you have direct access to your own site, you can ignore Fiddler, and work directly with your files. Fiddler provides a great way for testing changes without the risk of breaking your live site.\r\n\r\n<h2>Step 1: Declare Standards mode and valid markup for modern browsers</h2>\r\n\r\nIn order to use the HTML5 elements we’ll be utilizing below, you’ll first need to ensure that you are operating in standards mode. One way to ensure this is to include the HTML5 doctype at the top of your document:\r\n\r\n[code lang="html"]&lt;!DOCTYPE html&gt;[/code]\r\n\r\n<h2>Step 2: Update your CSS vendor prefixes</h2>\r\n\r\nThe CSS language is constantly in a state of change as new features are suggested, updated, and standardized. In order to allow developers to learn how to use these new features, browser vendors typically offer experimental implementations via prefixed properties.\r\n\r\nA key part of using vendor prefixes responsibly is to ensure that prefixes from each vendor are included in your site to allow for the broadest level of feature support. In many cases, especially when building an iPad-centric site, you may have focused solely on <em>-webkit</em> properties, omitting the prefixes which target other browsers such as <em>-o, -ms, and -moz</em>. The end result of this is that you greatly limit the target devices that can render your plugin-free site to as well as provide a degraded experience for users of other modern browsers, many of which could serve up equally engaging functionality.\r\n\r\nFor instance, we find the following <a href="http://www.msnbc.msn.com/id/45230852/a12">on MSNBC</a>:\r\n\r\n[code lang="css"]background: -webkit-gradient(\r\n  linear,\r\n  left top,\r\n  left bottom,\r\n  color-stop(1, rgba(192,192,192,.6)),\r\n  color-stop(0.5, rgba(0,0,0,.6))\r\n);[/code]\r\n\r\nWith the growing trend towards an HTML5 plugin-free experience, it’s important to expand these rules to provide the vendor prefixes of other major browsers as well. \r\n\r\n[code lang="css"]background: -webkit-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -moz-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -ms-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: -o-linear-gradient( \r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );\r\nbackground: linear-gradient(\r\n  top, rgba( 0, 0, 0, 0.0 ) 0%, rgba( 0, 0, 0, 0.6 ) 50% );[/code]\r\n\r\nWhile more verbose but the benefits to broad browser feature support certainly outweigh the extra typing involved. In addition, there are a number of great tools that can break down this workload, such as <a href="http://sass-lang.com/">SASS</a> and <a href="http://compass-style.org/">Compass</a>, <a href="http://leaverou.github.com/prefixfree/">-prefix-free</a>, or even <a href="http://www.asp.net/web-forms/videos/visual-studio-vnext/visual-studio-vnext-videos-css-editor-snippets">CSS Snippets</a> in the upcoming Visual Studio 2011.\r\n\r\nAlso, if you’re working predominantly in JavaScript and would like to save time determining which features are supported by your client’s browser, review the instructions in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/28/a-best-practice-for-programming-with-vendor-prefixes.aspx">A Best Practice for Programming with Vendor Prefixes</a> on the IEBlog.\r\n\r\n<h2>Step 3: Get rid of browser sniffing methods</h2>\r\n\r\nThere are two methods used to determine what the user’s browser and device are capable of. One method, which unfortunately is somewhat popular, is <em>browser sniffing</em>. This method consists of examining the navigator object for certain patterns or values.\r\n\r\n[code lang="javascript"]if ( navigator.userAgent.indexOf(&quot;iPad&quot;) &gt; -1 ) {\r\n  // Load HTML5 Experience\r\n} else {\r\n  // Load Flash Experience\r\n}[/code]\r\n\r\nThe above code looks at the user agent string for the value “iPadâ€, and if found delivers a plug-in-free HTML5 experience. Otherwise, it’s assumed you are on a device that has Flash installed. This will result in a broken experience for non-iPad users who are browsing with plug-ins disabled, even though their browser is capable of handling HTML5 features.\r\n\r\nHere is an attempt to find the version of Internet Explorer. \r\n\r\n[code lang="javascript"]if ( tests.IE ) {\r\n  j = /msie.(\\d\\.\\d+)/i;\r\n  k = navigator.userAgent.match(j)[1];\r\n}[/code]\r\n\r\nThe user agent string is tested for a pattern that attempts to target the version number. This pattern looks for a single digit, followed by a period, followed by any number of additional digits. While this test will find values like “MSIE 8.0â€ and “MSIE 9.0â€, it will not identify the latest version of Internet Explorer, which identifies itself as “MSIE 10.0â€, since only one digit is expected before the period.\r\n\r\nThese are just a couple examples of why browser sniffing is not a best practice. The user agent string is not immutable - it is a read-write value that is easily changed by plugins, or even the user. Most modern browsers include the ability to easily change this value from their development tools, which some users take advantage of to get around poorly-developed websites.\r\n\r\nIf we disable plugins, or visit MSNBC from a device/browser that doesn’t have Flash, we would expect it to attempt a plug-in-free experience. Unfortunately, this is not the case. Rather than seeing an HTML5 experience, we’re instead asked to download Flash. This is because the site puts the user in one of two categories: an iPad user, or a Flash-enabled user.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/get-flash-300x225.png" alt="" title="get-flash" width="300" height="225" class="alignleft size-medium wp-image-1854" /></a>\r\n\r\n<h2>Feature Detection</h2>\r\n\r\nRather than trying to guess what a browser is capable of by sniffing its user agent string (which will fail you eventually), it is much wiser to actually test features directly in the browser. If you wanted to test the browser’s ability to deliver video and audio via HTML5, you could actually attempt to create these elements via JavaScript, and see if the browser understands them. This practice is called <em>feature detection</em>.\r\n\r\n[code lang="javascript"]if ( !!document.createElement(“videoâ€).canPlayType  ) {\r\n  // Load HTML5 Video\r\n} else {\r\n  // Load Flash Video\r\n}[/code]\r\n\r\nIn the above example, we start by testing whether the <em>canPlayType</em> method exists on our newly-created <em>video</em> tag. We’re using double-negation to cast the response to a boolean. If the browser understands what a <em>video</em> element is, the <em>canPlayType</em> method will be present. If the video element is unknown to the browser, the <em>canPlayType</em> method will not exist. If this test passes, we load our HTML5 video. If the test does not pass, we attempt to load Flash. Deeper feature detection could take place here, since Flash may not be on the machine, or may be disabled.\r\n\r\nFeature detection is the preferred method of determining what a browser is capable of, since there is no guesswork involved. If the browser passes properly-constructed tests, it absolutely supports the features you would like to use.\r\n\r\nMany great tools exist to provide feature tests for you. Once such tool, which provides over 40 tests, is <a href="http://www.modernizr.com/">Modernizr</a>. This tool creates a global object called “<em>Modernizr</em>â€ which contains the results of your tests. With Modernizr, testing for HTML5 video support is extremely easy:\r\n\r\n[code lang="javascript"]if ( Modernizr.video ) {\r\n  // Load HTML5 Video\r\n}[/code]\r\n\r\nMSNBC engages in browser sniffing to see if the device accessing the page is an iPad or not. Our first step is to remove the browser sniffing code, and replace it with feature detection code. \r\n\r\nBefore we can modify browser sniffing code, we first need to locate it. While in Internet Explorer, pressing F12 will pull up our <a href="http://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx">Developer Tools</a>. Within the tools, open the Script tab and do a search for “userAgentâ€. This search will seek out any instance of this property name in all of the site’s script files. We’re interested in the result from line 41 of <a href="http://www.msnbc.msn.com/id/37156949/">http://www.msnbc.msn.com/id/37156949/</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/find-userAgent-300x225.png" alt="" title="find-userAgent" width="300" height="225" class="alignleft size-medium wp-image-1855" /></a>\r\n\r\nNow that we know what we want to edit, we can open up Fiddler and load up our traffic. Once Fiddler is opened, perform a hard-refresh (Ctrl+F5 in IE) on the MSNBC page. This results in all of the page sessions being listed in Fiddler.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/fiddler-sessions-300x225.png" alt="" title="fiddler-sessions" width="300" height="225" class="alignleft size-medium wp-image-1858" /></a>\r\n\r\nLooking carefully, you’ll notice our resource is the third from the top. Next I will setup an <a href="http://fiddler2.com/Fiddler2/help/AutoResponder.asp">AutoResponder</a> for this session file so that anytime it is requested, my own custom file is substituted in the place of the server response:\r\n\r\n<ol><li>Right-click this session and select “Decode Selected Sessionsâ€ from the context menu.</li>\r\n<li>Select the AutoResponder tab on the right.</li>\r\n<li>Click the “Enable automatic responsesâ€ checkbox in the AutoResponder tab.</li>\r\n<li>Drag the selected session from the left panel into the AutoResponder tab.</li></ol>\r\n\r\nAt this point, you should have an entry within your AutoResponder tab with the following rules:\r\n\r\n<ul><li>If URI matches: EXACT:http://www.msnbc.msn.com/id/37156949/</li>\r\n<li>Then respond with: *200-SESSION_3</li></ul>\r\n\r\nRight-click the entry in the AutoResponder and select <em>Edit Response</em>. In the popup that follows, switch to the SyntaxView tab where we will find the source for this file. As expected, line 41 contains our browser sniffing code:\r\n\r\n[code lang="javascript"]if(!(navigator.userAgent.toLowerCase().indexOf(&quot;ipad&quot;)&gt;-1)){\r\n  // Flash Experience\r\n}[/code]\r\n\r\nRather than test the contents of the userAgent, we’re going to instead look for support for the HTML5 video tag. Switch the above condition to the following:\r\n\r\n[code lang="javascript"]if ( !document.createElement(&quot;video&quot;).canPlayType ) {\r\n  // Flash Experience\r\n}[/code]\r\n\r\nThis test checks to see if we cannot use the video element. If canPlayType comes back as undefined, it will be cast to true and the first code block will be entered, setting up the Flash experience.\r\n\r\n<h2>Step 4: Update touch and pointer events</h2>\r\n\r\nSafari supports both a touch event model and a mouse event model. Internet Explorer 10 groups touch, mouse, and stylus events into a single abstract item known as a <em>pointer</em>. In fact, Internet Explorer 10 is the first browser to work for all input types, across all devices. This abstraction cuts down drastically on the amount of effort involved to determine which event model you ought to bind to and how to detect user-interaction. This pointer is then handled through MSPointer events. If necessary, you can determine the type of pointer by accessing the <em>pointerType</em> property.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png"><img src="http://blog.reybango.com/wp-content/uploads/2012/04/20110920-pointer.png" alt="" title="20110920-pointer" width="264" height="272" class="alignleft size-full wp-image-1859" /></a>\r\n\r\nDue to the fact Internet Explorer doesn’t support Apple’s proprietary event model, which includes touch events like <em>touchstart, touchmove</em>, and <em>touchend</em>,  MSNBC’s event listeners will need to be amended to listen for <a href="http://msdn.microsoft.com/library/ie/hh673557.aspx#pointer_events">MSPointer events</a> like <em>MSPointerDown, MSPointerUP</em>, and <em>MSPointerMove</em>.\r\n\r\nDue to the difference in event model implementations, use a feature detection tool like Modernizr or code like this to target all major event models:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  myCanvas.addEventListener(&quot;MSPointerMove&quot;, paint, false);\r\n} else {\r\n  myCanvas.addEventListener(&quot;mousemove&quot;, paint, false);\r\n  myCanvas.addEventListener(“touchmoveâ€, paint, false);\r\n}[/code]\r\n\r\nMSNBC only supports touch events, which we will need to change so that visitors who happen to be using a mouse can still interact with the page:\r\n\r\nOur events are tied up in <a href="http://www.msnbc.msn.com/id/43662671/15">http://www.msnbc.msn.com/id/43662671/15</a>:\r\n\r\n[code lang="javascript"]document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\ndocument.addEventListener(&quot;touchend&quot;, touchHandler, false);[/code]\r\n\r\nWe’re going to update this to include the MSPointer events as well:\r\n\r\n[code lang="javascript"]if (window.navigator.msPointerEnabled) {\r\n  document.addEventListener(&quot;MSPointerDown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerMove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;MSPointerUp&quot;, touchHandler, false);\r\n} else {\r\n  document.addEventListener(&quot;touchstart&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchmove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;touchend&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousedown&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mousemove&quot;, touchHandler, false);\r\n  document.addEventListener(&quot;mouseup&quot;, touchHandler, false);\r\n}[/code]\r\n\r\nFirst we’re checking for the presence of pointers. Since the MSPointer covers the mouse, fingers, and pens, we don’t need anything else besides them. We fall back, if necessary, to provide both touch and mouse events. \r\n\r\nNext we need to create cases for these event types in <a href="http://www.msnbc.com/id/44937131/">http://www.msnbc.com/id/44937131/</a>. Currently, MSNBC starts with the following:\r\n\r\n[code lang="javascript"]if ( event.type == &quot;touchstart&quot; ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type == &quot;touchmove&quot; ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type == &quot;touchend&quot; ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nWe’ll modify this to listen for all of the registered event types:\r\n\r\n[code lang="javascript"]if ( event.type.match( /(down|start)$/i ) ) {\r\n  /* Start drag logic */\r\n} else \r\nif ( event.type.match( /move$/i ) ) {\r\n  /* Drag logic */\r\n} else \r\nif ( event.type.match( /(up|end)$/i ) ) {\r\n  /* Complete drag logic */\r\n}[/code]\r\n\r\nThe above uses the match method and a series of regular expressions to determine which event was raised. If the event raised ends with a case-insensitive “downâ€ or “startâ€, we begin our drag code. If the event ends with a case-insensitive “moveâ€, we perform the actual drag logic itself. And lastly, if the event ends with a case-insensitive “upâ€ or “endâ€, we end our dragging event. Note: other events may be caught here as well, like <em>onresizeend</em> and <em>keyup</em>. Be sure to consider this in your project.\r\n\r\nThe above is an implementation of Ted Johnson’s solution in <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\nThe drag logic itself initially relies upon the <em>event.targetTouches</em> <a href="https://developer.mozilla.org/en/DOM/TouchList">TouchList</a>. This member does not exist in Internet Explorer. The drag logic attempts to gather the <em>pageX</em> and <em>pageY</em> properties from the first item in the <em>TouchList</em>, however in Internet Explorer these values are found directly on the event object.\r\n\r\n[code lang="javascript"]var curX = event.targetTouches[0].pageX;[/code]\r\n\r\nUsing the logical OR operator, I instruct curX to hold the value of event.pageX as long as event.pageX is present on the event object. If this property is not found, look within the targetTouches list:\r\n\r\n[code lang="javascript"]var curX = event.pageX || event.targetTouches[0].pageX;[/code]\r\n\r\nIf <em>event.pageX</em> is not found, we fall back to assigning the value of <em>targetTouches[0].pageX</em> to our variable.\r\n\r\nAnother important item to keep in mind is that this site initially responds to <em>touchmove</em>. When this event is raised while touching the playlist, the code attempts to reposition the playlist based upon your touch movement. There is no hovering when it comes to touch - you’re either touching, or you’re not.\r\n\r\nNow that we have mouse events tied into this logic, we have introduced the possibility for hovering. So while touchmove is free to reposition our playlist when it is over the playlist, we don’t want to do the same for mousemove. In fact, we only want the mousemove event to reposition the playlist when the mouse button is pressed.\r\n\r\nFor further reading, and examples on how to target all browsers, see <a href="http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx">Handling Multi-touch and Mouse Input in All Browsers</a>.\r\n\r\n<h2>Testing both experiences</h2>\r\n\r\nRecall our feature detection from earlier, how we first check to see if HTML5 video support is in the user''s browser. If it is, we give them HTML5. If it is not, we give them Flash. One easy way to test our work is to use a browser, or <a href="http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx">document mode</a>, that doesn’t support HTML5 features. This is very easy to test with Internet Explorer:\r\n\r\n<ol><li>Press F12 to reveal the Developer Tools</li>\r\n<li>Change your Document Mode to Internet Explorer 7 Standards</li>\r\n<li>Refresh the page</li></ol>\r\n\r\nIf our feature detection condition was written properly, you should now be watching a Flash-based presentation. Switching your Document Mode back into Internet Explorer 9 Standards (or “Standardsâ€ if you’re using IE10), will return you to the HTML5 experience.\r\n\r\n<h2>Get it Done!</h2>\r\n\r\nHopefully this post helps to define the types of changes that will allow your iOS site to work properly in IE10 Metro and other plugin-free environments. By including best practices such as feature detection and responsibly using vendor prefixes for great new features, you should be able to provide your users a great experience, regardless of which browser or device they’re using.  To assist with testing in other plug-in-free environments, download <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">Internet Explorer 10</a> (currently available only in the Windows 8 CP) and begin testing today!\r\n', 'iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences', 0, '', 'inherit', 'open', 'open', '', '1843-revision-16', '', '', '2012-04-09 12:22:42', '2012-04-09 16:22:42', '', 1843, 'http://blog.reybango.com/2012/04/09/1843-revision-16/', 0, 'revision', '', 0);
