Mostrar los estilos y scripts de forma automática con Css 31.8.12
Mostrar los estilos y scripts de forma automática con Css
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
Kseso
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
Gracias por el tutorial. Me resulta muy útil en tutoriales de mi blog para mostrar fragmentos de código sobre los ejemplos prácticos que publico.
ResponderEliminarSigue así Kseso.
Cual es la utilidad de mostrar el CSS?
ResponderEliminar