HTML5 fix for Internet Explorer And Doctype fix for EPiServer solutions
by Rizo 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
1 Trackback or Pingback for this entry
-
HTML5 fix for Internet Explorer And Doctype fix for EPiServer solutions
mars 11th, 2023 on 10:044D Nombor
I found a great…
oktober 9th, 2009 on 00:31
Awesome work. Glad everything worked out
oktober 9th, 2009 on 20:30
Good write up! I’m sure this will come handy in many projects the coming year or so.
november 13th, 2009 on 18:45
add me to msn sez mästaren
december 2nd, 2010 on 11:52
Lusse, du är en hjälte – och förklara kan du göra också! 🙂 Nu snor jag kod från dig, tack!
augusti 17th, 2014 on 18:40
Try this awesome program which uses
proxies to unblock any web site
september 25th, 2014 on 11:08
This is the ideal time for making many options in the future and time and energy to smile. I have got look at this set up and if I possibly could I wish to give you advice a number of attention-grabbing points or even tips.. youtube web proxy Perhaps you may possibly generate subsequent content concerning this article. My spouse and i desire to get more info problems close to that!