custom tags not working in ie8

Question

I tried making custom tags so that uses can enter text that displays something with red or bold etc when rendered as HTML for eg,

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

this gets rendered in a div with class 'note' and i have the following css set up

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

It works in ie9, chrome, firefox but doesnt work in ie8. How can I make it work there?

Answer 1

To please the senior browsers ( IE8 and older) I would just go with something like:

HTML:

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

CSS:

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

This targets all the RB classes. So you only need to wrap everything inside

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

Answer 2

if you don't mind a little javascript:

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

if you want to add several elements/tags, you can:

<!--[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]-->

Update

Looks like ability to define custom elements is in the work (W3C Working Draft 6 June 2013)

Some projects that use this:

• Google’s Polymer
• Mozilla’s X-Tags
• Mozilla’s Brick

See also:

• Introducing Brick: Minimal-markup Web Components for Faster App Development (Aug 27, 2013)
• Custom Elements: defining new elements in HTML (Aug 28, 2013)
• Custom Elements: a web components gallery for modern web apps