Tridion preview and HTML5 elements

Question

We have created a new website based on HTML5. With elements like <header>, <nav>, <section>, etc...

It is a pretty straightforward implementation in Tridion 2009 SP1. This means that most of the site is not dynamic, but built up by Tridion Templating. One of the benefits is that the content managers can use the preview functionality.

However, since the content managers are restricted to use IE8 we have to use something like Modernizr.js to format the HTML properly.

This is where the fun ends... Works fine on the website itself, but not in the Tridion Preview screen. It almost seems like it is not picking up the Javascript.

Any ideas, besides creating different preview HTML and CSS?

Redeem

Maybe a whole different way to solve it: Chrome Frame. No admin rights needed, just one line in your head section to let it kick in. It will a create frame in IE where chrome is loaded and you'll have all the HTML5 sugar you need. chromium.org/developers/how-tos/chrome-frame-getting-started/… – Cab

Answer 1

The answer was already in the question and unfortunately not an easy answer.

This issue seems to be only an issue for the older IE browsers (everything below IE9).

I ended up making a different preview CSS in combination with different HTML. All the HTML5 elements such as: <nav>, <header>, <article>, <section>, <aside>, etc... were changed into <div class="html5elementname">.

Cumbersome work, but the only way using IE8/IE7 and HTML5 for Tridion 2009 Preview.

Redeem

Answer 2

I haven't used HTML5 with 2009 SP1, but on 2011 SP1 HR1 it was working fine for us. Not sure why that difference would be there though. The 2011 UI is of course quite different at some points, but I think the preview has always been inside an iframe which should work just fine. Mind you using 2011 would also allow you to use Chrome and Firefox so I surely can recommend the upgrade.

There is one thing we have been struggling with for HTML5 on IE, which is the compatibility mode. I never touch the button, but since its right next to the refresh button, I've noticed a lot of ppl accidentally turn it on. After doing that your browser will revert back to IE7 mode, which is something which didn't work well for our HTML5 design even with the help of modernizr. Could it be that its not so much 2009 which is your problem, but the compatibility mode which is turned on?

Nickey

Yup, the compatibility mode was the first thing to check ;-) – Redeem