In Favor of Using Style Elements / Embedded Style Sheets / Style Blocks / Style Tags or Whatever You Want To Call Them inside the HTML / XHTML Body.
I’ve been using Style Elements within the HTML Body tag to work around some of the design flaws presented in ASP.NET 2.0 Themes – see the second solution in this post for more details. I’ve been leary of using this method because it’s not a best practice, since it compromises the validity of the HTML / XHTML document. I decided to do a little more research on this subject and made the following discoveries.
Discoveries:
- Some of the more complex web sites (Amazon and Yahoo!) make use of Style Elements within the Body Element – see the source snippets below.
- Gecko (Firefox, Flock, Mozilla, etc…) based browsers automatically move Style Elements found within the Body Element into the Head Element and render the page as expected – see the rendered Document Object Model (DOM) image below.
- Internet Explorer doesn’t move the Style Element into the Head Element, but renders the page as expected.
- Opera… well I wish I knew what Opera did, but the page renders as expected.
Source snippet from Amazon:
</table>
   </td>
 </tr>
</table>Â
<style type=”text/css”>
.lol-hr-center { margin: 5px; border-top-width: 1px;
/* and so on… */
}
</style>
<div id=”listoflists_data” style=”display:none”>
Note how the Style element is located between the <table> and <div> tags.
Source snippet from Yahoo!:
<h4>
<a id=”paweather” class=”details” href=”r/wb/*-http://weather.yahoo.com/forecast/USKS0448_f.html”><span class=”icon”>Weather <b><strong>51°</strong>F</b></span></a>
<style type=”text/css”>#patabs #weather .icon{background:url(http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/26.gif) 3px 2pxno-repeat;}</style>
</h4>
Note how the Style element is located within the <h4> tag.
A snapshot of the Document Object Model (DOM) as seen through Firebug:
Note the highlighted area references the Yahoo! source snippet from above.Â
Conclusion: Although the Style Element within the Body Element compromises the validity of a document, some of the leaders in web design and accessibility use this approach, so it may not be as big a work around or hack.
