Clever Geek Handbook

How do I properly load the stylesheet inside the body?

I know I can just put the tag <link>

in the body and apparently it works, but I know this is not the "correct" html and I want to avoid problems with strict browsers like firefox that ignore every behavior a web designer expects unless specified in the official specification.

So is there an official way to load a stylesheet in the html body area?

+3


source to share


5 answers


You can add your css to the head dynamically like below:

jsCode:



var head = document.getElementsByTagName("head")[0],
    cssLink = document.createElement("link");

cssLink.href = "path/to/filenam.css";
cssLink.id="dynamic-css";
cssLink.media="screen";
cssLink.type="text/css";

head.appendChild(cssLink);
+10


source 


document.head.appendChild( linkElement );


... where linkElement

is your style reference. Nobody forces you to add material to the body, just add it to the head.

+8


source


StyleSheets cannot be placed inside the body element even in HTML5. Quoting from the W3C HTML5 Specification: Elementlink

:

If an attribute is used rel

, this element is restricted head

.

I suppose you can use the element style scoped

inside the body and the @import

outside StyleSheet. This example confirms:

<!DOCTYPE html>
<html>
<head>
    <title>CSS In Body Test</title>
    <style>
        p { background-color: #CCC; }
    </style>
</head>
<body>
    <p>Paragraph</p>
    <div>
        <style scoped>
            @import url("subset.css");
            /*
             * the above file contains the following line:
             * p { background-color: #F00; }
             */
        </style>
        <p>This paragraph should be red</p>
        <p>This paragraph should be red</p>
    </div>
    <p>Paragraph</p>
</body>
</html>

However, there are certain limitations:

  • The style sheet is limited to the parent style element and its descendants
  • A style element can only be placed as the first child of certain elements (see documentation).
  • Browser support is virtually nonexistent at the time of writing

You can use this approach if your requirements are consistent with the constraints. Otherwise, it would be more appropriate to use JavaScript based StyleSheet injection method.

+2


source


It is allowed to reference the stylesheet in the body

The stylesheet keyword can be used with link elements. This keyword creates an external resource reference that contributes to the styling processing model. This is the body-ok keyword.

https://html.spec.whatwg.org/multipage/semantics.html#body-ok https://www.w3.org/TR/html5/links.html#element-statedef-link-stylesheet

+2


source


In fact, in older versions of HTML, it was forbidden to place an element link

within an element body

and should only appear in the head section of an HTML document. There is a section from this link that states this

it can only appear in the HEAD section of the document

So, just load the stylesheet into the head element, there is no reason for you, or for anyone to write illegal documents that do not follow W3.org rules.

<head>
   <link rel="stylesheet" href="~/css/file.css" />
</head>

However, there is one more question that you might be interested in reading, and in what state you can add a link element to the body section. Read the answer here .

+1


source






More articles:


All Articles