les balises personnalisées ne fonctionnent pas dans ie8

Question

J'ai essayé de créer des balises personnalisées afin que les utilisateurs puissent saisir du texte qui s'affiche en rouge ou en gras, etc. lorsqu'il est rendu en HTML, par exemple,

<rb>text here becomes red and bold</rb> and goes to default here

le résultat est rendu dans un div avec la classe 'note' et j'ai mis en place le css suivant

.note rb
{
    color:Red;
    font-weight:bold;
}

Il fonctionne dans ie9, chrome, firefox mais ne fonctionne pas dans ie8. Comment puis-je le faire fonctionner dans ce cas ?

Answer 1

Si un peu de javascript ne vous dérange pas :

<!--[if lt IE 9]>
<script>
document.createElement("rb");
</script>
<![endif]-->

si vous voulez ajouter plusieurs éléments/balises, vous pouvez le faire :

<!--[if lt IE 9]>
<script>
// bold, italic, underlined, striked
els = ['rb', 'ri', 'ru', 'rs'];
for(i = 0; i < els.length; i++) {
    document.createElement(els[i]);
    }
</script>
<![endif]-->

Mise à jour

Il semble que la possibilité de définir des éléments personnalisés soit en cours de réalisation ( Projet de travail du W3C 6 juin 2013 )

Quelques projets qui l'utilisent :

• Le polymère de Google
• Les balises X de Mozilla
• La brique de Mozilla

Voir aussi :

• Présentation de Brick : Composants Web à marquage minimal pour un développement plus rapide des applications (27 août 2013)
• Éléments personnalisés : définition de nouveaux éléments en HTML (28 août 2013)
• Custom Elements : une galerie de composants web pour les applications web modernes

Answer 2

Pour satisfaire les navigateurs plus anciens (IE8 et plus anciens), j'opterais pour quelque chose du genre :

HTML :

<span class="RB">text here becomes red and bold</span> and goes to default here

CSS :

.RB {color:Red; font-weight:bold; }

Cela vise tous les RB classes. Il suffit donc de tout mettre à l'intérieur

<span class="RB"> </span>