El Inspector DOM de Firefox y Mozilla

Entre las nuevas exigencias de mi trabajo, y esta bitácora, mi manejo del XML, XHTML, CSS y demás se está ampliando, y para algunas de esas tareas Firefox es más útil que Safari —si bien Dave Hyatt, jefe del equipo de desarrollo de Safari, en Surfin’ Safari, nos cuenta que la próxima versión será capaz de muchas más cosas—.

En concreto, una cosa que es muy sencilla de hacer con Firefox, y para nada con Safari, es probar cómo quedará un determinado estilo CSS en la página sin necesidad de cambiar ningún archivo, simplemente utilizando el Inspector DOM.

¿Qué significa DOM?

DOM son las siglas en inglés de Modelo del Objeto Documento. Es una forma de describir un documento XHTML (o un documento XML, y por extensión, de documentos HTML válidos) de forma que sea posible acceder a diferentes partes del documento sin necesidad de saber dónde está, ni cuáles son las otras partes que lo componen.

Es necesario disponer de un modelo del documento para poder actuar sobre él con las hojas de estilo CSS, y también para que cualquier otro lenguaje —Java, JavaScript/ECMAScript— pueda manipular el documento —pensemos en HTML dinámico, o menús CSS—.

¿Qué son las CSS?

CSS son las siglas en inglés de Hojas de Estilos en Cascada. Fueron inventadas por Håkon Wium Lie, uno de los fundadores y Jefe de Tecnología de Opera Software, para solucionar el problema de la separación entre la información que se presenta, y el formato en que se presenta.

Se llaman hojas de estilos porque realizan funciones parecidas a las de los estilos de un programa de proceso de textos o de maquetación: contienen información sobre cómo se presentarán diferentes elementos de una página, teniendo en cuenta su clase. Por ejemplo, podemos definir una regla que afecte a los párrafos —marcadores p—, y otra diferente que afecte a las listas no numeradas —marcadores ul—.

Pero también podemos definir, después de una regla general para los marcadores p, una regla para los marcadores p de tipo texto —p.texto en CSS—, que por ejemplo indentara los párrafos de texto en relación a otros párrafos. Es esta aplicación primero de reglas generales, luego de reglas específicas, de ahí la denominación de “estilos en cascada”. Incluso es posible definir estilos en una hoja propia, y que el navegador utilice esos valores en lugar de los valores de la página.

El Inspector DOM de Firefox y Mozilla

En el menú Herramientas de Firefox —no tengo Mozilla a mano, pero supongo que debe andar por un sitio similar— hay una opción denominada Inspector DOM.

Al abrirla, nos aparece una ventana que nos ofrece el DOM de la página actual. Como queremos trabajar con las hojas de estilos (CSS), seleccionamos Stylesheets en el desplegable de la izquierda (click sobre la imagen para ver una versión ampliada):

Después de pasar por ese proceso, esto es lo que vemos (click sobre la imagen para ver una versión ampliada):

La cascada en acción

En la imagen de la página anterior —haz clic sobre ella para que se abra una nueva ventana sólo con ella, para que puedas consultarla al tiempo que lees esta página—, veíamos una serie de reglas. ¿Qué pinta tienen el en Inspector DOM?

Podemos ver que tenemos seleccionada una regla sobre “h1, h2, h3”. Esto corresponde a las etiquetas XHTML <h1>, <h2> y <h3>, y lo que se hace es definirlas todas ellas iguales en dos propiedades: font-family, que define el tipo de letra que se utilizará para mostrar texto enmarcado con dichas etiquetas, y font-weight, que es normal, bold, bolder, lighter o un centenar entre 100 y 900.

Debajo, hay una específica sobre h1. Si pulsamos sobre ella, veremos que el tamaño se define como 4em. En CSS, los tamaños se pueden definir en puntos tipográficos (por ejemplo 12pt), en pixeles (16px), o en función de un valor “base” que se escala según se hace que crezca o decrezca el tamaño de fuentes en pantalla, llamado “em”. De esta forma, se puede definir el tamaño de los diferentes elementos de pantalla de forma relativa, y que todos se escalen proporcionalmente cuando elegimos aumentar o disminuir el tamaño del texto.

También se define otra regla para h1, y es que text-align sea “center”, o lo que es lo mismo, que los textos creados con la cabecera h1 queden centrados.

Lo interesante es que podemos, por un lado, definir propiedades para varios elementos que queremos que se comporten igual —h1, h2, h3 son cabeceras, y es razonable que compartan el mismo tipo de letra—, y luego ir personalizandolos uno por uno.

Vayamos por un momento a la regla body, que es la primera de todas. Allí también se define un tipo de letra, que en este caso coincide con los que está definido para h1, h2 y h3.yengloban todo el contenido que se mostrará en una página XHTML, de modo que al fijar un tipo de letra para body todos los demás elementos heredan ese tipo de letra, salvo que digan otra cosa. Esta es otra forma en la que opera la cascada.

Modificando valores

Bueno, vamos a hacer diferentes experimentos sobre los valores del Inspector.

Por ejemplo, puede interesarnos cambiar el tipo de letra para el texto de la página, no de las cabeceras, para utilizar un tipo de letra con serif(remates tipográficos), para mejorar la legibilidad. Como hemos dicho antes, la regla font-family para toda la página está en la regla body, así que vamos a cambiarla.

En primer lugar, vemos que body está definido como:

‘Lucida Grande’,Verdana,Arial,Sans-Serif

Se define como tipo de letra Lucida Grande (se utiliza el apóstrofe ’ porque el nombre contiene un espacio), pero si no está disponible, se utilizará en su lugar Verdana. Si tampoco estuviera disponible, se utilizaría Arial. Y si ninguna de las tres estuviera disponible, Sans-Serif indica que se utilice el tipo de letra que el navegador haya definido para estilos Sans-Serif.

Haciendo doble clic sobre la regla, podremos editar su contenido, y podríamos cambiarlo por algo como:

‘Hoefler Text’,Georgia,Serif

Una vez que hemos realizado un cambio, la página automáticamente adopta los cambios:

Lo más interesante de todo esto es que, por ejemplo, podemos probar cambios en el diseño de la página sin tocar los archivos .css donde están las reglas, ni el XHTML o el PHP de base, simplemente jugando con los valores de las reglas. Luego, una vez satisfechos, no hay más que trasladar las nuevas reglas, o las modificaciones de las existentes, y estaremos razonablemente seguros de que nos vamos a “romper” nada.