I have a site where the designer applied CSS to the base <span> tag which makes the tag effectively useless for microdata markup unless I want all my text to be blue, bold, and 125% bigger than normal. Are there alternative tags that I can use? I understand that I can use <meta> but I actually want the content to appear and it seems overkill to have to write it twice.
Asked
Active
Viewed 297 times
0
-
What data do you want to present? Also, fire the designer ;) – BenM Dec 27 '13 at 21:42
-
steve's answer treats the cause of the problem. If you can't do that, you can use `` (class name optional) and undo all the styles applied to the base ``. This only treats a symptom, unfortunately. – Trojan Dec 27 '13 at 21:49
-
The good news is...the design firm has been fired! They also came back with CSS for a responsive design that defaulted to a ridiculous resolution never found in nature, which ensured hilarity with old IE, and then included every single attribute in every single media query, which made debugging a real treat. – Jay Dec 30 '13 at 14:30
2 Answers
0
Why not do a site-wide find and replace for existing tags and update replace with something like <span class="blueLargerTextWhyOhWhy"> (class name optional) and update the stylesheet to target that class rather than all spans.
Once done and tested you will be free to use generic tags as needed.
Also educate that designer if you can :)
steve
- 2,469
- 1
- 23
- 30
-
-
Agree - perhaps reverse the advice. Use tags but apply a class to the ones you're creating, then undo the default blue/larger styles before styling as you need to. Not ideal - but sometimes we all inherit a steaming pile of CSS... – steve Dec 27 '13 at 21:47
0
You can use every HTML5 element for Microdata. But note that some elements have special rules for determining the value, and some elements come with additional requirements if used with Microdata.
If your question is if there is another inline HTML5 element that has no meaning (= span): no, there isn’t.
If your question is how to use span without the applied CSS: add a class to "your" span elements and overwrite any applied CSS with CSS’s class selector:
<span class="never-style-span-directly" itemprop="example">…</span>
CSS:
span {color:blue;}
.never-style-span-directly {color:inherit;}
-
This feels so wrong but I don't see another practical way to do it. Thanks for the suggestion. – Jay Dec 30 '13 at 14:32