All geek questions in one place

Will there be a CSS rendering style in the body?

I use CMS and apparently it has an error that will not allow me to add any content to the <head> blog post. It inserts everything into the body, which in most cases works fine, but in the case of code like this:

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

Will this type of code be executed if it is placed inside the <body> in all major browsers? (IE8 +, Firefox, Chrome, and Safari). Usually this is always in the <head> page.

Note. This works in FF 15, but I'm not sure about other browsers.

+6
source share
5 answers

The presence of style tags in the body is the wrong code.

Each browser will try to use invalid code in a way that makes sense. Some browsers seem to still use style rules anyway, but you cannot rely on the behavior of all current and future browsers. Another behavior that would also make sense is to ignore the wrong style tag.

Please note that even within the same browser, the behavior may vary depending on whether the page is displayed in compliance mode or quirks mode. In standards compliance mode (which is preferred), browsers are generally more restrictive and ignore the wrong code, rather than trying to guess what the author intended with the code.

Update 2014:

In HTML5, you can use style tags in the body element. In any old browsers that don’t know HTML5, or if you don’t have an HTML5 document, it is still invalid code.

+10
source

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

I do not see any other alternative (except, of course, style attributes).

Or just use it in the body even though it screams @Cole? When the script element was introduced as a placeholder in HTML 3.2 , the specification said that "user agents should hide the contents of these elements." Thus, there is at least some hope that all browsers will hide it (even if they are not interpreted as a style).

+3
source

If you can modify the CSS files loaded by CMS (for example, theme-style stylesheets), then put this code at the bottom of the CSS file and use a comment to indicate a custom style (for your future reference) or use a CSS Import Rule to link your CSS with a theme.

+2
source

Yes, browsers recognize and apply the style element, even if inside the body . They even apply it "backward", i.e. You can style the elements that appear before the style element.

It is easy to verify, but harder to predict the future. You are not alone with this (its quite common to have such a restriction - in fact, this is not an error, but an intentional restriction - in the CMS), and there is a lot of web content that should use such a function. Therefore, it is unlikely that browsers will cease to support it, although some day there may be ideas to reject it in "standard mode".

HTML5 projects currently do not propose standardizing this. Instead, they have an idea to enable style in the body , but only when the scoped attribute is scoped , with the value that the effect of the style element is limited to the bounding box. This is strange, but in practice it is not completely incompatible with the fact that the style element without the scoped attribute has a global effect in the body .

Of course, you should not use this function if there is a reasonable way to do something otherwise.

+2
source

The answer is that it should not be displayed in any of the main browsers.

As noted by a few comments, you should not do this; you violate the standards, which means that the result is undefined - that is, it should work, but you cannot be sure.

I understand that in some cases (i.e. when working with a poorly developed CMS), it may be the only option available, but in general it is bad.

If you really need to do this and you are worried about it, one solution would be to put the content in the HTML comments:

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

This should block it from being viewed even by browsers that don’t like having a <style> in the body.

Another option is to put it in an external stylesheet file and include it using the <style> . This should still work, but since the element will not have direct content, it will not have anything to display a poorly displayed browser.

Hope this helps.

0
source

Source: https://habr.com/ru/post/921048/

More articles:


All Articles