Will style css tag render in body?

StackOverflow https://stackoverflow.com/questions/11596486

Question

I am using a CMS and apparently it has a bug that will not allow me to add any content to the <head> of a blog post. It inserts everything into the body which in most cases that works okay but in an instance of code like this: 

<style type="text/css">
 .slideshow img { display: none }
 .slideshow img.first { display: block }
</style>

Will that type of code run if put inside the <body> tag in all major browsers? (IE8+, Firefox, Chrome, and Safari.) Normally that is always in the <head> of the page.

Note: This appears to work in FF 15 but I am not sure of other browsers.

Was it helpful?

Solution

Having style tags in the body is invalid code.

Every browser will try to use the invalid code in a way that makes sense. Some browsers seem to use the style rules anyway, but you can't rely on that being the behaviour of all current and future browsers. Another behaviour that would also make perfect sense would be to ignore the invalid style tag.

Note that even within the same browser the behaviour can differ depending on whether the page is rendered in standards compliance mode or quirks mode. In standards compliance mode (which is the preferred one) browsers tend to be more strict and ignore invalid code rather than try to guess what the author intended with the code.

Update 2014:

In HTML5 you can use style tags in the body element. In any older browsers that are not aware of HTML5, or if you don't have a HTML5 doctype, it's still invalid code.

OTHER TIPS

Javascript is another idea, as <script> elements may appear in the body. Of course, this depends on the user allowing Javascript.

I don't see another alternative (apart from, of course, style attributes everywhere).

Or just use it in the body, even though that makes @Cole shout? When the script element was introduced as a placeholder in HTML 3.2, the spec said that "User agents should hide the contents of these elements." So there is at least some hope that all browsers will hide it (even if they don't interpret is as style).

If you can modify the CSS files loaded by the CMS (ie theme-type stylesheets), then put that code at the bottom of the CSS file and use a comment to denote custom styling (for your future reference), or use a CSS Import Rule to piggyback your CSS with the theme.

Yes, browsers recognize and apply a style element even when inside body. They even apply it “backwards”, i.e. you can style elements that appear before the style element.

It’s easy to check this out, but more difficult to predict the future. You are not alone with this (it’s fairly common to have such a limitation—not really a bug but intentional restriction—in a CMS), and there is a lot of web content that has had to use such a feature. Therefore it is unlikely that browsers will stop supporting it, though they might get the idea of rejecting it in “standards mode” some day.

The HTML5 drafts currently do not propose to standardize this. Instead, they have the idea of allowing style in body but only when the scoped attribute is used, with the meaning that the effect of the style element is restricted to the enclosing block. This is odd but it is not really incompatible with the practice that a style element without a scoped attribute has global effect in body.

Of course, you should not use this feature if there is a reasonable way of doing things otherwise.

The answer is that no it shouldn't be rendered in any of the main browsers.

As several comments have pointed out, you shouldn't do it; you will be breaking the standards, which means that the result is undefined -- ie it should work, but you can't ever be certain.

I appreciate that in some cases (ie when working with a poorly-designed CMS) it might be the only option available, but it is a bad thing to do generally.

If you really need to do it, and you're worried about it, one solution would be to put the contents into HTML comments:

<style type="text/css">
<!--
 .slideshow img { display: none }
 .slideshow img.first { display: block }
-->
</style>

That should block it from being seen even by browsers that don't like having <style> in the body.

Another option is to put it into an external stylesheet file, and include it using a <style> tag. This should still work, but since the element won't have any direct contents, it won't have anything for a badly behaved browser to display.

Hope that helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top