Proprietà del contenuto CSS: è possibile inserire HTML anziché Text?

246

Mi chiedo solo se è possibile in qualche modo fare in modo che la contentproprietà CSS inserisca il codice html invece della stringa :beforeo di :afterun elemento come:

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

questo sarebbe abbastanza utile ... Potrebbe essere fatto tramite Javascript ma l'uso di CSS per questo renderebbe davvero le vite più facili :)

— zanona
fonte

@Kaiido OMG ... non lo è, non ho controllato la data della domanda, ho fatto riferimento alla tua risposta ... mi dispiace davvero, eliminerò entrambi questi commenti :)

— Ason,

Risposte:

210

Sfortunatamente, questo non è possibile. Secondo le specifiche :

Il contenuto generato non modifica la struttura del documento. In particolare, non viene restituito al programma di elaborazione del linguaggio dei documenti (ad esempio, per la replica).

In altre parole, per i valori stringa questo significa che il valore viene sempre trattato alla lettera. Non viene mai interpretato come markup, indipendentemente dal linguaggio del documento in uso.

Ad esempio, usando il CSS dato con il seguente HTML:

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

... comporterà il seguente output:

<a href="#top"> Indietro </a> Titolo

— BoltClock
fonte

d'accordo, ma se immagini che abbia già il supporto per le immagini con gli urlattributi, l'aggiunta di un link non sarebbe così diversa in questa prospettiva.

— zanona,

@ludicco: Questo perché le immagini stesse non sono elementi DOM (senza contare <img>), vengono semplicemente disegnate su elementi esistenti, quindi applicando immagini di sfondo o di elenco non stai davvero modificando il DOM.

— BoltClock

capito grazie, quindi penso che dovrò passare questa idea e andare direttamente a js, evviva

— zanona,

@ludicco: bella domanda. Persino stavo cercando SO sperando che ciò fosse possibile.

— Robin Maben,

@watson: ho appena visto la tua risposta all'altra domanda. Hai ragione; Probabilmente dovrei chiarire nella mia risposta che non è possibile aggiungere markup arbitrari: è necessario specificare un file esterno tramite url(), come con qualsiasi altra immagine.

— BoltClock

Come quasi notato nei commenti alla risposta di @ BoltClock, nei browser moderni , puoi effettivamente aggiungere un markup html agli pseudo-elementi usando ( url()) in combinazione con l' <foreignObject>elemento svg .

Puoi specificare un URL che punta a un file svg effettivo o crearlo con una versione dataURI ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

Ma nota che è principalmente un trucco e che ci sono molte limitazioni:

Non è possibile caricare risorse esterne da questo markup (nessun CSS, nessuna immagine, nessun supporto ecc.).
Non è possibile eseguire lo script.
Poiché questo non farà parte del DOM, l'unico modo per modificarlo è passare il markup come dataURI e modificarlo in document.styleSheets. per questa parte, DOMParsere XMLSerializerpuò aiutare .
Mentre la stessa operazione ci consente di caricare file multimediali con codifica URL nei <img>tag, questo non funzionerà in pseudo-elementi (almeno fino ad oggi, non so se è specificato ovunque che non dovrebbe, quindi potrebbe essere una funzionalità non ancora implementata).

Ora, una piccola demo di alcuni markup html in uno pseudo elemento:

/* 
**  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>

Espandi frammento

— Kaiido
fonte

Ho trovato la tua risposta ed è una soluzione ad alcuni dei miei problemi. Puoi spiegare come formattare un URL che punta a un file? Ho provato url('/relativePathToMySvg/mySvg.svg')e non ha funzionato

— Frank

@Frank, per le specifiche, utilizzando un percorso relativo sarà relativo cioè il percorso del vostro file CSS, se hai il file CSS in /root/css/yourFile.css, poi un parente funcIRI come yourFile.svgsarà indicando /root/css/yourFile.svg/. Ma, penso di ricordare che alcuni precedenti UA avevano un bug e lo rendevano relativo alla baseURI del documento. Quindi il modo più sicuro è usare solo il percorso assoluto.

— Kaiido,

@BoltClock, davvero? Mi dispiace davvero per questo. Mi è venuta questa domanda di 6 anni da un altro e ho sentito di doverlo pubblicare come aggiornamento, ma forse dovrei essere ancora più chiaro che la tua risposta è buona ed è stata sicuramente corretta 6 anni fa? Oppure, se hai alcune buone parole che potrebbero adattarsi come intestazione, sentiti libero di modificare la mia risposta.

— Kaiido,

Bello. Ho usato: content: url('../../images/como-funciona.svg');e funziona benissimo

— Eliut Islas

Ecco un post precedente, che ha una mia risposta, che approfondisce un po 'più a fondo l'argomento: è-possibile-visualizzare-un-documento-html-o-html-frammento-at-css-content

— Ason,

Nei supporti paginati CSS3 questo è possibile usando position: running()e content: element().

Esempio dalla bozza del modulo Generato CSS per paged media module :

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

.runner { 
  position: running(heading);
}

.runner può essere qualsiasi elemento ed headingè un nome arbitrario per lo slot.

EDIT: per chiarire, non esiste praticamente alcun supporto per il browser, quindi questo doveva principalmente essere per riferimento futuro / oltre alle "risposte pratiche" già fornite.

— sol
fonte

Ehi, potresti spiegarlo un po 'di più. Sono interessato alla tua teoria ma non riesco a farla eseguire. Come potrei includere, per esempio, un tag anchor usando questo metodo o un div.

— Neil,

il problema è che attualmente non esiste praticamente alcun supporto per il browser, ma i renderer HTML dedicati lo implementano secondo le specifiche. Le prossime non così buone notizie sono che non sembra esserci una buona implementazione open source; la maggior parte sono prodotti SaaS come princexml.com .

— sol