Correct way to include CSS after

Question

Apparently adding <link rel="stylesheet" ... in the document body is considered a bad practice by W3C standards. The same for adding <style> blocks in the body...

So are there any standard-compliant solutions to add CSS outside of the <head> tag? Like at the end of the document.

Well there are some rare situations in which it's useful to include styles later. In my case, I have a nice debug function which outputs some info styled with CSS. I may call this function at any point, or not. But I don't want to include the CSS if it's not used. — Alex, May 19 '12 at 12:44
There's no harm in including CSS that won't *always* be used, as long as you know it *might* be used in certain situations. — BoltClock, May 19 '12 at 12:46
If it's just for debugging, you can embed the CSS in style attributes directly in the HTML. — Artefact2, May 19 '12 at 12:46

Madara's Ghost · Accepted Answer · 2014-07-11T09:01:05.987

If you only want to include your CSS styles on a specific events, there's nothing stopping you from doing so at the head:

var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = "path/to/file.css"; //Replace here

document.head.appendChild(linkElement);

This has the added benefit of adding your stylesheet in an async way, which doesn't block the browser from downloading anything else.

score 3 · Answer 2 · answered May 19 '12 at 12:46

3

One way to solve that issue is to load the CSS with .get() and, appending it to the head tag only when needed:

JQUERY

var css = "foobar.css";
var callback = function() {
  alert("CSS is now included");
  // your jquery plugin for a navigation menu or what ever...
};

$.get(css, function(data){
  $("<style type=\"text/css\">" + data + "</style>").appendTo(document.head);
  callback();
});

The callback function is useful to allow script code that depends on the CSS file to be properly formatted, to run only after the CSS as been added!

answered May 19 '12 at 12:46

Zuul

16,217
6
61
88

True on that! But how to load a `css` file when needed dynamically to the head to have the document responding properly? And programmers have been doing this for years with plain old `javascript` ;) Since my projects are PHP based, I solve this issue with server side scripting before anything gets to the browser, but in this case... – Zuul May 19 '12 at 13:01
See my answer. This can easily be done with plain JavaScript. I get a shorter code than you. – Madara's Ghost May 19 '12 at 13:06
@Truth: Also, you have a massive XSS hole here. if data is (for instance) set as ` – Madara's Ghost May 19 '12 at 13:07
@BoltClock: That was my test protection after reaching 15K :D – Madara's Ghost May 19 '12 at 13:08

score 2 · Answer 3 · answered May 19 '12 at 12:46

2

Only HTML5 allows it with the scoped attribute, but make sure you declare the DOCTYPE correctly.

<style type="text/css" scoped>
.textbox {
color: pink
}
</style>

answered May 19 '12 at 12:46

PenguinKenny

70
6

You mean that if I put `scoped` there I can use it anywhere? that's awesome :D – Alex May 19 '12 at 12:48
2

There is no browser support for this feature yet. Browsers simply ignore the `scoped` attribute and interpret the style sheet as global to the document. A `style` element inside body works actually well, it has just been declared invalid in HTML specifications. – Jukka K. Korpela May 19 '12 at 13:51
@JukkaK.Korpela: If I use my shovel to hammer a nail into a wall, it will also probably work. That doesn't make it OK. Being invalid, it only works because the browser works very hard to make it right. Don't make it work. – Madara's Ghost May 19 '12 at 15:03
2

@Truth, your comment adds nothing to the answer. Being invalid is a formal thing and vanishes in a puff of DTD. – Jukka K. Korpela May 19 '12 at 18:23
1

@JukkaK.Korpela: No, being invalid is not a formal thing. It has great implications on the way the browser interpret the HTML code. While in this case it may be harmless, it less fortunate cases you'll get extremely unexpected behavior. Avoid invalid HTML when possible. – Madara's Ghost May 19 '12 at 19:04

score 2 · Answer 4 · answered May 19 '12 at 14:57

I think this standard gets largely ignored by most once you start doing things like server side programming or DHTML.

For static HTML files, you definitely can/should follow the rule of only including CSS within the HEAD tag but for conditional output and interactivity it can sometimes simplify things to have conditional styling as well. Consider that in the end, this convolutes the resulting document. Even though browsers may render it just fine, if you yourself were to look at the source, it's just plain easier to read if all the styles defining the layout/display were within the HEAD. There are, of course, a number of other examples and reasons as to why it's bad practice.

The HTML standard exists apart from things like server side scripting and DHTML i.e. it's not the HTML/SSS/JavaScript standard.

score -3 · Answer 5 · edited Nov 25 '15 at 14:29

-3

If you are talking about an external css sheet, then the correct way is as follows:

<link href="....link to your style...." rel="stylesheet">

If you want to include an inline css, then you just need to do as follows:

<style>
 ....Your style here...
</style>

edited Nov 25 '15 at 14:29

andrewsi

10,807
132
35
51

answered Nov 25 '15 at 14:09

Karani GK.

49
4

There is NOTHING wrong with using the link/href approach, regardless of what the OP says – Dexygen Dec 27 '22 at 11:47

Correct way to include CSS after

5 Answers5

Linked