Wird es eine falsche Idee sein, <style> in <body> zu haben?


12

Im folgenden Code habe ich ein internes Stylesheet mit einem Body-Tag platziert, anstatt es im Kopf zu haben. Für die Einzelseitenanwendung erwäge ich, dies für Stile zu tun, die nur für diese Seite gelten, anstatt über eine separate Datei pagespecific.css zu verfügen.

Gibt es ein Szenario, in dem dies Nachteile hat, da ich nicht dasselbe in den Kopfbereich setze?

<!-- myPartial.html starts here --> 
<!-- Like to keep styles unique to this html right here in this file --> 
<div>
  <style>
    body { background-color: red; }
    #myText { color: white; }
  </style>

  <span id='myText'>Hello</span>
</div>
<!-- myPartial.html ends here --> 

Antworten:


17

Ein styleElement innerhalb des bodyElements verstößt gegen HTML-Syntaxregeln. (Abgesehen davon, dass es gemäß HTML5-Entwürfen unter bestimmten Bedingungen zulässig ist, wenn die scopedAttribute vorhanden sind; dieses Attribut wird von einigen Browsern unterstützt.) Andererseits ist es Browsern egal. Die Unterteilung in headund bodyElemente ist theoretisch.

Sie erhalten jedoch nichts, wenn Sie die ungültige Syntax verwenden, im Gegensatz zum Platzieren im styleInneren head. Die einzige Entschuldigung wären technische Einschränkungen in einigen Authoring-Umgebungen, die Sie möglicherweise daran hindern, etwas in das headTeil einzufügen .

Das Problem der Verwendung eines styleElements im Vergleich zu einem externen Stylesheet über linkist völlig orthogonal zu dieser Frage.


1
Der erste Teil Ihrer Antwort ist nicht unbedingt wahr .
Patricksweeney

1
@patricksweeney, ich denke, es ist in diesem Zusammenhang etwas theoretisch, aber eine korrekte Beobachtung; Antwort aktualisiert.
Jukka K. Korpela

Ich nehme "Browser interessieren mich nicht" als positiv für meinen Ansatz. Da meine Seiten Teilbereiche sind (Single-Page-Application), kann ich keinen <head> -Abschnitt haben, der Grund, warum ich versuche, <body> oder in Elemente im Körper einzufügen.
Saran

2
@Galaxy, ich verstehe nicht, warum einer einseitigen Anwendung ein headElement fehlen würde . Eine HTML-Seite hat immer eine.
Jukka K. Korpela

@ JukkaK.Korpela, ich habe den Codeteil in meiner Frage aktualisiert, um Ihre Frage zu beantworten.
Saran

6

(Da wir hier bei SE.SX sind, kann ein strategischerer Ansatz eine wertvolle Ergänzung zu den üblichen technischen Überlegungen sein.)

[Präambel] Die HTML5-Spezifikation ist ein sich ständig bewegendes Ziel, und sie hat eine Richtlinie, die den etablierten gängigen Praktiken folgt. Sie haben in der Vergangenheit Merkmale überholt und wiederbelebt, die Bedeutung anderer verändert, den Fokus methodischer Empfehlungen verschoben usw. Es ist nicht für alle Ewigkeit geschrieben, mit der ganzen Weisheit der Menschheit auf einmal verfügbar. Die Spezifikation ist keine heilige Quelle der Wahrheit. Es ist nur natürlich, dass manchmal die Browser richtig sind. [/Präambel]

Die Situation von OP ist überwiegend verbreitet und gültig.

Sie haben ein CMS, dessen Design entworfen und installiert ist, das gesamte CSS, das ordnungsgemäß von HEAD geladen wurde. Dann haben Sie, der Seiteneditor, eine modische WYSIWYG-Box, mit der Sie (Gott sei Dank!) In den "Quellmodus" wechseln können Geben Sie (Einfügen) in das HTML-Markup ein (zuvor an anderer Stelle erstellt, mit besser geeigneten Werkzeugen). Glücklicherweise können Sie sogar STYLETags einfügen (möglicherweise aufgrund eines zufälligen Auslassens in einem Tag-Filter) ... Der Tag wird durch viele sich wiederholende seelenzerstörende Grunzarbeiten gerettet. Sie haben jedoch immer noch keine Möglichkeit, das HEAD-Element des Systems aus einem Seitenbearbeitungsszenario heraus zu stören.

Sollte Sie das davon abhalten, Ihr CSS auf einfache Weise mit Ihren HTML-Fragmenten zu verwenden, nur weil die Spezifikation dies sagt?

Oder Sie haben eine einseitige AJAX-Anwendung.

Es wird für eine lange Sitzung ohne Neuladen ausgeführt, und es gibt syndizierte Inhalte aus verschiedenen zufälligen Quellen, die alle willkürlich und unabhängig gestaltet sind. Es wäre absurd, zu verlangen, dass sie zuerst konvertiert werden, um nur Inline- STYLEAttribute zu verwenden, anstatt nur mit einem eingebetteten STYLEElement zu kommen.

Außerdem: Sie können a) einbetten bereits jede CSS überall in der BODYüber STYLEAttribute, so CSS ist „theoretisch“ legal dort sowieso; und b) Sie können bereits mit nahezu jedem Stil tun, was Sie wollen, wann immer Sie (und mehr) von Javascript wollen, so dass CSS auch bereits auf pathologisch nicht performante Weise missbraucht werden kann. Und keiner von uns würde jemals gegen diese Merkmale Einwände erheben. Auch das W3C nicht.

Also, was genau ist so böse an STYLEElementen in der BODY? Was sind diese zusätzlichen nachteiligen Auswirkungen, die sich auf unser breites Arsenal an Missbrauch von HTML-Konstrukten auswirken würden? Mehr schlechte Leistung? Wahrscheinlich. Manchmal.

Ist das ein triftiger Grund, diese unglaublich nützliche Praxis abzuschaffen, die von jedem Browser aus einem bestimmten Grund unterstützt wird? Nicht in einer Million Meilen!

Wir sind keine Idioten. Nun, nicht alle oder nicht immer ...;) Techniken mit dem Risiko einer schlechten Leistung könnten einfach dokumentiert und nicht nur verboten werden. Wir hatten in den frühen Tagen des Web Java-Applets und haben überlebt. Autos können missbraucht werden und Elend verursachen, sogar Lebensmittel können auf störende, ineffiziente Weise verwendet werden, und Fahrer, die essen können, sind im Durchschnitt sogar noch dümmer als der durchschnittliche Webdesigner. Außerdem, lieber W3C, kein Grund zur Sorge: Die wütenden Herden von HTML-Bastlern, denen die Beine mit STYLEElementen im BODYStill abgeschossen wurden, können dem W3C nicht nachgehen und sich rächen. Sie kennen die Adresse nicht. Und sie haben keine Beine.

Also bitte: Lassen Sie Ihre Stimme dafür hören, dass STYLEsie legal ist BODY! Das gehorsame Zitieren des Textes, aber das Fehlen einer praktikablen Alternative, die besser ist als die aktuelle Situation, hilft nichts. Es ist tatsächlich eine Bedrohung für diese Workaround-Technik der letzten Instanz.

Denken Sie daran: Die HTML5-Spezifikation wird als Empfehlung bezeichnet .


Update: Die Spezifikationen haben endlich aufgeholt: STYLEist jetzt gültig in BODY! ;)
lunakid

1
Update 2: Die Spezifikationen wurden nicht eingeholt, weil sie ihre Meinung geändert haben (klicken Sie sich durch den Link von lunakid, er wurde aktualisiert).
Maximillian Laumeister

2

Die HTML-Spezifikation besagt dies

Ein Stilelement ohne Gültigkeitsbereichsattribut darf nur im Kopf des Dokuments angezeigt werden.

Das Gültigkeitsbereichsattribut ist ein boolescher Wert, der angibt, dass er nur auf den Unterbaum angewendet werden soll, der im übergeordneten Element des Stilelements verwurzelt ist.

Derzeit unterstützt nur Firefox das Gültigkeitsbereichsattribut. http://www.w3schools.com/tags/att_style_scoped.asp


5
Die Website von w3schools sollte nicht oder überhaupt nicht als Referenz angegeben werden. siehe w3fools.com
Jukka K. Korpela

2
Und das beantwortet die Frage nicht.
Jukka K. Korpela

1
Danke @ JukkaK.Korpela, es war der erste Link, den ich unter Berufung auf die Unterstützung von Attributbrowsern mit Gültigkeitsbereich gefunden habe. Der andere Kommentar liefert ein viel besseres Zitat. +1 Ihre Antwort -1 Ihre weniger als konstruktiven Kommentare.
Crad

+1 für den Hinweis auf die Spezifikation sowie für die Feststellung, dass das Scoping nicht unterstützt wird (was erforderlich ist, um die Spezifikation einzuhalten). Ich denke, du hättest die Antwort lesen sollen, bevor du dort mit der Waffe springst @ JukkaK.Korpela, sehr arm. Sie können nicht wirklich vertrauenswürdiger sein als die Spezifikation, und sie beantwortet die Frage perfekt. " Wird es eine falsche Idee sein, Stil im Körper zu haben? " - gemäß der Spezifikation " Ja, das wird es. "
Fergus In London

1

Es gibt einige technische Gründe dafür, dass Ihr CSS in einer Datei oder einem Style-Tag enthalten ist:

  • Die Möglichkeit, einen CSS-Minifier zu verwenden (ich glaube nicht, dass Minifiers mit Style-Tags funktionieren)
  • Damit die CSS-Datei vom Browser zwischengespeichert werden kann.

Einige meinungsbasierte Gründe für die Verwendung einer Datei:

  • Sie können einen wunderbaren CSS-Präprozessor wie Sass (Compass) oder Less verwenden.
  • Sie haben zwei Möglichkeiten, Ihrer Anwendung CSS hinzuzufügen.

Meine persönliche Präferenz ist es, Compass zu verwenden, um separate Dateien für jede Seite zu speichern und sie dann alle zu einer Datei zu kompilieren. Diese einzelne Datei würde auf jeder Seite enthalten sein. Wenn die Dateien später getrennt werden müssen, aus welchem ​​Grund auch immer, können sie sich in der Zwischenzeit nicht lohnen.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.