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