Preview Tridion and HTML5 Elements

Question

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

This is a fairly simple implementation in Tridion 2009 SP1. This means that most of the site is not dynamic, but created using Tridion Templating. One advantage is that content managers can use the preview features.

However, since content managers are limited to using IE8, we should use something like Modernizr.js to format the HTML correctly.

This is where the fun ends ... It works fine on the website itself, but not on the Tridion preview screen. It doesn't seem like it picks up Javascript.

Any ideas besides creating different HTML and CSS previews?

Answer 1

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

This problem only seems to be a problem for older IE browsers (all below IE9).

I ended up creating a different preview CSS in combination with another HTML. All HTML5 elements, such as: <nav> , <header> , <article> , <section> , <aside> , etc. have been changed to <div class = "html5elementname"> .

A cumbersome job, but the only way to use IE8 / IE7 and HTML5 to preview Tridion 2009.

Answer 2

I have not used HTML5 since 2009 SP1, but in 2011 SP1 HR1 it worked great for us. I don’t know why this difference would be there. In some cases, the 2011 user interface is, of course, completely different, but I think that the preview was always inside the iframe, which should work fine. If you plan to use 2011, you can also use Chrome and Firefox, so I can certainly recommend the update.

There is one thing we struggled with HTML5 on IE, which is compatibility mode. I never touch the button, but since next to the update button, I noticed that many ppl accidentally turned it on. After that, your browser will return to IE7 mode, which does not work so well for our HTML5 design, even with modernizr. Maybe this is not so much 2009 as your problem, but the compatibility mode that is turned on?