Having stylesheet <link> in <body>?
Is it a bad idea to link CSS files inside the body?
I've read that the browser is forced to start CSS rendering over again if it finds another CSS file outside of head, just because it might need to apply styles to elements it's already rendered. Also I don't think the HTML will validate properly (I need to confirm this).
Are there any other reasons开发者_StackOverflow社区?
The questions have been answered (is it bad, why...) but the correct way to achive that if you can't add your links (or scripts) in the header, is to dynamically insert them with javascript. It's also sometime a good idea for improving the speed of your code. For the links you can use this function:
function loadCss(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}You should use a JavaScript file loader like require.js for the scripts.
The only reason I've seen people use to justify doing this is when they're using certain templating engines, and they can't arbitrarily change the stylesheets linked in the head when loading new content or a particular view (in the case of MVC frameworks).
Either way, this should be avoided at all costs as it's sloppy, and improper. Instead, always develop your projects in such a way that you can get an arbitrary stylesheet into the head at any time. I generally do this by cycling through a stylesheet array in the head. That way, if I need to add a new stylesheet, I simply add its pathname to the array to be printed in the head.
<?php
$styles = array();
$styles[] = "css/main.css";
$styles[] = "css/text.css";
?>
<head>
<?php foreach ($styles as $style) { ?>
<link href="<?php print $style; ?>" rel="stylesheet" type="text/css" />
<?php } ?>
</head>
The HTML standard (at least HTML 4 that I looked at) mandates that the <link> tag must be in the <head>. There is no telling what browsers will do with a <link> in the <body>. If I were building a browser I'd probably ignore it.
And why on earth would you even want this?
Having a link element with the stylesheet link type in the body is allowed in
- the current version of WHATWG’s HTML (2016-07-28), see
link: allowed in the body/body-ok - the current draft of W3C’s HTML 5.2 (2016-07-04), see
link: allowed in the body/body-ok
and not allowed in
- W3C’s HTML5 (Recommendation from 2014), see
link - the current Candidate Recommendation of W3C’s HTML 5.1 (2016-06-21), see
link
You either link to external stylesheet or write it directly, both in head, it won't work if you'll try differently.
I use JQuery UI, but only in Member's Area zone, where lot of interactivity is happening.
In my static pages, no JQuery UI is used, therefore this link went to body, after <?PHP include "header.php" ?>:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/south-street/jquery-ui.css" />
I'll restrain from saying it is OK, but I can confirm that I've not seen anything rendered wrong by any of modern browsers so far.
加载中,请稍侯......
精彩评论