Haz visible el title del head y los estilos de la página con Css 28.9.12
Cómo mostrar el title de una web, los estilos o cualquier elemento del head en el body con CSS
Haz visible el title del head y los estilos de la página con Css
A raíz del artículo sobre cómo "Mostrar los estilos y scripts de forma automática con Css" pensé que quizás hubiese otra forma de hacerlo extensivo a otros elementos del <head> como puede ser el título de la página <title> y de una manera más sencilla que la descrita en ese artículo.
Y sí. Haberla hayla.
Pero antes de mostrarte el cómo, creo necesario hacer primero un pequeño repaso a la propiedad que lo hace posible para entender su funcionamiento.
La propiedad Display
La propiedad display es una de los pilares de Css (modelo de cajas) y de las más complejas por la cantidad de valores tan diferentes que admite.
Display especifica el tipo de caja del elemento, ya sea por declaración expresa en los estilos o por la que le corresponde por defecto.
Básicamente* nos encontramos con tres tipos: cajas o elementos de bloque, de línea y inexistentes o no generadas, que se corresponden con las declaraciones:
display: block;
display: inline;
display: none;
*Dicho de forma superficial, resumida, incompleta y poco rigurosa con la especificación.
Cajas no generadas. Display: none
Vamos a dejar a un lado todos los valores de display para centrarnos en none. Del que dice la especificación:
Este valor provoca que un elemento no genere ninguna caja en la estructura formada (es decir, el elemento no tiene ningún efecto sobre la composición del layout). Los elementos descendientes tampoco generan cajas; este comportamiento no puede alterarse poniendo la propiedad 'display' a los descendientes.
Por favor advierta que un valor 'none' para display no crea una caja invisible; lo que hace es que no crea ninguna caja en absoluto.
Head: Elemento no generado
La etiqueta head es una de las que su valor por defecto para dispaly es none. Por lo tanto no deja rastro de su existencia ni se manifiesta (tampoco lo contenido en ella) al renderizarse la página. En todos los media, ya sean pantallas, medios paginados (i.e. imprimir), aural (i.e. lectores de voz). Puedes verlo en esta captura del inspector de chrome:
Mostrar el title de la página
A estas alturas seguro que ya has caído tú solo en cómo hacer para que el title de tu página se muestre. Sólo tienes que incluir en tus estilos lo siguiente:
head {
display: block;
}
head title {
display: block;
/*añadimos unos estilos para resaltarlo*/
background: #D6D5D5;
font-size: 2.5rem;
color: #444;
text-shadow: 0 0 1px #F5F5F5;
}
Demo
Como ves, sólo hemos tenido que cambiar el valor "none" que por defecto tiene la etiqueta head y su contenido en la propiedad "display" por "block", tanto en ella como en su hijo title para que lo muestre.
Advierte que como con cualquier otro elemento de la página también rige en ella el orden del flujo del documento. Aparecerá antes que el contenido del "body".
Estilos editables por el usuario
Una vez que ya podemos mostrar cualquier elemento del head, el mostrar los estilos y además dar la posibilidad de que los usuarios puedan editarlos y que los cambios se muestren al momento es sencillo. Sólo se requieren dos pasos:
Contenteditable="true"
En primer lugar hacer uso del atributo Contenteditable en la etiqueta style que deseemos que sea modificable:
<style type="text/css" contenteditable="true">
/*modificalo: puedes añadir o suprimir estilos*/
</style>
Style {display: block;}
Y a continuación usar la misma técnica que con el head en los estylos:
head {
display: block;
}
head style {
display: block;
/*ponlos guapos*/
font-family: monospace;
white-space: pre-wrap;
margin: 1rem 15%;
border: 3px solid red;
}
Voilá!. Los usuarios de la página ya tienen a la vista los estilos y la capacidad de modificar cualquier declaración. Añadiendo o quitando reglas, declaraciones o valores. Claro que si quitan la declaración display: block; del selector head o head style... a recargar la página.
Y como te señalaba antes en el apartado de mostrar el "title", el orden de aparición de los hijos de "head" es el del flujo del html: se verá primero el que primero esté escrito.
DemoY si te sientes generoso y quieres mostrar todo lo que tienes en la cabeza, no tienes que complicarte, sólo usa el comodín:
head, head * {
display: block;
}
Y siempre podrás utilizar los pseudoelementos ::before y ::after para añadir las etiquetas correspondientes y sus cierres
Bonus final
Saca una página 404 de este blog y observa...
Mira
En este nuevo thema del blog. Arriba, junto a los hexágonos del menú. Cambia el 18 por cualquier otro valor. O añade alguna regla o declaración...
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
es muy interesante, sabia lo del head y junto con el Contenteditable es muy útil.
ResponderEliminar