Muss sich <STYLE> im <HEAD> eines HTML-Dokuments befinden?

136

Müssen sich styleTags genau in headeinem HTML-Dokument befinden? Der 4.01-Standard impliziert dies, wird jedoch nicht explizit angegeben:

Mit dem STYLE-Element können Autoren Stylesheet-Regeln in den Kopf des Dokuments einfügen. HTML erlaubt eine beliebige Anzahl von STYLE-Elementen im HEAD-Abschnitt eines Dokuments.

Ich sage "genau genommen", weil ich eine App habe, die Stilelemente in den Körper einfügt, und alle Browser, mit denen ich getestet habe, scheinen die Stilelemente zu verwenden. Ich frage mich nur, ob das tatsächlich legal ist.

html coding-style html-head eaolson
quelle
1
Wenn Sie Zweifel haben, hilft der W3C Markup Validator immer :) http://validator.w3.org/
Lazlo
Eine Ausnahme von der Regel "<Stil> in <Kopf> setzen" ist HTML-E-Mail, da viele Webmail-Dienste einfach alle Kopfelemente entfernen, was bedeutet, dass Ihre Stile verschwunden sind.
user132837
1
Die Spezifikationen erfordern die Unterstützung von Browsern stylein der body, das ist also gut genug für mich, unabhängig davon, was in den Abschnitten der Autorenrichtlinien impliziert ist.
WraithKenny

Antworten:

104

stylesoll nur auf headdem Dokument enthalten sein.

Neben dem Validierungspunkt ist der Flash mit nicht gestylten Inhalten eine Einschränkung, die Sie bei der Verwendung stylevon interessieren könnte . Der Browser erhält Elemente, die nach der Anzeige formatiert werden, sodass sie sich in Bezug auf Größe / Form / Schriftart und / oder Flimmern verschieben. Es ist im Allgemeinen ein Zeichen für schlechte Handwerkskunst. Im Allgemeinen können Sie mit dem Platzieren davonkommen, wo immer Sie wollen, aber versuchen Sie, es zu vermeiden, wann immer es möglich ist.bodystyle

In HTML 5 wurde ein scopedAttribut eingeführt, mit dem styleTags überall im Text eingefügt werden konnten. Anschließend wurde es jedoch wieder entfernt.

Esteban Küber
quelle
6
Bisher scheint nur Firefox das scopedAttribut zu unterstützen , siehe caniuse.com/#feat=style-scoped .
Jaime Hablutzel
2
Der verlinkte Artikel ist in dem Link rot æther verschwunden, daher hier die neueste verfügbare archivierte Version: web.archive.org/web/20150525042412/http://bluerobot.com/web/css/…
Zachary Murray
@ ZacharyMurray danke für das Heads Up! Ich habe den Link im Body zum Webarchiv aktualisiert.
Esteban Küber
1
Die Spezifikation erfordert konforme Browser, um styleTags in der Spezifikation zu unterstützen. bodyTrotz des Autorenteils der Spezifikation halte ich Körperstile für gültig. github.com/whatwg/html/issues/1605#issuecomment-235961103
WraithKenny
19

Kurze Antwort

  • Nach der aktuellen Spezifikation müssen sich styleElemente immer in der befinden . Es gibt keine Ausnahmen (außer einem Element innerhalb eines Elements , wenn Sie das zählen möchten).headstyletemplate

  • Dies war historisch nicht immer der Fall. Wenn Sie sich für die Details der Spezifikation und deren Verlauf interessieren, lesen Sie weiter.

  • Unabhängig davon, was in der Spezifikation angegeben ist, funktioniert die Verwendung von styleElementen in mehr oder weniger in allen gängigen Browsern. Es wird jedoch als schlechte Vorgehensweise angesehen, da es sowohl gegen die Spezifikation verstößt als auch unerwünschte Folgen wie eine schlechtere Renderleistung oder einen "Blitz nicht gestylter Inhalte" haben kann.body

Spezifikationsverlauf

styleElemente waren in HTML 2 nicht vorhanden . Sie wurden in HTML 3.0 eingeführt, wo sie in die Liste der Elemente aufgenommen wurden, die in The Head Element enthalten sein könnten , aber nicht in die Liste der Elemente, die in The Body Element vorhanden sein könnten . In dem Moment, in dem das Element zum ersten Mal spezifiziert wurde, konnte es daher nur in das Element aufgenommen werden head.

Dies blieb bis HTML 5 der Fall (obwohl mit einem anderen Wortlaut ausgedrückt), der das (seitdem entfernte) scopedAttribut für einführtestyle Elemente eingeführt wurde. Dieses Attribut sollte, falls vorhanden, ermöglichen, dass ein styleElement innerhalb eines Elements im Körper platziert wird, um nur die Nachkommen dieses Elements zu formatieren. Diese Funktion hat es jedoch nie in einen echten Browser geschafft (zumindest nicht, ohne über ein Entwicklerflag aktiviert werden zu müssen) und wurde "aus Mangel an Implementiererinteresse" sowohl aus den W3C- als auch aus den WhatWG-Spezifikationen entfernt . Danach waren styleElemente nur in Kontexten zulässig, die Metadateninhalte zulassen, bei denen es sich nur um den Kopf handelt. Somit waren wir wieder bei den gleichen Regeln wie vor HTML 5.

Aufgrund eines Fehlers beider Spezifikationsorganisationen wurde jedoch ein nicht normativer Index von Elementen, der in beiden Spezifikationen als Anhang enthalten ist, nicht ordnungsgemäß aktualisiert, um das Entfernen von Elementen widerzuspiegeln scoped, was ihn mit der normativen Spezifikation inkonsistent macht. Ich wies sowohl die WhatWG als auch die W3C darauf hin und setzte dabei unabsichtlich Ereignisse in Gang, die dazu führten, dass die beiden Spezifikationen auseinander gingen.

Die Lösung von WhatWG für die Inkonsistenz zwischen der normativen Spezifikation und dem nicht normativen Index bestand darin , meinen Patch zu akzeptieren, der den nicht normativen Index korrigiert.

Das W3C lehnte andererseits meinen entsprechenden Patch ab, anstatt stattdessen die normative Spezifikation zu aktualisieren , um die Verwendung von styleElementen in der zu ermöglichen body, während dies mit dem Hinweis bedacht wurde, dass dies Probleme verursachen kann und "mit Vorsicht" erfolgen sollte. Der Grund für diese Änderung war, die Spezifikation an das reale Browserverhalten anzupassen.

Ab März 2017 hing die offizielle Antwort auf diese Frage davon ab, welche Normungsorganisation Sie sich angehört haben. Wenn Sie die (allgemein anerkanntere) WhatWG-Spezifikation aufgeführt haben, war ein styleElement in der nicht zulässig body. Wenn Sie die W3C-Spezifikation aufgeführt haben, war dies zulässig, aber nicht empfohlen.

Dieser alberne Zustand wurde (vielleicht wie viele andere derartige Unstimmigkeiten) mit dem Friedensvertrag zwischen W3C und WhatWG vom April 2019 beendet , in dem vereinbart wurde, dass die WhatWG-Spezifikation der einzig wahre HTML-Standard wird, wobei W3C lediglich nummerierte Schnappschüsse veröffentlicht HTML-Spezifikationen, anstatt parallel eine konkurrierende Spezifikation zu entwickeln. Daher ist der Wechsel von 2017 zu der W3C-Gabel, die styleElemente in der erlaubte, bodynicht mehr Teil einer aktuellen Spezifikation. es ist nur eine Kuriosität der Geschichte.

Daher müssen wir uns heute nur noch die WhatWG-Spezifikation ansehen, um festzustellen, was offiziell zulässig ist. Es hat folgendes zu sagen:

4.2.6. Das styleElement

Kategorien :

Metadateninhalt .

Kontexte, in denen dieses Element verwendet werden kann :

Wo Metadateninhalt erwartet wird.
In einem <noscript>Element, das ein untergeordnetes <head>Element eines Elements ist.

STRG-Finger durch die Einzelseiten-Spezifikation zeigt, dass das einzige Element, dessen Inhaltsmodell Metadateninhalt enthält, das headElement ist.

Der nicht normative Index der Elemente, die ich zuvor erwähnt habe, bestätigt auch, dass die einzigen zulässigen Eltern für ein styleElement ein headoder ein Element sind noscript.

Mark Amery
quelle
18

Obwohl die anderen Antworten richtig sind, bin ich überrascht, dass niemand erklärt hat, wo die Standards Stile außerhalb von verbietenhead .

Es ist tatsächlich im Abschnitt über das headElement (und in der DTD ):

<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

Ja, ich weiß. DTDs sind schwer zu lesen.

Dies ist der einzige Ort, an dem das STYLEElement auftritt, sodass es implizit an anderer Stelle ungültig ist.

user123444555621
quelle
6
Ich bin so verwirrt.
dav_i
1
Sollte jetzt HTML5 verwenden, das IIRC hat keine DTD. Was die HTML5-Spezifikation allein sagt, ist, was ist oder nicht.
Jan Kyu Peblik
14

Sie sollen nicht über den Kopf hinausgehen, aber sie arbeiten trotzdem; obwohl Sie vielleicht ein schnelles Flackern bemerken. Die Site sollte nicht mit dem Style-Tag außerhalb des Kopfes validiert werden, aber ist das wirklich wichtig? Link-Tags funktionieren auch außerhalb des Kopfes, obwohl dies nicht vorgesehen ist.

geowa4
quelle
5
Zu sagen "sie arbeiten" ist ein bisschen schwierig. Bestenfalls kann man sagen, dass die meisten aktuellen Browser die Stile weiterhin rendern, aber es gibt nichts an diesem Fehler, das von Natur aus "funktioniert". Es könnte in keiner zukünftigen Version eines Browsers funktionieren und sie würden nichts falsch machen.
Chuck
6
imo, Stile gerendert = Werke; nichts kniffliges. dieser letzte Satz muss neu geschrieben werden; das macht keinen Sinn. Ich erwähnte, dass es nicht "richtig" war, als ich sagte, dass es nicht validieren würde, also muss ich nicht verstehen, was Sie mit diesem Satz gemeint haben.
Geowa4
Das Problem ist , dass selbst wenn sie sind gestylt, werden Sie einige Flimmern auf den Inhalt haben , wenn diese styles in kicken.
Esteban Küber
2
es sei denn, das Style-Tag befindet sich zuerst im Körper
geowa4
Versuchen Sie das nicht zu Hause.
TechNyquist
3

Wie in den anderen Antworten angegeben, muss es nicht unbedingt vorhanden sein. Es wird jedoch nicht validiert. Dies kann in diesem Fall von Bedeutung sein oder auch nicht. Beachten Sie jedoch, dass das Rendern von HTML ausschließlich den Browsern überlassen bleibt. Soweit ich weiß, werden alle verwendeten Browser von heute es unterstützen, sie außerhalb des Kopfes zu platzieren, aber Sie können dies nicht für zukünftige Browser und zukünftige Browserversionen garantieren.

Halten Sie sich an den Standard und Sie sind sicherer. Wie viel sicherer ist, steht zur Debatte.

Louis
quelle
3

In der HTML5.2 W3C-Empfehlung vom 14. Dezember 2017 (nicht der oben genannte frühere Entwurf) heißt es nun, dass Sie aufnehmen können <style>.

"Im Körper, wo der Fließinhalt erwartet wird." (Abschnitt 4.2.6)

Anahata
quelle
Obwohl jetzt, W3C offiziell Zustand , dass die WHATWG spec obsolet alle bisherigen Spezifikationen und die WHATWG spec nicht erlaubt stylein der body, so dass wir wieder auf diesen eindeutig ist verboten. Sehen Sie meine Antwort, wenn Sie an dem kurvenreichen Weg interessiert sind, den wir hierher gekommen sind.
Mark Amery
2

Ein Style-Tag an einer anderen Stelle als innerhalb des <head>wird nicht mit W3C-Regeln validiert.

womp
quelle
-1

Sie können das Style-Tag auch innerhalb des Kopf- oder Körperabschnitts oder auch außerhalb des HTML-Tags verwenden (außerhalb des HTML-Tags wird nicht empfohlen). In Echtzeitprojekten können Sie oft sehen, dass sie das Style-Tag außerhalb des HTML-Tags verwenden

Adarsh ​​Joshi
quelle