Was ist der Unterschied, wenn ich eine CSS-Datei in <head> oder <body> ablege?

155

Normalerweise werden CSS-Dateien darin abgelegt <head></head>. Was macht es, wenn ich sie <body></body>darin ablege?

html css Shawn
quelle

Antworten:

116

Nur um das zu ergänzen, was jdelStrother über w3-Spezifikationen und ARTstudio über das Rendern von Browsern erwähnt hat.

Es wird empfohlen, da <body>Ihre Stile bereits geladen wurden, wenn Sie das CSS vor dem Start deklariert haben . So sehen Benutzer sehr schnell etwas auf ihrem Bildschirm (z. B. Hintergrundfarben). Wenn nicht, sehen Benutzer einige Zeit einen leeren Bildschirm, bevor das CSS den Benutzer erreicht.

Wenn Sie die Stile irgendwo in der Liste belassen <body>, muss der Browser die Seite (beim Laden neu und alt) neu rendern, wenn die deklarierten Stile analysiert wurden.

Mauris
quelle
10
Ja, natürlich ist es in HTML5 in Ordnung. Beim Rendern kann es jedoch langsamer sein, da der Browser die Seite wie erwähnt erneut rendert.
Mauris
4
Ja, kein Zweifel. Ich habe es gerade hier hinzugefügt, damit Leute, die gerade die akzeptierte Antwort gelesen haben, sie nicht verpassen. :)
Vilx
3
@Vilx das ist falsche Information! linkund styledürfen nicht im Body erscheinen, es sei denn, sie haben entweder einen Gültigkeitsbereich (Stil) oder das Attribut itemprop(Link) deklariert.
Christoph
2
@Christoph dies ist nicht wahr, styleist ein Flow-Element in HTML5 und HTML4.1 (auch wenn es keinen Gültigkeitsbereich hat) und kann in den Körper eingefügt werden.
Kpym
1
@Kpym Du bist 3 Jahre zu spät zur Party ;-) Aber du hast Recht, Stil ist jetzt ein Flow-Element und das scopedAttribut wurde veraltet.
Christoph
40

Die neuesten Versionen der HTML-Spezifikation erlauben jetzt das <style>Tag innerhalb von Body-Elementen. https://www.w3.org/TR/html5/dom.html#flow-content Auch das scopedAttribut, das früher Voraussetzung für ein styleTag in der war, bodyist jetzt veraltet.

Dies bedeutet, dass Sie das styleTag überall verwenden können. Die einzigen Auswirkungen sind eine verminderte Seitenleistung aufgrund möglicher Reflows / Repaints, sobald der Browser weiter unten im Seitenbaum auf Stile trifft.

Veraltete Antwort:

Das <style>Tag ist <body>gemäß den w3-Spezifikationen nicht zulässig . (Sie können natürlich <div style="color:red">bei Bedarf Inline-Stile anwenden, dies wird jedoch im Allgemeinen als schlechte Trennung von Stil und Inhalt angesehen.)

Jonathan del Strother
quelle
3
Dies ist nicht wahr, <style>ist ein Flow-Element in HTML 5 und 4.1 und kann (wie alle anderen Flow-Elemente) in den Body eingefügt werden.
Kpym
1
Meine +1 für die Aktualisierung Ihrer Antwort!
Benjamin
14

Wenn Sie CSS in den Body einfügen, wird es später geladen. Es ist eine Technik, mit der der Browser die Benutzeroberfläche schneller zeichnen kann (dh ein Blockierungsschritt wird entfernt). Dies ist wichtig für die Benutzererfahrung auf SmartPhones.

Ich gebe mein Bestes, um ein kleines CSS auf dem zu halten, <head>und ich bewege den Rest nach unten. Wenn eine Seite beispielsweise JQuery UI CSS verwendet, verschiebe ich sie immer am Ende von <body>, kurz vor den Links zu JQuery Javascript. Zumindest können alle Nicht-Jquery-Elemente bereits gezeichnet werden.

Jérôme Verstrynge
quelle
7

Kopf ist ausgelegt für (Zitieren des W3C):

"Informationen zum aktuellen Dokument, wie z. B. der Titel, Schlüsselwörter, die für Suchmaschinen nützlich sein können, und andere Daten, die nicht als Dokumentinhalt betrachtet werden "

Siehe die globale Struktur eines HTML-Dokuments . Da CSS kein Dokumentinhalt ist, sollte es im Kopf sein.

Auch jeder andere Webentwickler wird erwarten, dass es dort zu sehen ist. Verwirren Sie die Dinge also nicht, indem Sie es in den Körper legen, auch wenn es funktioniert!

Das einzige CSS, das Sie in den Body einfügen sollten, ist Inline-CSS , obwohl ich normalerweise Inline-Stile vermeide.

RichardOD
quelle
3
Ich folge vollkommen dem, was du sagst. Aber wie würden Sie mit der Situation umgehen, in der Sie viele Seiten haben, von denen einige Inhalte aus einer separaten Datei enthalten (in meinem Fall eine .NET Razor-Teilseite), und wann immer diese Datei enthalten ist, sollte auch ein bestimmtes Stylesheet verknüpft werden? Entweder Link in der Kopfzeile jeder Include-Seite oder Link im Hauptteil der Include-Seite. Ersteres entspricht "css in header", während letzteres "einmal schreiben" entspricht.
OutstandingBill
4

Die Standards ( HTML 4.01: das Stilelement ) legen klar fest, dass das Stil-Tag nur innerhalb des Kopf-Tags zulässig ist. Wenn Sie Style-Tags in das Body-Tag einfügen, versuchen die Browser, wenn möglich, das Beste daraus zu machen.

Es ist möglich, dass ein Browser ein Style-Tag im Body ignoriert, wenn Sie einen strengen Dokumenttyp angeben. Ich weiß nicht, ob ein aktueller Browser dies tut, aber ich würde nicht damit rechnen, dass alle zukünftigen Versionen so entspannt darüber sind, wo Sie das Stilelement platzieren.

Guffa
quelle
1
@Pacerier: In HTML5 sind styleTags im Body zulässig, wenn sie ein scopedAttribut haben.
Guffa
Meine
Güte
2
@ Pacerier: Das liegt daran, dass die Informationen in diesem Kommentar unvollständig sind. Sie können Stil-Tags im Body-Tag haben, aber nur, wenn sie ein Gültigkeitsbereichsattribut haben. Hier ist das Standard - Dokument des Stil - Tag festgelegt wird : dev.w3.org/html5/spec-preview/the-style-element.html
Guffa
Laut W3 werden Scope-Attribute nur von Firefox unterstützt. Worum geht es also?
JSON
1

Zusätzlich zu früheren Antworten besteht, obwohl das Einfügen eines Stilcodeblocks in das Element in modernen Browsern möglicherweise funktioniert (obwohl dies immer noch nicht richtig ist), immer die Gefahr, dass der Browser den Code als Text rendert, insbesondere bei älteren Browsern es sei denn, der Stilabschnitt ist in einem CDATA-Abschnitt enthalten.

Die andere Sache beim Einfügen in das Element, abgesehen von Inline-Stilen, ist natürlich, dass, da es nicht mit den W3C-HTML / XHTML-Spezifikationen übereinstimmt, jede Seite im Body im W3C-Validator fehlschlägt. Es ist immer einfacher, unerwartete Anzeigeprobleme zu beheben, wenn Ihr gesamter Code gültig ist, wodurch es einfacher wird, Fehler zu erkennen. Ein ungültiges HTML-Element kann sich nachteilig auf das Rendern aller Elemente auswirken, die über den Ort hinausgehen, an dem es im Code vorkommt. Sie können also unerwartete Effekte erzielen, wenn Elemente an Stellen vorhanden sind, an denen sie nicht sein sollten, denn wenn ein Browser ein ungültiges Element findet, ist dies nur der Fall Es wird am besten erraten, wie es angezeigt werden soll, und verschiedene Browser können unterschiedliche Entscheidungen hinsichtlich der Darstellung treffen.

Unabhängig davon, ob Sie einen Übergangs- oder einen strengen Doctype verwenden, ist dieser gemäß den (X) HTML-Spezifikationen immer noch ungültig.

BlissC
quelle
0

Sie würden den Zweck der Verwendung von CSS tatsächlich zunichte machen, indem Sie die Stile in den Körper einfügen. Der Punkt wäre, Inhalt von Präsentation (und Funktion) zu trennen. Auf diese Weise können Änderungen am Stil im Stylesheet und nicht im Inhalt vorgenommen werden. Sobald Sie die Inline-Stilmethode verwenden, muss jede Seite mit Inline-Stil nacheinander geändert werden. Mühsam und riskant, da Sie eine Seite oder drei oder zehn verpassen könnten.

Bei Verwendung eines Stylesheets müssen Sie nur das Stylesheet ändern. Die Änderungen werden automatisch auf jede HTML-Seite übertragen, die mit dem Stylesheet verknüpft ist.

Neonbles Punkt ist auch ein weiterer wichtiger Grund; Wenn Sie den HTML-Code durch Hinzufügen von CSS inline durcheinander bringen, wird das Rendern zu einem Problem. HTML löst keine Ausnahmen für Ihren Code aus. Stattdessen geht es aus und rendert es so gut es kann und geht weiter.

Die Einhaltung von Webstandards mithilfe eines Stylesheets sorgt für eine bessere Website. Und wenn Sie Hilfe benötigen, weil die Dinge auf Ihrer Seite nicht genau so sind, wie Sie es möchten, können Sie Ihr CSS im Kopf und nicht im Körper platzieren, um die Fehlerbehebung für sich selbst und für jeden, bei dem Sie um Hilfe bitten, erheblich zu verbessern.

tahdhaze09
quelle
2
Ich verstehe nicht, wovon du sprichst. " Sobald Sie die Inline-Stilmethode verwenden" - wer spricht hier über die Verwendung von Inline-Stilen? Die Frage lautet CSS-Datei .
TJ
0

Zwei widersprüchliche Antworten:

Von der MDN- Seite auf dem Link-Tag:

Ein <link>Element kann entweder im Element <head>oder im <body>Element vorkommen, je nachdem, ob es einen Verknüpfungstyp hat, der body-ok ist. Beispielsweise ist der Stylesheet-Verknüpfungstyp body-ok, und daher <link rel="stylesheet">ist a im body zulässig. Dies ist jedoch keine bewährte Methode. Es ist sinnvoller, Ihre <link>Elemente von Ihrem Körperinhalt zu trennen und sie in Ihren Kopf zu setzen.

Aus CSS The Definitive Guide (4. Ausgabe / 2017) Seite 10

Um ein externes Stylesheet erfolgreich zu laden, muss der Link im Kopfelement platziert werden, darf jedoch nicht in einem anderen Element platziert werden.

Ablenkung
quelle
-1

Der Unterschied ist. Das Laden der Seite erfolgt asynchron. Wenn Sie also ein externes Stylesheet haben, wird die CSS-Datei sofort geladen, wenn sie das Link-Tag erreicht. Deshalb ist es gut, sie oben im Kopf zu haben.

Tameshwar
quelle
-1

Welchen Unterschied wird es machen?

Vorteile: Manchmal ist es einfacher, bestimmte Attribute an bestimmten Stellen anzuwenden, insbesondere wenn Code im laufenden Betrieb generiert wird (z. B. das Erstellen über PHP und jede Liste mit dynamischer Größe benötigt eine eigene Klasse ... z. B. für die Zeitsteuerung von Elementen für Transformationen).

Nachteile: Etwas langsamer, funktioniert möglicherweise in ferner Zukunft eines Tages nicht mehr.

Meine allgemeine Meinung dazu: Tu es nicht, du musst es nicht, aber wenn du es musst, verliere keinen Schlaf darüber.

Liljoshu
quelle
-3

Das Einfügen <style>in den Körper funktioniert gut mit allen modernen Browsern.

Ich hatte dies in eBay verwendet.

Wenn es funktioniert, treten Sie es nicht.

Randall Glass
quelle