Un court billet pour vous faire part d’une astuce que j’ai découvert aujourd’hui et qui va immédiatement m’être indispensable.

Si vous avez un peu joué avec le langage du web, HTML, et notamment sa dernière version, la 5, vous vous êtes sans doute aperçu qu’Internet Explorer avant la version 9 ne connaissait pas les nouvelles balises (article, aside, footer, header, nav, section, time, toussa quoi). En fait, aucun ancien navigateur ne les connait, et c’est bien normal, puisque les navigateurs sont sortis avant la norme. Mais au contraire d’Opera, de Safari et de Firefox, qui, même s’ils ne connaissent pas les balises, les stylent correctement (c’est-à-dire leur applique correctement le CSS), Internet Explorer, lui, les ignore purement et simplement.

Par exemple,

<header>Salut !</header>

avec header { color: red; } dans le CSS s’affichera bien en rouge sous les navigateurs cités ci-dessus, sauf sur Internet Explorer (6, 7 et 8, et puis même ceux d’avant :p) qui ignorent le tout.

L’astuce du jour, vous l’aurez compris, consiste donc à réussir à appliquer un style aux balises inconnues d’IE. Je précise pour les petits malins qui auraient essayé comme moi le code suivant :

<header class='headerStyle'>Salut !</header>

avec .headerStyle { color: red; } que ça ne marche pas mieux, IE ignore simplement les balises.

Après quelques recherches sur le web, je suis finalement tombé sur cet article qui, oh, miracle, vient avec une solution propre à notre problème. Il suffit de créer les éléments en JavaScript. Attention, même pas besoin de les ajouter au DOM hein. Non non, juste de créer l’élément, avec document.createElement("‘header’"); et on est bon. Merci IE!

<script type="text/javascript">
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
document.createElement("footer");
</script>

Allez, comme je suis gentil, je vais même vous donner une version raccourcie :

'article aside footer header nav section time'.replace(/w+/g,function(n){document.createElement(n)});

Vous rajoutez autour de ça les commentaires “spécial IE”, et voilà, vous pouvez coder en HTML5 avec un problème en moins !

<!-- Let's hack Internet Explorer to allow HTML5 element -->
<!--[if lt IE 9]>
<script type="text/javascript">
'article aside footer header nav section time'.replace(/w+/g,function(n){document.createElement(n)});
</script>
<![endif]-->

Merci qui ? :D