Automatically convert HTML5 to HTML4

I just love HTML5 and how easy things will become once it breaks through. However, until so is the case, the HTML code we write must be supported by older browsers as well.

Still, we want to write HTML5 code…not old one. So, how to solve this little nugget of dilemma?

Well, to make it possible to write HTML5 and still support older browsers, I and a collegue have created a class that automatically converts HTML5 elements to div and span elements when the response is sent to the client. For instance, <nav>…</nav> is translated to

for IE8, while Chrome and Firefox will receive the original HTML5 code.

The basic implementation

First of all, HTML support is determined by one class, which implements a small interface. If the browser is considered to not support HTML5, the HTML5 code is converted to HTML4 with another small class, which implements an even smaller interface.

Note: when we developed this, we tested it in an MVC application. However, it seems like there are some problems in web forms applications, where the output gets rendered multiple times. I will look into this and update the filter.

This interface/implementation pattern is, if you are used to working with it, great if you use IoC/DI and later on feels that these quick implementations are insufficient. For instance, maybe you want to use a complete list of non-HTML5 browsers (we only consider IE8 and below not to have HTML5 support) and also do not want the class name to be applied to the end tag (which our class will add).

If you feel like improving these classes, feel free to provide us with any updated, improved versions 🙂

The ugly test hack

When we finally went out to try the classes in action, we applied them in the Render event of a web form master page.

It worked like a charm. When browsing the site with Firefox, Chrome etc. we received the HTML5 code…

Firefox HTML code

When viewing the site in Firefox, we get the original HTML5 code.

…but in IE8, we were served the converted HTML4 code.

IE HTML code

When viewing the site in IE8, we get the converted HTML4 code.

Well, isn’t this marvelous?

But…wait a minute…applying it in the Render event of the master page? That feels…well, really, really bad.

Yes, you are absolutely right. As I wrote, we were just trying it out. Relax…then read on for information about how to do it right 🙂

The pretty final solution

I guess that we can all agree that we want to make this conversion independent of our code. The solution above (applying it in the Render event), for instance, only works for Web Forms-based solutions. What if we want to automatically convert HTML5 to HTML 4 in an ASP.NET MVC-based web site?

We need to find a better way of triggering the HTML5 conversion. So, how to do it “right”?

We decided to create an HttpModule that applies a HTML5 conversion filter to the outgoing response. This will automatically handle all outgoing responses, provided that the module is registered in web.config.

To enable the module, it depends which IIS setup you are using:

  • If you are using IIS 7.0 running in Integrated mode, add the following to the web.config system.webServer modules section:
         <add name="NExtra.Web.HttpModules.Html5ElementConvertHttpModule"
              type="NExtra.Web.HttpModules.Html5ElementConvertHttpModule, NExtra, Version=2.0.0.0, Culture=neutral" />
  • If you are using IIS 6.0 or IIS 7.0 running in Classic mode (including the development server), add the following to the web.config system.web httpModules section instead:
         <add name="NExtra.Web.HttpModules.Html5ElementConvertHttpModule"
              type="NExtra.Web.HttpModules.Html5ElementConvertHttpModule, NExtra, Version=2.0.0.0, Culture=neutral" />

That should be all you need to do to enable the automatic HTML5 to HTML4 conversion.

Advertisements