Le problème actuel de vouloir utiliser HTML5 en production est en grande partie dû à Internet Explorer : j'en discutais sur Braincracking avec JPVincent (suivez le lien), il est impossible d'avoir un site utilisant les balises HTML5 sous Internet Explorer sans Javascript, ce dernier est obligatoire pour permettre l'affichage des nouvelles balises comme nav.
Mon propre site ne dérogeait pas à la règle, un javascript en commentaire conditionnel fixait ce problème pour Internet Explorer. Autrement dit, si quelqu'un arrivait avec Internet Explorer sans Javascript activé sur mon site, patatrac !
Suite à un tweet, j'ai essayé HTML5 elements in Internet Explorer without Javascript.
Et curiosité, la méthode marche parfaitement... et j'ai pu la déployer très aisément. En pratique, voici la méthode :
- rajouter
xmlns:html5="http://www.w3.org/1999/xhtml"danshtml, ce qui donne<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">. (les éléments HTML5 utilisent leur propre namespace) - Ensuite, dans le code HTML, chacune des nouvelles balises HTML5 doit être écrite ainsi, par exemple
<html5:nav>blabla</html5:nav> - Côté CSS, il faut préfixer les balises ainsi
html5\:nav{display:block;}. L'antislash est obligatoire pour éviter que le navigateur pense avoir affaire à une pseudo classe comme:hover.
Important : le double namespace marche mais ne passe pas au validateur si votre document HTML5 est servi en text/html... par contre, cela marche et est parfaitement valide si vous le servez en application/xhtml+xml, coup de chance, c'est le cas pour mon site ! (je le savais que mettre cette forte contrainte me servirait un jour !)
Pour les CSS, je pensais être embêté car elles n'utilisent pas la notation nav{} (je passe directement par #bandeau{} et pas par nav#bandeau{}, pour d'évidentes raisons de séparation structure/présentation, je ne pouvais donc pas écrire html5\:nav{} et marquer html5\:#bandeau{} ne marchait pas) ... et en fait, j'ai trouvé une solution encore plus élégante et très facile à déployer sur mes 24 CSS (heureusement !).
J'utilise un reset CSS spécial HTML5 (afin de spécifier les éléments de type "bloc" et ceux "en-ligne", il m'a juste suffi de doubler ces déclarations dans ce reset ainsi : nav,html5\:nav{display:block;}... et cette modification suffit pour que les styles s'appliquent sous IE.
Résultat, avec quelques remplacements automatiques pour le code HTML, quelques copier/coller pour les CSS, mon site en HTML5 s'affiche parfaitement sous Internet Explorer, sans Javascript.
Conséquence supplémentaire très agréable : plus besoin non plus du Javascript Print Protector pour les problèmes de versions imprimables en HTML5 sous Internet Explorer, ça résout également ce problème !
Je continue de faire des tests, mais tout semble fonctionner.
Ajout : le validateur du W3C a visiblement un problème et n'accepte pas le type application/xhtml+xml, il prend donc ma page servi en text/html (ce qui génère des erreurs de validation). Pourtant, si vous testez la source générée pour Firefox par exemple, vous pourrez constater qu'elle passe parfaitement au validateur.
Quand tu mets <html5:nav>blabla</html5:nav> dans ton code, c'est interprété comment par Firefox ? Il fait fi des html5: et reconnait le nav ? Ou alors il faut deux fichier .html distincts (un pour chaque navigateur, mais je n'ose y croire tellement ce serait encore plus rébarbatif !)
Perso, je teste un peu HTML5 et je dois dire que la solution javascript est certes peu élégante mais fonctionne sans se "faire de noeud au cerveau", si je puis dire