Rizo's

HTML5 fix for Internet Explorer And Doctype fix for EPiServer solutions

by on okt.08, 2009, under Developing

HTML 5 introduces new elements to use such as <header> <section> <nav> and many more. The problem is that no version of Internet Explorer recognizes the new elements, but Firefox, chrome and many others does. The solution is easy but a bit boring when you think about it, since it’s about replacing all new elements to div instead. Which means that IE users won’t be able to appreciate HTML5 but users that use Firefox, Chrome and so on will.

Anyway, on with the solution! What you need to do is modify the writer and basically find all elements and change them with a div.  A good place to do it on is on your masterpage.

[sourcecode language=’c#’]
protected override void Render(HtmlTextWriter writer)
{
if(Request.Browser.Browser == ”IE”)
HTML5Replace(writer);
else
base.Render(writer);
}

private void HTML5Replace(HtmlTextWriter writer)
{
MemoryStream memoryStream = new MemoryStream();
StreamWriter streamWriter = new StreamWriter(memoryStream);
HtmlTextWriter memoryWriter = new HtmlTextWriter(streamWriter);
base.Render(memoryWriter);
memoryWriter.Flush();
memoryStream.Position = 0;
TextReader reader = new StreamReader(memoryStream);
string output = reader.ReadToEnd();
output = Regex.Replace(output, RegExStrings.HTML5_BLOCK_ELEMENTS , RegExStrings.HTML5_BLOCK_ELEMENTS_REPLACEMENT );
writer.Write(output);
}

[/sourcecode]

But what REALLY does the magic is the RegEx, since it will find the elements for you and replace them correctly.

[sourcecode language=’c#’]
public const string HTML5_BLOCK_ELEMENTS = @”<(\/)?(nav|section|header|aside|footer)"; public const string HTML5_BLOCK_ELEMENTS_REPLACEMENT = @"<$1div"; [/sourcecode] The reason why I use $1 on the replacement string, is because I want to add a "/" if there is one in the element I found. This to close the tag correctly. So basically, when it finds "<nav" it will replace it with "<div" and when it finds "</nav" it will replace it with "</div". Closing tag and class/id names will still be there so the div can take on the behavior of the replaced element. Another problem that you will run into, if you're running your site with EPiServer that is, is that EPiServers friendlyurlrewriter doesn't recognize the doctype and it will try to fix it for you. For HTML 5 you'll need the following doctype  "<!DOCTYPE html>" but EPiServer will change it to the following "<!DOCTYPE HTML PUBLIC "" "">". Mohsen Pirouzfar found a great solution for this which you can read here. It’s in swedish but the code itself is usable to anyone 🙂

:, , ,

6 Comments for this entry

16 Trackbacks / Pingbacks for this entry

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...

Archives

All entries, chronologically...