soy Kseso y esto EsCSS

Mostrar los estilos y scripts de forma automática con Css

Mostrar los estilos y scripts de forma automática con Css

·Por Kseso ✎ 2

La potencia y capacidad de sorpresa de lo que se puede lograr con un par de reglas Css no ha llegado a su fin. Y no sólo con todo lo nuevo de Css 3. La versión, o como ahora la llaman, nivel 2.1 tampoco está agotada.

Mostrar los estilos Css con Css

Y no me refiero a aplicar estilos a los propios estilos. No. De lo que trata este artículo es sobre cómo mostrar el contenido de la etiqueta <style> </style> de forma automática usando sólo css. Sin necesidad de copiar y pegar.

El secreto está en "content"

Sólo es necesario recurrir a los pseudoelementos ::before y ::after de la siguiente manera:

style { display: block; white-space: pre; font-family: monospace; color: #219; margin-bottom: 2em; } style:before { content: "<style type=\"" attr(type)"\"" "\ rel=\"" attr(rel) "\">"; } style:after { content: "<\/style>"; }

Muestra los scripts

Y si lo que quieres es mostrar el contenido de los scripts con un par de reglas Css, esto es lo que necesitas:

script { display: block; white-space: pre; font-family: monospace; color: #a50; } script:before { content: “<script src=\”“ attr(src) “\” type=\”“ attr(type) “\”>”; } script:after { content: “</script>”; }

Demo

Aquí tienes una demos en codepen para que lo veas funcionando. Fíjate que si el pen lo ves a full page se muestran los estilos del ejemplo y los utilizados por la página para mostrar el pen

Creditos y reconocimientos

Basado en un artículo de Ilmari Heikkinen publicado en html5rocks

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso