195

<html>
  <body>
    <style type="text/css">
      p.first {color:blue}
      p.second {color:green}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>

    <style type="text/css">
      p.first {color:green}
      p.second {color:blue}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>
  </body>
</html>

Wie soll ein Browser CSS rendern, das nicht zusammenhängend ist? Soll es eine Datenstruktur mit allen CSS-Stilen auf einer Seite generieren und diese zum Rendern verwenden?

Oder wird mit Stilinformationen in der angezeigten Reihenfolge gerendert?

html css Gagan
quelle

2

Ich würde sagen, es ist undefiniertes Verhalten, da es kein gültiges HTML ist. Für weitere Informationen, welche Elemente gültig sind und welche nicht: en.wikipedia.org/wiki/HTML_element

Felix Kling

2

Abgesehen von diesem Problem ist es eine schlechte Praxis, CSSund zu verwechseln HTML.

0x2D9A3

1

@ 0x2D9A3 Nicht unbedingt wahr. Das Anfordern einer externen CSS-Seite dauert länger als das im <head>Tag definierte CSS

Kolob Canyon

@KolobCanyon Zustimmen, aber in der Regel sollte sich CSS in einer separaten Datei befinden. Wenn Sie Tonnen von CSS haben, ist es sowohl einfacher zu verwalten (zu warten, (Nach-) Verarbeitung, Minimierung, Bündelung) als auch als separate Datei zu dienen, und Ihr Inhalt (HTML) wird möglicherweise auch schneller geladen, was zu einer besseren UX führt. Wie immer bei der Entwicklung ist jedoch alles kontextspezifisch, also YMMW :)

0x2D9A3

3

@KolobCanyon, hier geht es nicht darum, ob CSS in einer separaten Datei gespeichert werden soll. In diesem Fall geht es eher um CSS in der <body>als in der <head>.

Ray Butterworth

312

Wie bereits erwähnt, muss das <style>Tag in HTML 4 in den <head>Abschnitt eingefügt werden (obwohl die meisten Browser <style>Tags innerhalb des Abschnitts zulassen body).

HTML 5 enthält jedoch das scopedAttribut (siehe Update unten), mit dem Sie Stylesheets erstellen können, die innerhalb des übergeordneten Elements des <style>Tags liegen. Auf diese Weise können Sie auch <style>Tags innerhalb des <body>Elements platzieren:

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id="scoped-content">
    <style type="text/css" scoped>
        h1 { color: red; } 
    </style>

    <h1>Hello</h1>
</div>

    <h1>
      World
    </h1>

</body>
</html>

Wenn Sie den obigen Code in einem HTML-5-fähigen Browser rendern, der dies unterstützt scoped, wird der begrenzte Umfang des Stylesheets angezeigt .

Es gibt nur eine große Einschränkung ...

Zum Zeitpunkt, an dem ich diese Antwort schreibe (Mai 2013), unterstützt derzeit fast kein Mainstream-Browser das scopedAttribut. (Obwohl anscheinend Entwickler-Builds von Chromium dies unterstützen.)

Es gibt jedoch eine interessante Implikation des scopedAttributs, das sich auf diese Frage bezieht. Dies bedeutet, dass zukünftige Browser über den Standard beauftragt werden, <style>Elemente innerhalb der zuzulassen <body>(solange die <style>Elemente einen Gültigkeitsbereich haben).

Angesichts dessen:

Fast jeder vorhandene Browser ignoriert derzeit das scopedAttribut
Fast jeder vorhandene Browser erlaubt derzeit <style>Tags innerhalb der<body>
Zukünftige Implementierungen sind erforderlich, um <style>Tags mit Gültigkeitsbereich innerhalb des zuzulassen<body>

... dann schadet es buchstäblich nicht , <style>Tags im Körper zu platzieren, solange Sie sie mit einem scopedAttribut zukunftssicher machen . Das einzige Problem ist, dass aktuelle Browser den Umfang des Stylesheets nicht einschränken , sondern auf das gesamte Dokument anwenden. Aber der Punkt ist , dass für alle praktischen Zwecke, Sie können umfassen <style>Tags innerhalb der , <body>dass Sie zur Verfügung gestellt:

Zukunftssicheres HTML durch Einfügen des scopedAttributs
Verstehen Sie, dass das Stylesheet innerhalb des Stylesheets ab <body>sofort keinen Gültigkeitsbereich mehr hat (da noch keine Unterstützung für Mainstream-Browser vorhanden ist).

* außer natürlich, um HTML-Validatoren zu verärgern ...

In Bezug auf die allgemeine (aber subjektive) Behauptung, dass das Einbetten von CSS in HTML eine schlechte Praxis ist, sollte angemerkt werden, dass der Sinn des scopedAttributs darin besteht, typische moderne Entwicklungsframeworks zu berücksichtigen, mit denen Entwickler HTML-Blöcke als Module oder syndizierten Inhalt importieren können . Es ist sehr praktisch, eingebettetes CSS zu haben, das nur für einen bestimmten HTML-Teil gilt, um gekapselte, modulare Komponenten mit bestimmten Stilen zu entwickeln.

Aktualisierung ab Februar 2019 Laut Mozilla-Dokumentation ist das scopedAttribut veraltet. Chrome unterstützt es nicht mehr in Version 36 (2014) und Firefox in Version 62 (2018). In beiden Fällen musste die Funktion vom Benutzer in den Browsereinstellungen explizit aktiviert werden. Kein anderer großer Browser hat dies jemals unterstützt.

Charles Salvia
quelle

3

@ RobertMcKee: hast du das tatsächlich getestet? Ich würde erwarten, dass normalerweise die gesamte HTML-Seite (einschließlich aller Inline-Stile) vor dem Rendern analysiert wird, da sie normalerweise nicht sehr groß ist und die Browser eine (sehr kurze) Zeit warten, bevor sie genau rendern, um das Auftreten von nicht gestylten Inhalten zu vermeiden aufgrund von CSS in der verknüpft head. Wenn dies Ihre einzige CSS, und wenn die Seite groß ist und wenn die Netzwerkverbindung nicht sehr schnell ist, dann vielleicht werden Sie einen Blitz von unstyled Inhalt sehen, aber es würde mich überraschen , in den meisten praktischen Situationen.

Eamon Nerbonne

4

Bis heute unterstützt nur Firefox Stilelemente mit Gültigkeitsbereich (laut caniuse.com/#feat=style-scoped ). Und da gängige Browser nur das STYLE-Element in BODY unterstützen, würde ich es bei Bedarf nur verwenden. Wenn das CSS in einem Bereich angewendet werden soll, können Sie jedem Selektor in der CSS-Quelle einfach die ID / Klasse eines Wrappers voranstellen. Ich habe dies tatsächlich in einer Web-App getan, die HTML-Berichte serverseitig geladen und über AJAX gerendert hat. Dem CSS kann dann in JavaScript ein einfacher regulärer Ausdruck vorangestellt werden: cssString.replace (/ (^ | \}) ([^ {] +) (\ {) / g, '$ 1' + Präfix + '$ 2 $ 3')

Adam Hošek

5

Unterstützung für @scopedoder scopedscheint auszusterben: hier und hier

Kiran Subbaraman

51

Unterstützung von @KiranSubbaraman: Ich habe gerade (Juli 2016) über Mozilla Dev gelesen: "Das Attribut mit Gültigkeitsbereich wurde nach nur begrenzter und experimenteller Übernahme durch Chrome und Firefox aus der Spezifikation entfernt . Sie sollten es vermeiden , da dies mit ziemlicher Sicherheit der Fall sein wird bald aus diesen Browsern entfernt. " >> developer.mozilla.org/en-US/docs/Web/HTML/Element/…

jave.web

9

Das scopedAttribut wurde aus den aktuellen HTML5-Spezifikationen entfernt.

Albert Wiersch

61

BREAKING NEWS BAD für „Stil in Körper“ Liebhaber: W3C hat vor kurzem den HTML - Krieg verloren gegen WHATWG, dessen versions HTML „Living Standard“ hat nun die offizielle, die leider nicht nicht erlauben STYLE in der BODY. Die kurzlebigen glücklichen Tage sind vorbei. ;) Der W3C-Validator funktioniert jetzt auch nach den WHATWG-Spezifikationen. (Danke @FrankConijn für das Heads-up!)

(Hinweis: Dies ist "ab heute" der Fall, aber da es keine Versionierung gibt, können Links jederzeit ohne vorherige Ankündigung oder Kontrolle ungültig werden. Wenn Sie nicht bereit sind, auf die einzelnen Quell-Commits bei GitHub zu verlinken, können Sie dies grundsätzlich nicht Machen Sie länger stabile Verweise auf den neuen offiziellen HTML-Standard AFAIK. Bitte korrigieren Sie mich, wenn es einen kanonischen Weg gibt, dies richtig zu machen.)

OBSOLETED GOOD NEWS:

Yay, STYLEist ab BODYHTML5.2 endlich gültig ! (Und scopedist auch weg.)

Aus den W3C-Spezifikationen ( genieße die letzte Zeile! ):

4.2.6. Das Stilelement

...

Kontexte, in denen dieses Element verwendet werden kann:

Wo Metadateninhalt erwartet wird.

In einem Noscript-Element, das ein untergeordnetes Element eines head-Elements ist.

Im Körper, wo der Fließinhalt erwartet wird.

META SEITLICHER HINWEIS:

Die bloße Tatsache, dass wir uns trotz der Schäden des "Browserkrieges" immer noch gegen zwei lächerlich konkurrierende "offizielle" HTML "-Standards (Anführungszeichen für 1 standard + 1 standard < 1 standard) weiterentwickeln mussten, bedeutet, dass der Ansatz" Rückgriff auf den gesunden Menschenverstand "in den Graben geht Die Webentwicklung hat nie wirklich aufgehört, sich zu bewerben.

Dies mag sich jetzt endgültig ändern, aber unter Berufung auf die konventionelle Weisheit: Webautoren / -entwickler und damit wiederum sollten Browser letztendlich entscheiden, was in den Spezifikationen enthalten sein soll (und was nicht), wenn es keinen guten Grund gegen das gibt, was bereits getan wurde Wirklichkeit. Und die meisten Browser sind seit langem unterstützt STYLEin BODY(in der einen oder anderen, siehe zB das scoped. Attr) (das trotz seiner inhärenten Leistung (und möglicherweise andere) Strafen wir . Zu Bezahlung entscheiden sollte oder nicht, nicht die Spezifikationen). Zum einen werde ich weiter auf sie wetten und die Hoffnung nicht aufgeben. ;) Wenn WHATWG den gleichen Respekt vor der Realität / den Autoren hat, wie sie behaupten, können sie hier einfach das tun, was das W3C getan hat.

Gr.
quelle

3

Ich habe die technischen Daten gelesen, verstehe sie aber nicht. Können Sie einen Beispielcode für einen styleBlock bodyangeben, der validiert?

Frank Conijn

3

@FrankConijn: Guter Punkt, Dinge haben sich geändert, die Antwort aktualisiert! Es ist wirklich verwirrend. Sowohl die 5.2- als auch die 5.3-W3C-Spezifikation werden STYLEals Metadaten- und Flow-Inhalt behandelt, aber die neueste WHATWG-Spezifikation "living" erzählt die alte, langweilige Geschichte "nur Metadaten" (nur in HEAD zulässig). Und um die Verletzung noch schlimmer zu machen, scheint der W3C-Validator dem WHATWG-Geschmack zu folgen. Ich habe mich noch nicht entschieden, ob ich lachen oder weinen soll, aber ich habe mich persönlich entschieden, mich mit dem Fall "Browser + W3C - Validator" zu "irren" und STYLE in the BODY zuzulassen. (Übrigens, vergessen Sie nicht: Wir sollten eigentlich die ultimative Quelle des Standards sein .)

Gr.

Ich denke wirklich, dass sie mit diesem Mist den Hai gesprungen haben. Sie lassen im Grunde keine andere Wahl, als in Linienstilen zu verwenden, wenn Sie eine Hintergrundbildeigenschaft dynamisch in einem Vorlagen-System festlegen möchten. Es war so viel weniger invasiv, einen programmgesteuert generierten Stilblock direkt über Ihrer HTML-Ausgabe abzulegen.

GovCoder

32

Wenn ich sehe, dass die Content-Management-Systeme auf großen Websites routinemäßig einige <style> -Elemente (einige, nicht alle) in die Nähe des Inhalts bringen, der auf diesen Klassen basiert, komme ich zu dem Schluss, dass das Pferd nicht im Stall ist.

Schauen Sie sich die Seitenquellen von cnn.com, nytimes.com, huffingtonpost.com, der nächstgelegenen Großstadtzeitung usw. an. Alle tun dies.

Wenn es einen guten Grund gibt, irgendwo im Text einen zusätzlichen <style> -Abschnitt einzufügen - zum Beispiel, wenn Sie verschiedene und unabhängige Seitenelemente in Echtzeit einfügen () und jeder einen eigenen <style> für sich hat, und Die Organisation wird sauberer, modularer, verständlicher und wartbarer sein - ich sage, beißen Sie einfach die Kugel. Sicher wäre es besser, wenn wir einen "lokalen" Stil mit eingeschränktem Umfang haben könnten, wie lokale Variablen, aber Sie arbeiten mit dem HTML, das Sie haben, und nicht mit dem HTML, das Sie zu einem späteren Zeitpunkt haben möchten oder möchten.

Natürlich gibt es potenzielle Nachteile und gute (wenn auch nicht immer zwingende) Gründe, der Orthodoxie zu folgen, wie andere ausgeführt haben. Aber für mich sieht es immer mehr so aus, als wäre die durchdachte Verwendung von <style> in <body> bereits zum Mainstream geworden.

Timberline
quelle

1

Pragmatismus FTW!

Waruyama

1

Ja, du hast Recht. Als Beispiel verwende ich das <style> -Tag in <body> in meinem Plugin. Warum, weil es der einfachste Weg ist, stilvolle Plugin-Inhalte zu erstellen. Aber in einem Moment sind alle CSS-Klassen einzigartig für meine Plugin-Daten.

Avirtum

7

Kein gültiges HTML, jedenfalls scheint so ziemlich jeder Browser nur die zweite Instanz zu berücksichtigen.

Getestet unter den letzten Versionen von FF und Google Chrome unter Fedora und FF, Opera, IE und Chrome unter XP.

nico
quelle

6

Ich denke, dies wird von Browser zu Browser unterschiedlich sein: Die globalen Anzeigeregeln werden wahrscheinlich aktualisiert, wenn der Browser den Code durchläuft.

Sie können solche Änderungen manchmal in den globalen Anzeigeregeln sehen, wenn ein externes Stylesheet mit einer Verzögerung geladen wird. Ähnliches könnte hier passieren, aber in so kurzer Folge, dass es nicht wirklich gerendert wird.

Es ist sowieso kein gültiger HTML-Code, daher würde ich sagen, dass es sinnlos ist, darüber nachzudenken. <style>Tags gehören in den headBereich der Seite.

Pekka
quelle

5

Wie andere gesagt haben, ist dies kein gültiger HTML-Code, da die Style-Tags in den Kopf gehören.

Die meisten Browser erzwingen diese Validierung jedoch nicht wirklich. Sobald das Dokument geladen ist, werden die Stile zusammengeführt und angewendet. In diesem Fall überschreibt der zweite Satz von Stilen immer den ersten, da dies die letzten gefundenen Definitionen waren.

Nicht ich
quelle

5

Das <style>Tag gehört in den <head>Abschnitt, getrennt vom gesamten Inhalt.

Referenzen: W3C Specs und W3Schools

Josh Stodola
quelle

51

Adressiert keine Frage. Und diese strengen Richtlinien werden von der Realität überschwemmt. Es gibt VIELE Fälle, in denen es Autoren nicht möglich ist, ihren Stil im HTML-Kopf zu definieren / aufzunehmen.

Javier

3

Dies mag 2010 zutreffen, ist aber heute keine akzeptable Antwort.

Isaac Lubow

3

In Ihrem Beispiel soll ein Browser nichts tun. Der HTML-Code ist ungültig. Entweder wird eine Fehlerbehebung ausgelöst, oder der Parser macht es so, wie er will.

In einer gültigen Instanz werden mehrere Stylesheets nur so behandelt, als würden sie nacheinander angezeigt. Die Kaskade wird wie gewohnt berechnet.

QUentin
quelle

1

Da dies nicht gültig ist, hat HTML keinen Einfluss auf das Ergebnis. Dies bedeutet lediglich, dass der HTML-Code dem Standard entspricht (lediglich aus organisatorischen Gründen). Um gültig zu sein, hätte es so geschrieben werden können:

<html>
<head>
<style type="text/css">
  p.first {color:blue}
  p.second {color:green}
</style>
</head>
<body>
<p class="first" style="color:green;">Hello World</p>
<p class="second" style="color:blue;">Hello World</p>

Ich vermute, dass der Browser den letzten Stil anwendet, auf den er stößt.

G. Bickham
quelle

1

Ich denke, dies kann ein Problem in Bezug auf begrenzte Kontexte sein, z. B. WYIWYG-Editoren auf einem Web-System, das von Nicht-Programmierer-Benutzern verwendet wird und die Möglichkeiten zur Einhaltung der Standards einschränkt. Manchmal (wie bei TinyMCE) ist es eine Bibliothek, die Ihren Inhalt / Code in ein textareaTag einfügt, das vom Editor als großes divTag gerendert wird . Und manchmal kann es eine alte Version dieser Editoren sein.

Ich nehme an, dass:

Diese Nicht-Programmierer-Benutzer haben keinen offenen Kanal mit den Systemadministratoren (oder den Webdevs der Institution), um einige CSS-Regeln in das System aufzunehmen stylesheets. Tatsächlich wäre es für die Administratoren (oder Webdevs) unpraktisch, wenn man die Anzahl der Anfragen in diesem Sinne berücksichtigt, die sie haben würden.
Dieses System ist ein Legacy-System und unterstützt immer noch keine neueren HTML-Versionen.

In einigen Fällen kann es ohne Verwendungsregeln stylezu einer sehr schlechten Entwurfserfahrung kommen. Ja, diese Benutzer müssen angepasst werden. Okay, aber was wären die Lösungen in diesem Szenario? In Anbetracht der verschiedenen Möglichkeiten, CSS in eine htmlSeite einzufügen , nehme ich folgende Lösungen an:

1. Option: Fragen Sie Ihren Systemadministrator

Bitten Sie Ihren Systemadministrator, einige CSS-Regeln in das System aufzunehmen stylesheets. Dies ist eine externe oder interne CSS- Lösung. Wie bereits gesagt, ist dies möglicherweise nicht möglich.

2. Option: `<link>`ein`<body>`

Verwenden Sie ein externes Stylesheet für das bodyTag, dh die Verwendung des linkTags in dem Bereich, auf den Sie Zugriff haben ( dh auf der Site, innerhalb des bodyTags und nicht im headTag). Einige Quellen sagen, dass dies in Ordnung ist, aber "keine gute Praxis", wie MDN :

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

Einige andere beschränken es auf den <head>Abschnitt, wie z. B. w3schools :

Hinweis: Dieses Element befindet sich nur im Kopfbereich, kann jedoch beliebig oft angezeigt werden.

Testen

Ich habe es hier getestet (Desktop-Umgebung, in einem Browser) und es funktioniert für mich. Erstellen Sie eine Datei foo.html:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <link href="bar.css" type="text/css" rel="stylesheet">
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
</body>
</html>

Und dann eine CSS-Datei im selben Verzeichnis mit dem Namen bar.css:

.test1 { 
    color: green;
};

Nun, dies scheint nur möglich zu sein, wenn Sie wissen, wie Sie eine CSS-Datei irgendwo im Institutionssystem hochladen. Vielleicht wäre das der Fall.

3. Option: `<style>`auf`<body>`

Verwenden Sie das Internet-Stylesheet für das bodyTag, dh die Verwendung des styleTags in dem Bereich, auf den Sie Zugriff haben ( dh auf der Site, innerhalb des bodyTags und nicht im headTag). Dies ist , was Charles Salvia ‚s und Sz ‘ s Antworten hier sind ungefähr. Wenn Sie diese Option auswählen, berücksichtigen Sie deren Bedenken.

4., 5. und 6. Option: JS-Wege

Warnung Diese beziehen sich auf das Ändern des <head>Elements der Seite. Möglicherweise wird dies von den Systemadministratoren der Institution nicht zugelassen. Es wird daher empfohlen, sie zuerst um Erlaubnis zu bitten.

Okay, wenn die Erlaubnis erteilt wurde, ist die Strategie der Zugriff auf die <head>. Wie? JavaScript-Methoden.

4. Option: neu `<link>`an`<head>`

Dies ist eine andere Version der 2. Option. Verwenden Sie ein externes Stylesheet für das <head>Tag, dh die Verwendung des <link>Elements außerhalb des Bereichs, auf den Sie Zugriff haben ( dh auf der Site nicht innerhalb des bodyTags und ja innerhalb des headTags). Diese Lösung entspricht den oben genannten Empfehlungen von MDN und w3schools zur Lösung der zweiten Option. Ein neues LinkObjekt wird erstellt.

Um die Angelegenheit durch JS zu lösen, gibt es viele Möglichkeiten, aber an den folgenden Codelines zeige ich eine einfache.

Testen

Ich habe es hier getestet (Desktop-Umgebung, in einem Browser) und es funktioniert für mich. Erstellen Sie eine Datei f.html:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
    <script>
        // JS code here
    </script>
</body>
</html>

Innerhalb des scriptTags:

var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);

Und dann in der CSS-Datei, im selben Verzeichnis, aufgerufen bar.css(wie bei der 2. Option):

.test1 { 
    color: green;
};

Wie ich bereits sagte: Dies sieht nur dann möglich aus, wenn Sie eine CSS-Datei irgendwo im Institutionssystem hochladen.

5. Option: neu `<style>`am`<head>`

Verwenden Sie ein neues internes Stylesheet für das <head>Tag, dh ein neues <style>Element außerhalb des Bereichs, auf den Sie Zugriff haben ( dh auf der Site, nicht innerhalb des bodyTags und ja innerhalb des headTags). Ein neues StyleObjekt wird erstellt.

Dies wird durch JS gelöst. Ein einfacher Weg wird im Folgenden demonstriert.

Testen

Ich habe es hier getestet (Desktop-Umgebung, in einem Browser) und es funktioniert für mich. Erstellen Sie eine Datei foobar.html:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
    <script>
        // JS code here
    </script>
</body>
</html>

Innerhalb des scriptTags:

var newStyle = document.createElement("style");
newStyle.innerHTML = 
    "h1.test1 {"+
        "color: green;"+
    "}";
document.getElementsByTagName("head")[0].appendChild(newStyle);

6. Option: Verwenden eines vorhandenen `<style>`auf`<head>`

Verwenden Sie ein vorhandenes internes Stylesheet für das <head>Tag, dh ein <style>Element außerhalb des Bereichs, auf den Sie Zugriff haben ( dh auf der Site, nicht innerhalb des bodyTags und ja innerhalb des headTags), falls vorhanden. Ein neues StyleObjekt wird erstellt oder ein CSSStyleSheetObjekt wird verwendet (im Code der hier verwendeten Lösung).

Dies ist unter bestimmten Gesichtspunkten riskant. Erstens , weil es möglicherweise kein <style> Objekt gibt. Abhängig von der Art und Weise, wie Sie diese Lösung implementieren, erhalten Sie möglicherweise eine undefinedRückgabe (das System verwendet möglicherweise ein externes Stylesheet ). Zweitens , weil Sie die Arbeit des Systemdesign-Autors bearbeiten (Autorenprobleme). Drittens , weil dies in der IT-Sicherheitspolitik Ihrer Institution möglicherweise nicht zulässig ist. Bitten Sie daher um Erlaubnis, dies zu tun (wie bei anderen JS-Lösungen) .

Angenommen, die Erlaubnis wurde erneut erteilt:

Sie müssen einige Einschränkungen der auf diese Weise verfügbaren Methode berücksichtigen : insertRule(). Die vorgeschlagene Lösung verwendet das Standardszenario und eine Operation am ersten stylesheet, falls vorhanden.

Testen

Ich habe es hier getestet (Desktop-Umgebung, in einem Browser) und es funktioniert für mich. Erstellen Sie eine Datei foo_bar.html:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 class="test1">Hello</h1>
    <h1 class="test2">World</h1>
    <script>
      // JS code here
    </script>
  </body>
</html>

Innerhalb des scriptTags:

function demoLoop(){ // remove this line
    var elmnt = document.getElementsByTagName("style");
    if (elmnt.length === 0) {
        // there isn't style objects, so it's more interesting create one
        var newStyle = document.createElement("style");
        newStyle.innerHTML =
            "h1.test1 {" +
                "color: green;" +
            "}";
        document.getElementsByTagName("head")[0].appendChild(newStyle);
    } else {
        // Using CSSStyleSheet interface
        var firstCSS = document.styleSheets[0];
        firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
    }
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too

Ein anderer Ansatz für diese Lösung ist die Verwendung von CSSStyleDeclarationObjekten (Dokumente bei w3schools und MDN ). Angesichts des Risikos, vorhandene Regeln im CSS des Systems zu überschreiben, ist dies möglicherweise nicht interessant.

7. Option: Inline-CSS

Verwenden Sie Inline-CSS . Dies löst das Problem, obwohl abhängig von der Seitengröße (in Codezeilen) die Wartung (durch den Autor selbst oder eine andere zugewiesene Person) des Codes sehr schwierig sein kann.

Abhängig vom Kontext Ihrer Rolle in der Institution oder den Sicherheitsrichtlinien für das Websystem ist dies möglicherweise die einzigartige verfügbare Lösung für Sie.

Testen

Erstellen Sie eine Datei _foobar.html:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 style="color: green;">Hello</h1>
    <h1 style="color: blue;">World</h1>    
  </body>
</html>

Die Frage von Gagan genau beantworten

Wie soll ein Browser CSS rendern, das nicht zusammenhängend ist?

Soll es eine Datenstruktur mit allen CSS-Stilen auf einer Seite generieren und diese zum Rendern verwenden?

Oder wird mit Stilinformationen in der angezeigten Reihenfolge gerendert?

(Zitat angepasst)

Für eine genauere Antwort schlage ich Google diese Artikel vor:

Funktionsweise von Browsern: Hinter den Kulissen moderner Webbrowser
Renderbaumkonstruktion, Layout und Farbe
Was bedeutet es, eine Webseite zu „rendern“?
So funktioniert das Rendern von Browsern - hinter den Kulissen
Rendern - HTML Standard
10 Rendern - HTML5

Igor Santos
quelle

+1 Gute Idee, einschließlich Skript-Tags und Javascript, um CSS hinzuzufügen, vollkommen legales HTML für dumme WYSIWYG CMS-Editoren

Djolf

1

Ja, kann es. Ich habe auf Mozillas Seite nachgesehen. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

Schlitz
quelle

Verwenden von <style> -Tags im <body> mit anderem HTML

Antworten:

1. Option: Fragen Sie Ihren Systemadministrator

2. Option: `<link>`ein`<body>`

Testen

3. Option: `<style>`auf`<body>`

4., 5. und 6. Option: JS-Wege

4. Option: neu `<link>`an`<head>`

Testen

5. Option: neu `<style>`am`<head>`

Testen

6. Option: Verwenden eines vorhandenen `<style>`auf`<head>`

Testen

7. Option: Inline-CSS

Testen

Die Frage von Gagan genau beantworten

Verwenden von <style> -Tags im <body> mit anderem HTML

Antworten:

1. Option: Fragen Sie Ihren Systemadministrator

2. Option: <link>ein<body>

Testen

3. Option: <style>auf<body>

4., 5. und 6. Option: JS-Wege

4. Option: neu <link>an<head>

Testen

5. Option: neu <style>am<head>

Testen

6. Option: Verwenden eines vorhandenen <style>auf<head>

Testen

7. Option: Inline-CSS

Testen

Die Frage von Gagan genau beantworten

2. Option: `<link>`ein`<body>`

3. Option: `<style>`auf`<body>`

4. Option: neu `<link>`an`<head>`

5. Option: neu `<style>`am`<head>`

6. Option: Verwenden eines vorhandenen `<style>`auf`<head>`