All geek questions in one place

Having a stylesheet <link> in <body>?

Good idea to link CSS files inside body?

I read that the browser is forced to start rendering CSS again if it finds another CSS file outside head, simply because it may need to apply styles to elements already completed. Also, I don't think HTML will be validated correctly (I need to confirm this).

Are there any other reasons?

+3
source share
6 answers

The only reason people use the excuse is because they use some template mechanisms, and they cannot arbitrarily change the stylesheets that are linked in the head when loading new content or a certain kind (in the case of MVC structures).

In any case, this should be avoided at all costs, as it is sloppy and not suitable. Instead, always design your projects so that you can get an arbitrary style sheet at any time. I usually do this by looping around the array of styles in my head. Thus, if I need to add a new stylesheet, I just add its path to the array that will 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>
+3
source

HTML ( , HTML 4, ) , <link> <head>, , <link> <body>. , , , .

?

+3

link stylesheet body

  • W3Cs HTML5 ( 2014 ), . link
  • W3Cs HTML 5.1 (2016-06-21), . link
+2

( , ...), , ( ) , javascript. . :

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}
Hide result

JavaScript, require.js.

+2

, , , , -.

0

I use JQuery UI, but only in the Member Area, where a lot of interactivity happens. My static pages do not use the jQuery user interface, so this link moved to the 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 will not say that everything is in order, but I can confirm that so far I have not seen anything bad in modern browsers.

0
source

Source: https://habr.com/ru/post/1724667/

More articles:


All Articles