HTML et CSS - placez la balise <link> en dehors de <head>
Est-il possible de placer le <link> dans un fichier CSS à partir de la balise <head/>, par exemple dans le bas de la page?
Quels sont les bons et les mauvais résultats?
Je pose la question suivante, car j’ai en fait un fichier css qui ne donne aucun style, mais n’apporte que quelques animations css3 sur mon site Web. Je voudrais donc le mettre à la fin du code html uniquement pour des raisons de performances ...
merci
Les feuilles de style sont liées dans le <head> afin que le navigateur puisse styler le code HTML et le restituer au fur et à mesure. Si vous placez les informations de style au bas du document, le navigateur devra modifier son style et restituer l’ensemble du document à partir du haut.
Premièrement, cela prend plus de temps et, deuxièmement, ça a l'air vraiment moche.
Cela diffère des scripts inclus car les scripts bloquent le chargement jusqu'à ce qu'ils soient terminés. Vous les chargez donc le plus tard possible dans le processus.
Selon les spécifications W3, les balises <link> sont uniquement supposées figurer dans la section <head>:
Références
Pour HTML 4.01:http://www.w3.org/TR/html401/struct/links.html#edef-LINK
Pour HTML5:http://www.w3.org/TR/html5/document-metadata.html#the-link-element
Problèmes de validation: mis à jour le 27 octobre 2017
En 2013, si vous plaçiez une balise link dans le body du document HTML, il ne serait pas validé à l'aide de validate.w3.org avec des règles basées sur HTML 4.01.
(Vous pouvez essayer la validation HTML 4.01 par rapport à la validation HTML 5.0 à l’adresse https://validator.nu )
Lors de la première lecture, le document de spécification HTML 5.0 semble impliquer que les link ne doivent apparaître que dans l'élément head du document. Toutefois, si vous validez à l'aide d'un validateur HTML 5.0, les documents semblent corrects même si vous avez un link dans le contenu du flux.
La meilleure explication de cet écart peut être la suivante.
Si vous lisez la documentation MDN pour l'entrée link ( entrée MDN Link) , vous verrez que si l'élément link a un attribut itemprop, alors link peut apparaître dans le contenu du flux et de la formulation, dans le body.
Cela peut être la raison pour laquelle les validateurs HTML 5.0 n'émettent pas d'avertissement même si l'attribut itemprop n'est pas présent.
itemprop fait partie de la spécification des microdonnées et est relativement nouveau ( à propos des microdonnées HTML) , et il vaut la peine de le lire.
Pour le moment, on pourrait ajouter un link à une feuille de style dans le body, mais les avantages ne sont pas clairs.
Ceci est une vieille discussion, mais je pense qu’il est utile de noter ici que Google Pagespeed Insights recommande actuellement (2017) de reporter le chargement de gros fichiers CSS jusqu’en dessous du pli pour s’assurer qu’ils ne bloquent pas le chargement de html.
Oui , les spécifications HTML5 permettent de placer un élément de lien dans l'élément body. Si c'est une bonne ou une mauvaise idée, cela dépend de ce que vous associez. S'il n'est pas crucial de rendre la première vue de votre site, il serait alors judicieux de le charger le plus tard possible.
WHATWG HTML Standard autorise <link> dans le corps de de nombreux cas spécifiés .
En ce qui concerne le "caractère raisonnable" de placer <link> avant le </body>, je l'ai récemment utilisé pour précharger certaines grandes images dans la galerie:
<link rel="preload" href="images/big/01.jpg" as="image">
Ainsi, lorsque l'utilisateur cliquait sur la vignette, il n'était généralement pas nécessaire d'attendre la réponse du serveur car l'image était déjà chargée dans le cache du navigateur.
Comme tout dans le développement logiciel, les choses changent. Maintenant, c'est considéré comme une bonne pratique CSS dans le corps, quelque chose comme:
<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>