Propiedad de contenido CSS: ¿es posible insertar HTML en lugar de texto?


246

Solo me pregunto si de alguna manera es posible hacer que la contentpropiedad CSS inserte código html en lugar de una cadena :beforeo :afterun elemento como:

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

esto sería bastante útil ... Se podría hacer a través de Javascript, pero usar CSS para esto realmente facilitaría la vida :)


@Kaiido OMG ... no lo es, no verifiqué la fecha de la pregunta, me referí a tu respuesta ... realmente lo siento, eliminaré ambos comentarios :)
Ason

Respuestas:


210

Desafortunadamente, esto no es posible. Por la especificación :

El contenido generado no altera el árbol de documentos. En particular, no se retroalimenta al procesador de lenguaje de documentos (por ejemplo, para volver a analizar).

En otras palabras, para los valores de cadena esto significa que el valor siempre se trata literalmente. Nunca se interpreta como marcado, independientemente del idioma del documento en uso.

Como ejemplo, usando el CSS dado con el siguiente HTML:

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

... dará como resultado la siguiente salida:

<a href="#top"> Volver </a> Título


1
estuvo de acuerdo, pero si imagina que ya tiene soporte para imágenes con los urlatributos, agregar un enlace no sería tan diferente en esta perspectiva.
zanona

12
@ludicco: Eso se debe a que las imágenes en sí mismas no son elementos DOM (sin contar <img>), solo se están dibujando en elementos existentes, por lo que al aplicar imágenes de fondo o de lista no estás modificando realmente el DOM.
BoltClock

1
lo tengo gracias, así que creo que tendré que pasar esta idea e ir directamente a js,
salud

66
@ludicco: Buena pregunta. Incluso estaba buscando a través de SO con la esperanza de que esto fuera posible.
Robin Maben

1
@watson: Acabo de ver tu respuesta a la otra pregunta. Tienes razón; Probablemente debería aclarar en mi respuesta que no puede agregar un marcado arbitrario; en su lugar, debe especificar un archivo externo url(), como con cualquier otra imagen.
BoltClock

54

Como casi se señaló en los comentarios a la respuesta de @ BoltClock, en los navegadores modernos , en realidad puede agregar un marcado html a pseudoelementos usando el ( url()) en combinación con el <foreignObject>elemento svg .

Puede especificar una URL que apunte a un archivo svg real o crearla con una versión dataURI ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

Pero tenga en cuenta que es principalmente un hack y que hay muchas limitaciones:

  • No puede cargar ningún recurso externo desde este marcado (sin CSS, sin imágenes, sin medios, etc.).
  • No puedes ejecutar el script.
  • Como esto no formará parte del DOM, la única forma de alterarlo es pasar el marcado como dataURI y editar este dataURI document.styleSheets. para esta parte, DOMParsery XMLSerializerpuede ayudar .
  • Si bien la misma operación nos permite cargar medios codificados con URL en las <img>etiquetas, esto no funcionará en pseudoelementos (al menos a partir de hoy, no sé si se especifica en algún lugar que no debería, por lo que puede ser una característica aún no implementada).

Ahora, una pequeña demostración de algunas marcas html en un 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>


Encontré su respuesta, y es una solución a algunos de mis propios problemas. ¿Puedes explicar cómo formatear una URL que apunta a un archivo? Lo intenté url('/relativePathToMySvg/mySvg.svg')y no funcionó
Frank

@Frank, según especificaciones, utilizando una ruta relativa será relativo a decir, el camino de su archivo css, si usted tiene su archivo css en /root/css/yourFile.css, a continuación, un pariente funcIRI como yourFile.svgse señala a /root/css/yourFile.svg/. Pero, creo recordar que algunos UA anteriores tenían un error y lo hicieron en relación con la baseURI del documento. Entonces, la forma más segura es usar la ruta absoluta.
Kaiido

1
@BoltClock, ¿en serio? Realmente lo siento por eso. Llegué a esta pregunta de hace 6 años por otra y sentí que tenía que publicarla como una actualización, pero tal vez debería ser aún más claro que su respuesta es buena, y definitivamente fue correcta hace 6 años. O si tiene algunas palabras buenas que podrían encajar como encabezado, no dude en editar mi respuesta.
Kaiido

1
Agradable. Solía: content: url('../../images/como-funciona.svg');y funciona bien
Eliut Islas

Aquí hay una publicación anterior, que tiene una respuesta mía, que profundiza un poco más en el tema: es-es-posible-mostrar-un-documento-html-o-html-fragment-at-css-content
Ason

7

En los medios paginados CSS3 esto es posible usando position: running()y content: element().

Ejemplo del contenido generado por CSS para el borrador del módulo de medios paginado :

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

.runner { 
  position: running(heading);
}

.runner puede ser cualquier elemento y headinges un nombre arbitrario para la ranura.

EDITAR: para aclarar, básicamente no hay soporte para el navegador, por lo que esto estaba destinado principalmente para referencia futura / además de las 'respuestas prácticas' ya dadas.


Oye, ¿podrías explicar esto un poco más? Estoy interesado en su teoría, pero parece que no puedo ejecutarla. ¿Cómo incluiría, por ejemplo, una etiqueta de anclaje utilizando este método o un div.
Neil

El problema es que actualmente no hay básicamente compatibilidad con el navegador, pero los renderizadores HTML dedicados lo implementan según las especificaciones. La próxima noticia no tan buena es que no parece haber una buena implementación de código abierto; la mayoría son productos SaaS como princexml.com .
sol
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.