CSS-Inhaltseigenschaft: Ist es möglich, HTML anstelle von Text einzufügen?

246

Ich frage mich nur, ob es irgendwie möglich ist, die CSS- contentEigenschaft dazu zu bringen, HTML-Code anstelle eines Strings :beforeoder :aftereines Elements wie dem folgenden einzufügen :

.header:before{
  content: '<a href="#top">Back</a>';
}

das wäre ziemlich praktisch ... Es könnte über Javascript gemacht werden, aber die Verwendung von CSS würde das Leben wirklich einfacher machen :)

Zanona
quelle
@ Kaiido OMG ... es ist nicht, habe das Datum der Frage nicht überprüft, ich habe auf Ihre Antwort verwiesen ... wirklich leid, wird diese beiden Kommentare löschen :)
Ason

Antworten:

210

Das geht leider nicht. Gemäß der Spezifikation :

Der generierte Inhalt ändert den Dokumentbaum nicht. Insbesondere wird es nicht an den Dokumentensprachprozessor zurückgemeldet (z. B. zum erneuten Analysieren).

Mit anderen Worten bedeutet dies für Zeichenfolgenwerte, dass der Wert immer wörtlich behandelt wird. Es wird unabhängig von der verwendeten Dokumentsprache niemals als Markup interpretiert.

Verwenden Sie beispielsweise das angegebene CSS mit dem folgenden HTML-Code:

<h1 class="header">Title</h1>

... führt zu folgender Ausgabe:

<a href="#top"> Zurück </a> Titel

BoltClock
quelle
1
stimmte zu, aber wenn Sie sich vorstellen, dass Bilder mit den urlAttributen bereits unterstützt werden, wäre das Hinzufügen eines Links in dieser Perspektive nicht so anders.
Zanona
12
@ludicco: Das liegt daran, dass die Bilder selbst keine DOM-Elemente sind (nicht zählen <img>), sondern nur auf vorhandene Elemente gezeichnet werden. Wenn Sie also Hintergrund- oder Listenbilder anwenden, ändern Sie das DOM nicht wirklich.
BoltClock
1
Ich habe es danke, also denke ich, ich muss diese Idee weitergeben und direkt zu js gehen, Prost
zanona
6
@ Ludicco: Gute Frage. Sogar ich suchte SO in der Hoffnung, dass dies möglich war.
Robin Maben
1
@ Watson: Hab gerade deine Antwort auf die andere Frage gesehen. Du hast recht; Ich sollte in meiner Antwort wahrscheinlich klarstellen, dass Sie kein beliebiges Markup hinzufügen können - Sie müssen url()stattdessen wie bei jedem anderen Bild eine externe Datei über angeben .
BoltClock
54

Wie in den Kommentaren zur Antwort von @ BoltClock fast erwähnt , können Sie in modernen Browsern Pseudoelementen mithilfe von ( url()) in Kombination mit dem <foreignObject>Element von svg tatsächlich ein HTML-Markup hinzufügen .

Sie können entweder eine URL angeben, die auf eine tatsächliche SVG-Datei verweist, oder sie mit einer dataURI-Version ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup)) erstellen.

Beachten Sie jedoch, dass es sich meistens um einen Hack handelt und dass es viele Einschränkungen gibt:

  • Sie können keine externen Ressourcen aus diesem Markup laden (kein CSS, keine Bilder, keine Medien usw.).
  • Sie können kein Skript ausführen.
  • Da dies nicht Teil des DOM ist, besteht die einzige Möglichkeit, es zu ändern, darin, das Markup als dataURI zu übergeben und dieses dataURI in zu bearbeiten document.styleSheets. für diesen Teil DOMParserund XMLSerializerkann helfen .
  • Während der gleiche Vorgang das Laden von URL-codierten Medien in <img>Tags ermöglicht, funktioniert dies in Pseudoelementen nicht (zumindest ab heute weiß ich nicht, ob es irgendwo angegeben ist, wo es nicht angegeben werden sollte, also kann es sein eine noch nicht implementierte Funktion sein).

Nun eine kleine Demo eines HTML-Markups in einem Pseudoelement:

/* 
**  original svg code :
*
*<svg width="200" height="60"
*     xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
*	<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
*		I am <pre>HTML</pre>
*	</div>
* </foreignObject>
*</svg>
*
*/
#log::after {
  content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}
<p id="log">hi</p>

Kaiido
quelle
Ich bin auf Ihre Antwort gestoßen und sie ist eine Lösung für einige meiner eigenen Probleme. Können Sie erklären, wie eine URL formatiert wird, die auf eine Datei verweist? Ich habe es versucht url('/relativePathToMySvg/mySvg.svg')und es hat nicht funktioniert
Frank
@Frank, gemäß Spezifikation, wird die Verwendung eines relativen Pfads relativ zum Pfad Ihrer CSS-Datei sein, dh wenn Sie Ihre CSS-Datei in haben /root/css/yourFile.css, zeigt ein relativer funcIRI-ähnlicher Wert yourFile.svgauf /root/css/yourFile.svg/. Aber ich denke, ich erinnere mich, dass einige frühere UA einen Fehler hatten und ihn relativ zur baseURI des Dokuments machten. Der sicherste Weg ist also, nur den absoluten Pfad zu verwenden.
Kaiido
1
@ BoltClock, wirklich? Es tut mir wirklich leid. Ich bin auf diese 6 Jahre alte Frage von einer anderen gekommen und hatte das Gefühl, dass ich sie als Update veröffentlichen musste, aber vielleicht sollte ich noch klarer sein, dass Ihre Antwort gut ist und vor 6 Jahren definitiv richtig war? Oder wenn Sie einige gute Formulierungen haben, die als Überschrift passen könnten, können Sie meine Antwort jederzeit bearbeiten.
Kaiido
1
Nett. Ich habe verwendet: content: url('../../images/como-funciona.svg');und es funktioniert gut
Eliut Islas
Hier ist eine frühere Post, die eine Antwort von mir hat, dass taucht ein wenig tiefer in das Thema: ist-es-möglich-to-display-ein-html-Dokument-oder-html-Fragment-at-CSS-Inhalte
Ason
7

In CSS3-Medien ist dies mit position: running()und möglich content: element().

Beispiel aus dem Entwurf des CSS-generierten Inhalts für ausgelagerte Medienmodule :

@top-center {
  content: element(heading); 
}

.runner { 
  position: running(heading);
}

.runner kann ein beliebiges Element sein und headingist ein beliebiger Name für den Slot.

BEARBEITEN: Zur Verdeutlichung gibt es im Grunde keine Browserunterstützung, daher war dies hauptsächlich als zukünftige Referenz gedacht / zusätzlich zu den bereits gegebenen "praktischen Antworten".

Sol
quelle
Hey, kannst du das etwas näher erläutern? Ich interessiere mich für Ihre Theorie, kann sie aber anscheinend nicht zum Laufen bringen. Wie würde ich beispielsweise ein Ankertag mit dieser Methode oder ein div einfügen?
Neil
Das Problem ist, dass es derzeit im Grunde keine Browserunterstützung gibt, aber dedizierte HTML-Renderer sie gemäß der Spezifikation implementieren. Die nächste nicht so gute Nachricht ist, dass es keine gute Open Source-Implementierung zu geben scheint. Die meisten sind SaaS-Produkte wie princexml.com .
Sol