When and How Do Browsers Render <Style> Tag in <Body>

When and how do browsers render style tag in body ?

TL;DR:

In short, the answer to your question is: once a <style> tag is met inside <body> everything stops and the CSSOM is being rebuilt and re-applied to all existing rendered (painted) content.

Placing <style> tags inside <body> is considered bad practice because it can create FOUC. But if your <style> tag only contains rules for elements placed after it in DOM, placing it in body is perfectly fine, as no FOUC can happen.

The render process of a page is quite complex. But, overly-simplified, here's what happens

<head> is read and CSSOM is built. All CSS is render blocking, unless explicitly specified otherwise by use of @media queries. The non-blocking CSS is still loaded, it's not entirely skipped.
DOM building and CSSOM building are ran in paralel, but all <script> execution is deferred until CSSOM has been built (on </head> tag met), at which point all loaded <script>s are ran, blocking DOM building. JS can make changes to CSSOM at this point. *
Placing <style> tags inside <body> interrupts everything (JS execution and DOM building), CSSOM is being updated and applied to the already rendered content, if any. Everything is resumed after.

* On further testing it appears <head> parsing is single threaded. CSSOM building does block javascript execution but it's done is stages, as each <link /> and <style> tags are met (a <script> placed after a <link> will only execute after the <link /> was resolved and applied to CSSOM). <script> tags placed in between CSS resources are not deferred until all CSS resources in <head> are parsed, as I initially thought.

And, of course js can make changes to CSSOM at run time. See this question I asked for more on how js execution is blocked by CSSOM building.

All the above apply to the normal loading, without considering async, which adds a whole new layer of complexity to it.

If you're interested in more details, I recommend going through the Performance chapter of Web Fundamentals, provided by Google.

Will style css tag render in body?

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.

Will style css tag render in body?

Having style tags in the body is invalid 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.

Is style inside body supported by the majority of browsers

Yes, it is supported.
However it is a best practice to not to use directly inside of the HTML tags, use CSS files instead:

https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps

If you have a lot of similar elements, where you want to use the same styles, you should use a separate CSS files and use class/id tags inside of your HTML, and call it in the HTML file.

Check out some advice from mozilla development:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing

How do browsers read and interpret CSS?

If you've worked with a slow connection anytime recently, you'll find that CSS will be applied to elements as they (slowly) appear, actually reflowing page content as the DOM structure loads. Since CSS is not a programming language, it doesn't rely on objects being available at a given time to be parsed properly (JavaScript), and the browser is able to simply re-assess the structure of the page as it retrieves more HTML by applying styles to new elements.

Perhaps this is why, even today, the bottleneck of Mobile Safari isn't the 3G connection at all times, but it is the page rendering.

style and script tags in HTML body... why not?

Although the specs explicitly state style tags are not permitted in the body tag, specs aren't all that matters. Style tags are supported in the body by every major browser, and that's ultimately how users see your site.* While there has long been a drive for better standards and standards support in the browser industry, there's also long been a general push to render broken documents as well as can be.

Google, who leads the HTML5 spec effort, simultaneously maintains google.com which violates specs to save bytes, by leaving the quotes out of its attribute values, using selector hacks against the CSS spec, including script tags with no type or language, and link tags with no type. A purist could argue one of the most used sites on the internet is violating the specs and in serious danger of being horribly misrendered. Or, we can reason that no browser will enter popular use that can't render such widely used hacks on the spec.

So, the question is more of which way the browser industry is going - which again is one of both better specs, but also doing their best to honor the intent of pages that violate those specs. My bet is style tags will keep working in the body for a long time to come.

*As of this writing, style tags in the body are supported with an HTML5 doctype in Firefox 3+, IE6+, Safari 2+, Chrome 12+. Support likely goes back farther but those browsers are rarely seen on the interwebs.

Does STYLE have to be in the HEAD of an HTML document?

style is supposed to be included only on the head of the document.

Besides the validation point, one caveat that might interest you when using style on the body is the flash of unstyled content. The browser would get elements that would be styled after they are displayed, making them shift on size/shape/font and/or flicker. It is generally a sign of bad craftsmanship. Generally you can get away with putting style anywhere you want, but try to avoid it whenever it is possible.

HTML 5 introduced a scoped attribute that allowed style tags to be included everywhere in the body, but then they removed it again.

When do browsers start to render partially transmitted HTML?

--- Post-clarification Answer ---

My original answer should be useful to someone (I hope), but it isn't a direct response to the question, so I'll post another answer

The answer to your restated question is "no". In the case of FF, there is a predefined initial render delay, but other browsers will be different. That FF render delay can be tweaked as well.

Using FF as an example, those initial 250ms are time for FF to find out at least some useful information before attempting the first render. It then does additional renders periodically as it learns more.

There is no way for you to determine when the browser has started to render the HTML document.

--- Original Answer ---

To directly answer your question, I believe Firefox waits 250ms before acting on the first data received, but that can be changed. For other browsers, I don't know.

However, you don't want to go that route.

When jQuery is ready to work its magic, it'll let you know by firing $(document).ready(). Before then, any attempt to use jQuery will fail. In other words, your spinner isn't showing up because jQuery isn't ready to process that request yet.

Consider the following example, where two placeholders are shown on-screen, and we'll use jQuery to hide them.

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <script>

            // We're not ready yet.  This will fail.
            $(".placeholder").hide();

            $(document).ready(function(){
                // This won't fail
                $("#one").hide();
            });

        </script>
    </head>
    <body>
        <div id="one" class="placeholder">Placeholder One</div>
        <div id="two" class="placeholder">Placeholder Two</div>
    </body>
</html>

It may appear at first that $("#one").hide(); is redundant, but that's not true. $(".placeholder").hide(); is called before jQuery is ready, so it has no effect, which is why you'll see "Placeholder Two" displayed (and not "Placeholder One") if you run the markup above in a web browser.

Now that we have that out of the way, the solution to the larger problem (the "right way") is AJAX.

Load a base page that contains the spinner code. Make sure the code to load the spinner runs as part of $(document).ready().
Use jQuery's AJAX functionality to get the report you want.
When it comes back, hide the spinner, inject the report into your base page.

Good luck!

Is body of a document right place for CSS?

Even though most (if not all) browsers allow the style element as a descendant of body, it is invalid HTML.

The style element is "Metadata content": http://www.w3.org/TR/html5/document-metadata.html#the-style-element

The body element should contain only "Flow content": http://www.w3.org/TR/html5/sections.html#the-body-element

When and How Do Browsers Render <Style> Tag in <Body>