HTML & CSS - put tag outside of the [duplicate]

问题

Is it ok to put the <link> to a css file out of the <head/> tag, for example in the footer side?

Which are bad and good results of this?

I ask this, cause actually i have a css file which doesn't styles anything but brings just some css3 animations to my website, so i would like to put it to the end of the html just for performance reason...

thanks

回答1:

Style sheets are linked in the <head> so that the browser can style the HTML and render it as it goes. If you put the style information at the bottom of the document the browser will have to restyle and render the whole document from the top again.

This firstly, takes longer, and secondly, looks really ugly.

This differs from included scripts as scripts will block loading until they are done, so you load them as late as possible in the process.

回答2:

According to the W3 specs, <link> tags are only supposed to go in the <head> section:

References

For HTML 4.01: http://www.w3.org/TR/html401/struct/links.html#edef-LINK

For HTML5: http://www.w3.org/TR/html5/document-metadata.html#the-link-element

Validation Issues: Updated October 27, 2017

Back in 2013, if you put a link tag within the body of the HTML document, it would not validate using validate.w3.org with rules based on HTML 4.01.

(You can try out HTML 4.01 versus HTML 5.0 validation at https://validator.nu)

On a first reading, the HTML 5.0 specification document seems to imply that link's should appear only in the head element of the document. However, if you validate using a HTML 5.0 validator, then the documents appears okay even if you have a link in the flow content.

The best explanation for this discrepancy may be as follows.

If you read the MDN documentation for the link entry (MDN Link entry), you see that if the link element has an itemprop attribute, then the link can appear in flow and phrasing content, thus, in the body.

This may be the reason why HTML 5.0 validators do not issue a warning even if the itemprop attribute is not present.

The itemprop is part of the microdata specification and is relatively new (read about HTML Microdata) and it is worth reading.

For the moment, one could add a link to a stylesheet within the body, but it is not clear what the advantages are.

回答3:

This is an old discussion, but I think it's worth noting in here that Google Pagespeed Insights actually now (2017) recommends deferring the loading of large CSS files until below the fold to ensure they don't block loading of html.

回答4:

Yes, it's okay with HTML5 specifications to put a link element inside the body element. If it's a bad or good idea depends on what your linking. If it's not crucial to render the first view of your site then I'd consider it a good idea to load it as late as possible.

回答5:

WHATWG HTML Standard allows <link> in the body in quite many specified cases.

As for "reasonableness" of placing <link> before the </body>, recently I've used it for preloading some big images in gallery:

<link rel="preload" href="images/big/01.jpg" as="image">

So when user clicked on the thumbnail usually there was no need to wait for server response because image was already loaded into browser cache.

回答6:

As everything in software development, things change. Now it's considered good practice CSS in the body, something like:

<head>
</head>
<body>
  <!-- HTTP/2 push this resource, or inline it, whichever's faster -->
  <link rel="stylesheet" href="/site-header.css">
  <header>…</header>

  <link rel="stylesheet" href="/article.css">
  <main>…</main>

  <link rel="stylesheet" href="/comment.css">
  <section class="comments">…</section>

  <link rel="stylesheet" href="/about-me.css">
  <section class="about-me">…</section>

  <link rel="stylesheet" href="/site-footer.css">
  <footer>…</footer>
</body>

Source: https://jakearchibald.com/2016/link-in-body/