I am developing an chat application. The message display is all html, so html tags work for text formatting. I would like it if tags like <red></red> etc. would change the text color. Is there anyway to define new tags like that, or will I just have to replace the fake tags with actual html?
-
well you can use custom css selectors red { color: rgb(255,0,0); }Risto Novik– Risto Novik2012-01-04 19:26:16 +00:00Commented Jan 4, 2012 at 19:26
-
stackoverflow.com/questions/6854757/…lucemia– lucemia2012-01-04 19:26:55 +00:00Commented Jan 4, 2012 at 19:26
Add a comment
|
3 Answers
In all modern browsers you can use your own tags in a literal sense (however note that its not valid HTML/XHTML markup):
<red>some red text</red>
Then in CSS:
red { color: red; }
However in IE8 and below you will need to use some JavaScript to allow Internet Explorer to style 'made-up' tags (in the same way that you active the new HTML5 tags such as article, section, etc.
document.createElement('red');
Here is a JSFiddle illustrating the above.
3 Comments
Nathan Tornquist
So if I define document.createElement('red') then I can use the css red { color: red; } and <red> Text </red> and it will work?
Nathan Tornquist
I can't get that to work in my application. I am loading an included webPage. I did the document thing, and declared the css stuff. Any idea what's missing?
isNaN1247
Ensure the that
document.createElement('red') is in the <head> element of the parent (containing) HTML page.No, it's safer to stick to <span class="red"></span>. This is HTML not XML/XLST.
answered Jan 4, 2012 at 19:23
Diodeus - James MacFarlane
115k33 gold badges164 silver badges180 bronze badges
Comments
You could use LessCSS which is basically kind of "pre-processor" for CSS. There is also a .NET version.
The preprocessor understands simple variables, built-in functions and similar helper constructs that saves you from writing repetitive code.
An example is:
@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}
