it-swarm.com.de

HTML & CSS - Platzieren Sie das <link> -Tag außerhalb des <Heads>

Ist es in Ordnung, den <link> in eine css-Datei aus dem <head/>-Tag zu setzen, beispielsweise in der Fußzeile?

Welches sind schlechte und gute Ergebnisse?

Ich frage das, weil ich eigentlich eine CSS-Datei habe, die nichts formatiert, sondern nur ein paar CSS3-Animationen auf meiner Website bringt.

vielen Dank

23
itsme

Stylesheets werden in <head> verknüpft, sodass der Browser den HTML-Code formatieren und während der Wiedergabe rendern kann. Wenn Sie die Stilinformationen am unteren Rand des Dokuments platzieren, muss der Browser das gesamte Dokument neu formatieren und das gesamte Dokument erneut von oben darstellen.

Das dauert erstens länger und sieht zweitens wirklich hässlich aus.

Dies unterscheidet sich von den enthaltenen Skripts, da das Laden von Skripts bis zum Abschluss blockiert wird, sodass Sie sie so spät wie möglich in den Prozess laden.

21
user1864610

Gemäß den W3-Spezifikationen sollen <link>-Tags nur in den <head>-Abschnitt gehen:

Verweise

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

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

Validierungsprobleme: Aktualisiert am 27. Oktober 2017

Wenn Sie im Jahr 2013 ein link-Tag in die body des HTML-Dokuments einfügen, wird die Verwendung von validate.w3.org mit auf HTML 4.01 basierenden Regeln nicht überprüft.

(Sie können HTML 4.01 gegen HTML 5.0-Validierung unter https://validator.nu testen.)

Beim ersten Lesen scheint das HTML 5.0-Spezifikationsdokument zu implizieren, dass link nur im head-Element des Dokuments angezeigt wird. Wenn Sie jedoch mithilfe eines HTML 5.0-Validators validieren, werden die Dokumente auch dann angezeigt, wenn Sie eine link im Flow-Inhalt haben.

Die beste Erklärung für diese Diskrepanz kann folgende sein. 

Wenn Sie die MDN-Dokumentation für den Eintrag link lesen ( MDN-Link-Eintrag) , sehen Sie, dass das link-Element ein itemprop-Attribut enthält, sodass die link im Fluss- und Ausdrucksinhalt, also in der body, erscheinen kann.

Dies kann der Grund dafür sein, dass HTML 5.0-Validatoren keine Warnung ausgeben, auch wenn das Attribut itemprop nicht vorhanden ist.

Die Variable itemprop ist Teil der Mikrodatenspezifikation und ist relativ neu ( Lesen Sie über HTML-Mikrodaten) und es lohnt sich zu lesen.

Im Moment könnte man eine link zu einem Stylesheet innerhalb der body hinzufügen, aber es ist nicht klar, welche Vorteile dies hat.

16
Marc Audet

Dies ist eine alte Diskussion, aber ich denke, es ist erwähnenswert, dass Google Pagespeed Insights jetzt (2017) empfiehlt, das Laden großer CSS-Dateien bis unterhalb der fold zu verschieben, um sicherzustellen, dass sie das Laden von HTML nicht blockieren.

3
daamsie

Ja / Es ist in Ordnung mit HTML5-Spezifikationen, ein Link-Element in das Body-Element einzufügen. Ob es sich um eine schlechte oder gute Idee handelt, hängt davon ab, was Ihre Verknüpfung ist. Wenn es nicht entscheidend ist, die erste Ansicht Ihrer Website zu rendern, würde ich es für eine gute Idee halten, sie so spät wie möglich zu laden.

1

WHATWG HTML Standard erlaubt <link> im Text in ziemlich vielen bestimmten Fällen .

In Bezug auf die "Vernunft" der Platzierung von <link> vor dem </body> habe ich kürzlich große Bilder in der Galerie vorab geladen:

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

Wenn Benutzer auf die Miniaturansicht geklickt haben, musste normalerweise nicht auf die Serverantwort gewartet werden, da das Bild bereits in den Browser-Cache geladen wurde.

Wie alles in der Softwareentwicklung ändern sich die Dinge. Jetzt gilt es als bewährte CSS-Methode im Körper.

<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>

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

0

Sie müssen <!DOCTYPE html> Vor alle <link> Tags setzen. Erfahrungsgemäß kann es bei einigen Seiten zu Fehlfunktionen kommen.

0
Nathan