HTML5 sans Javascript pour Internet Explorer, c'est possible

HTML5 sans Javascript pour Internet Explorer, c'est possible (le 09/02/2011)

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" dans html, 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.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1360

7 commentaires

Posté par Alf le 09/02/2011 à 19:08:05
C'est un peu le b*****, quand même (pour rester poli)

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 (clin d’oeil)
Posté par Nico le 10/02/2011 à 7:43:06
Bien sûr que les autres navigateurs reconnaissent ces balises... tu te doutes bien que je n'aurais pas fait de source multiple pour mon site. (sourire)
Posté par Alf le 10/02/2011 à 19:45:36
Dans ce cas, c'est plutôt pas mal...mais assez contraignant, je trouve...
Surtout que si je comprends bien, même si le site est servi en application/xhtml+xml (d'ailleurs, quelle est la différence avec text/html ?), le validateur W3C a quand même un problème.

Vivement qu'HTML5 soit stable et enfin utilisable en production ! (Et je ne parle pas de CSS3 !)
Posté par Nico le 21/02/2011 à 22:11:48
Servir un site en application/xhtml+xml implique que ce site soit obligatoirement valide... sinon, les navigateurs supportant ce mode afficheront une erreur XML (cela permet aussi d'utiliser des fonctionnalités XML particulières).

Autrement dit, c'est une grosse contrainte pour un site, que je peux gérer plutôt aisément, mais que je ne proposerais jamais à un client.
Posté par Christophe le 03/07/2011 à 20:10:18
C'est peut être idiot mais si on utilise les balises html5 uniquement pour des questions structurelles et qu'on garde les vieilles balises pour la pour la mise en forme, le seul risque sera d'avoir une page mal structurée pour de vieux navigateurs.

Ca donnerait <div style="facilement compréhensible"><nav>le menu</nav></div>

Qu'en pensez-vous ?
Posté par Nico le 05/07/2011 à 11:53:49
Christophe : même si j'ai déjà entendu parler de cette façon de faire, je suis moyennement convaincu : déjà ça surcharge un peu le code (divite), et c'est au final "faire bien compliqué pour IE". Comme ce dernier me fait déjà assez souffrir, je ne ne veux pas fournir plus d'efforts. (sourire)

Je préfère partir de l'idée que je passe totalement à HTML5 ou non, j'ai d'ailleurs laissé tomber la méthode explicitée ci-dessus, trop contraignante.
Posté par intégrateur web le 27/03/2013 à 19:54:46
Merci pour cette astuce. J'utilise personnellement un javascript pour déclarer mes nouvelles balises html5 sous internet explorer. Cela dit j'ai de nouveaux des soucis avec ie7 et ie8 depuis que j'utilise le framework less !

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.