Le HTML & CSS - mettre <lien> tag à l'extérieur de la <head>

Est-il correct de mettre le <link> à un fichier css de la <head/> balise, par exemple dans le pied de page?

Qui sont mauvais et les bons résultats de cette?

Je demande cela, parce qu'en fait j'ai un fichier css qui n'a pas de styles de rien mais apporte quelques animations css3 pour mon site, donc je voudrais le mettre à la fin de l'html, juste pour des raisons de performances...

grâce

veuillez qui est de la formation -1 ici ? 😀 pfff même vieille histoire ?
Double Possible de T <STYLE> dans la <HEAD> d'un document HTML?

OriginalL'auteur itsme | 2013-08-22

  1. 21

    Les feuilles de Style sont liés dans les <head> afin que le navigateur puisse le style du HTML et de le rendre comme il va. Si vous mettez les informations de style au bas de ce document, le navigateur aura de relooker et de rendre l'ensemble de votre document par le haut à nouveau.

    Cette premièrement, prend plus de temps, et d'autre part, semble vraiment laid.

    Ce qui diffère de l'compris les scripts les scripts vont bloquer le chargement jusqu'à ce qu'ils sont fait, vous vous en chargez le plus tard possible dans le processus.

    pouvez vous s'il vous plaît vérifier ma question à jour, vous pouvez également spécifier pourquoi cela prend "plus" ?
    Si un navigateur n'a plus à attendre jusqu'à ce qu'il atteigne la fin d'un document avant de pouvoir l'appliquer à n'importe quel style de l'information, il sera probablement le rendu de la page deux fois - par conséquent il est plus lent. Dans votre cas particulier, maintenant vous explique plus clairement, il n'y a probablement pas de pénalité sur les performances, mais si le CSS est relativement petite, il n'y a probablement pas de gain de performance.

    OriginalL'auteur

  2. 16

    Selon le W3 spécifications, <link> balises ne sont censé aller dans le <head> section:

    Références

    Pour HTML 4.01: http://www.w3.org/TR/html401/struct/links.html#edef-LINK

    De HTML5: http://www.w3.org/TR/html5/document-metadata.html#the-link-element

    Les Questions De Validation: Mise À Jour Du 27 Octobre 2017

    De retour en 2013, si vous mettez un link balise à l'intérieur de la body du document HTML, il ne serait pas valider à l'aide de validate.w3.org avec des règles basées sur HTML 4.01.

    (Vous pouvez essayer HTML 4.01 rapport HTML 5.0 validation à https://validator.nu)

    En première lecture, le HTML 5.0 document de spécification semble impliquer que link's ne devrait figurer que dans la head élément du document. Toutefois, si vous validez à l'aide d'un validateur HTML 5.0, les documents semble correct, même si vous avez un link dans le flux de contenu.

    La meilleure explication de cette divergence peut être comme suit.

    Si vous lisez le MDN documentation pour la link entrée (MDN Lien d'entrée), vous voyez que si l' link élément a une itemprop attribut, puis le link peuvent apparaître dans le flux et le phrasé de contenu, ainsi, dans le body.

    Cela peut être la raison pour laquelle le HTML 5.0 validateurs ne pas émettre un avertissement, même si la itemprop attribut n'est pas présent.

    La itemprop fait partie de la spécification de microdonnées et est relativement nouveau (lisez à propos de HTML Microdonnées) et il vaut la peine de lire.

    Pour le moment, on pourrait ajouter un link à une feuille de style à l'intérieur de la body, mais il n'est pas clair quels sont les avantages.

    ok, claire, donc ce sera trown une erreur type d'erreur de validation de droite?
    Qui utilise validate.w3.org. Bienvenue à 1995
    J'ai rarement valider HTML plus, j'ai juste assurez-vous d'ouvrir et de fermer les balises sont appariés. Après un certain temps, de la bonne et de la syntaxe appropriée devient une seconde nature.
    quel est le problème avec validate.w3.org? Parfois, il arrive que vous vous égarez certaines balises(surtout facile à faire avec des sites web dynamiques) et le validateur peut facilement ces problèmes. Les navigateurs modernes, pour la plupart, semblent être assez intelligent sur ces questions, mais il ne fait pas de mal d'avoir de la validité des HTML que possible 🙂
    Je ne vois pas les erreurs de validation pour l'utilisation de <link> à l'extérieur de <head>.

    OriginalL'auteur Marc Audet

  3. 3

    C'est un vieux débat, mais je pense qu'il est intéressant de noter ici que Google Pagespeed Insights fait maintenant (2017) recommande différer le chargement de gros fichiers CSS ci-dessous jusqu'à ce que le pli pour s'assurer qu'ils ne pas bloquer le chargement de code html.

    Eh bien, c'est en fait un pas bon recommandation - il ne peut pas bloquer chargement du HTML, mais il permettra d'éviter les un rendu précis de la page jusqu'à ce que le CSS est chargé et que @user1864610 souligné, il sera la cause de la page rendu lorsque le CSS est chargé d' - qui sera augmentation la perception du temps de chargement de page.
    La recommandation est aux commandes de la "CSS nécessaire pour les rendre au-dessus du pli de contenu".

    OriginalL'auteur daamsie

  4. 1

    Oui, c'est d'accord avec les spécifications HTML5 pour mettre un élément de lien à l'intérieur de l'élément de corps. Si c'est une bonne ou mauvaise idée dépend de ce que votre liaison. Si ce n'est pas crucial pour le rendu de la première vue de votre site, alors je voudrais examiner ce une bonne idée de charger le plus tard possible.

    Selon la Spécification HTML5, la Section 4.2.4, le linkélément fait partie de la méta-catégorie de Contenu, et peut être utilisé lorsque le contenu de métadonnées est prévu, et c'est dans le head élément. (Voir w3.org/TR/html5/document-metadata.html#the-link-element). Le body élément contient le flux de contenu et un link n'est pas considéré comme le flux de contenu en fonction de la spécification. Basé sur le comportement du navigateur, il peut être bien de mettre un link dans le body élément, mais c'est différent, indiquant que le cahier des charges le permet.
    Salut Jonas, j'ai fait quelques recherches basées sur votre commentaire et j'ai mis à jour ma réponse originale à cette question (à partir de 2013) afin de refléter la nouvelle manière de penser qui est en train de sortir de HTML 5.0, je vous remercie pour votre aide!
    Marc: Vous avez peut-être raison mais je ne vois pas la mention "Où le contenu de métadonnées est prévu." est défini nulle part. Si vous comparez les spec pour link avec meta par exemple, ils mentionnent explicitement que, dans certains cas meta ne peut être utilisé à l'intérieur de head.

    OriginalL'auteur Jonas Äppelgran

  5. 0

    WHATWG HTML Standard permet <link> dans le corps en beaucoup de cas spécifiés.

    Comme pour le "caractère raisonnable" de la passation de <link> avant la </body>, récemment, je l'ai utilisé pour le préchargement quelques grandes images dans la galerie:

    <link rel="preload" href="images/big/01.jpg" as="image">

    Donc quand l'utilisateur a cliqué sur la vignette habituellement, il n'était pas besoin d'attendre la réponse du serveur parce que l'image était déjà chargé dans la mémoire cache du navigateur.

    OriginalL'auteur Konstantin Smolyanin

  6. 0

    Comme tout dans le développement logiciel, les choses changent. Maintenant, il 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>

    Source: https://jakearchibald.com/2016/link-in-body/

    Je vais essayer de trouver d'autres exemples de cette utilisation. Il fait sens pour moi de le faire de cette façon avec HTTP/2, mais je n'ai pas trouver beaucoup de gens en parlent.

    OriginalL'auteur Johann Echavarria