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?
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>
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