How could I adapt HTML5 template to IE5, IE6, etc with Modernizr?

Question

I'm looking for a HTML5 and CSS3 template and a lot of jquery plugins for my website. Let's say I want to adapt my website to IE5, IE6, etc. Modernizr could be useful to reach my goal. My question is if I need to have a different style per each style doesn't support by IE5, IE6, etc.

In that case, if i get a great HTML5 template I'm going to work a lot adapting each style for IE5, IE6, etc.

What do you think about this? How could I do to avoid writing different styles? or if I'm wrong please let me know.

Thanks in advance.

Answer 1

First Off: An HTML5 template will generally have a DOCTYPE that is html and not one of those nice transitional or strict types expected by IE5 or IE6, so you're going to have to work around this.

A modern template might very well use the latest versions of JQuery or may have other libraries that use features in the later JQuery versions and this isn't going to work for you since support for these browsers has been dropped from the latest JQuery Library.

The selectors and styles used in a Modern template / CSS most likely aren't going to work in IE5 or IE6 and there are a lot of JavaScript functions that aren't present in IE5 that modern sites will use.

The Final rendered HTML (if you can get the site to work) on IE5 / IE6 aren't really going to look the same as on modern browsers and trying to fix up all the styles specifically for each of these will potentially cause you some issues.

If you must do this:

• Start with a very simple almost blank place holder site

• detect IE5 and IE5 early and load the IE specific content for these (JavaScript and CSS)

• If one of these

• Pull in all the polyfill code you need to get the the browser functionality as good as you can.

• Don't even try to make the layout or style to be like none IE5 / 6 version. A user with only these browsers isn't going to be able to see / run the other version anyway and has nothing to compare to.

• Otherwise load the modern site version.

Ideally you'd want to use routing / url rewriting the push the requests to a set of IE5 / IE6 pages and then map those onto the server / API back-end.

so your URL become something like

 http://mysite/Page            - Normal site
 http://mysite/ie5/Page        - IE5 version

In the end its likely to far less work to do it this way then trying to deal with every browser version in one huge set of complex mark-up.

One of the advantages of keeping these two separate is that when choose to stop supporting IE5 you can redirect those mapping to an upgrade page by themselves and later when you retire IE6 do that same for that. This may all the hacks, additional code, different mark-up and UI bugs can be contained to only these browsers without it all effecting your main development.