Créer un layout en HTML5, compatible IE6 ?

En introduction, j’aimerai calmer les foudres de certain qui n’hésiteront pas à dire que cet article est du vu et du revu. Mais bon, d’une part j’m'en cogne pas mal de ça et ensuite, je vais essayer de faire un bref récapitulatif des informations que j’ai glané durant l’élaboration du « projet » qu’il m’a été demandé de mener à mon travail. Une bête histoire de partage et d’astuces, au final.

J’ai été récemment embauché en tant qu’intégrateur web dans une des nombreuse agences de Paris. Pour vous remettre dans le contexte, ils ne font pas que des sites webs, c’est plus une part dans un gros package proposé aux clients. De ce fait, le site web a besoin d’être créé le plus rapidement possible, mais surtout qu’il fonctionne. Ainsi, la mise en page est bonne, mais elle est faite en tableau. HTML 4 stylin’.
J’ai donc été embauché pour apporter une sorte de vent frais à tout ça, à base d’xHTML 1.0, de CSS 2.1 et de jQuery.
Les clients étant ce qu’ils sont, nous sommes obligés de garder la compatibilité avec IE6 qui représente tout de même une part de marché non négligeable. Ainsi, si nous (= l’agence) ne nous engageons pas à rendre compatible nos sites avec IE6, nous perdons les contrats. C’est triste, mais c’est ainsi.

Bref, je me suis posé la question suivante : l’(x)HTML c’est cool, mais pourquoi ne pas faire de l’HTML5 ? (par HTML5, nous entendrons d’utiliser les balises de « mise en forme » telles que header, nav, section, article, footer et non pas video et audio, voici pourquoi :) L’équipe dans laquelle je suis intégré était un peu frileuse. L’HTML5 n’est pas encore une technologie finie, etc. Cette remarque est très pertinente pour les éléments « multimedia » de ce langage, beaucoup moins pour les balises sus-citées. Les choses étant dites, j’ai essayé de faire un bête layout en HTML5 et qui soit compatible IE6. Par bête layout, nous entendrons un header, une sidebar de navigation et un contenu.

Si tu cliques, t’arrives sur le .html

Bon, concernant le code en lui même, il est peut-être pas optimal (après tout, j’apprends. Si vous voyez des modifications, n’hésitez pas à me le faire savoir dans la partie commentaires) (tiens, y’a un h1 dans le header et un autre dans article. ihihihi) mais c’est vraiment la base. Mais intéressons-nous à la compatibilité avec IE6.

HTML5 n’est pas reconnu par IE6 car logiquement, IE6 ne peut pas reconnaître les balises vu qu’il ne les connait pas, vu qu’à la création d’IE6 et bien HTML5 n’existait pas. Ainsi, avec un bout de JavaScript il suffit simplement de créer les éléments HTML5 :

1
2
3
4
5
6
7
8
9
10

document.createElement("header");
document.createElement("footer"); 
document.createElement("section"); 
document.createElement("aside"); 
document.createElement("nav"); 
document.createElement("article"); 
document.createElement("figure"); 
document.createElement("figcaption"); 
document.createElement("hgroup"); 
document.createElement("time");

Ainsi fait, il faudra joindre dans la balise HEAD de notre page ce code (que l’on aura mis dans un beau .js) via l’appel suivant (qui parle de lui-même) :

1

<!--[if IE]><script src="html5-ie.js"></script><![endif]-->

Lorsque nous faisons un document.createElement, c’est naturellement que le navigateur ne va pas se dire « oh tiens, ces éléments sont créés, je vais donc les transformer en éléments de type block lalala » (quel connard) alors qu’IE6 en a apparemment besoin. Donc, un coup de CSS :

1

header, nav, article, footer, address, section { display:block; }

Il ne vous restera plus qu’à faire votre mise en page et tadam.

Pour info, j’ai essayé de refaire la mise en page en HTML5 d’un site actuellement en prod qui est faite en tableaux, et le résultat est finalement le même sur IE6 entre la version HTML5 et la version tableaux.

Fabuleux.

J’espère que cet article vous aidera un peu d’une quelconque manière. N’hésitez pas à me faire des retours d’expérience dans les commentaires !