viernes, 3 de febrero de 2012

Qué estilo CSS está afectando a una etiqueta o elemento HTML: Firebug (extensión de Firefox).











Hay proyectos web que por su envergadura pueden ser bastante complicados de modificar o depurar. Esto también es así si hablamos de estilos, puesto que podemos encontrarnos con varios archivos CSS, herencia, etc.

Os voy a hablar de una herramienta que nos va a ayudar enormemente y que nos permitirá ahorrarnos bastante tiempo probando y buscando entre hojas de estilo. Esa herramienta realmente es una extensión para Mozilla Firefox que se llama Firebug y es muy conocida en el mundo de la programación web. Podéis encontrar información e instalarla en la siguiente URL:



Las funcionalidades de esta aplicación son muy amplias. Como se describe en dicha web, aparte de inspeccionar y modificar el estilo de una página web, nos permite depurar JavaScript, analizar por ejemplo el tamaño y tiempo de carga de distintos elementos como imánges, etc.

Pero quizás la más útil en general sea la inspección de estilos CSS. Veamos un ejemplo:

Primero abrimos la página en cuestión con Firefox (yo he escogido http://www.linuxfoundation.org/) y pulsamos en el icono siguiente:




A continuación seleccionamos el elemento a inspeccionar. Se mostrará un rectángulo azul indicando el elemento seleccionado:














Abajo nos aparecerán dos paneles. En el de la izquierda se mostrará el código html simplificado (mostrando solo las etiquetas sin el contenido) a excepción del elemento seleccionado, del que se mostrará todo su código.















En el panel de la derecha está lo que más nos interesa, que son los estilos aplicados al elemento seleccionado. Como vemos, nos indica claramente los atributos aplicados según el estilo y también los parámetros aplicados que son heredados.












Los parámetros tachados significan que están redefinidos en algún estilo hijo. A la derecha, en azul, aparece la hoja de estilo y la línea donde se encuentra cada estilo.

Como podréis comprobar, se trata de una herramienta que en cuanto la utilicemos un par de veces se convertirá en imprescindible.






Felinfo: Java, Linux, Virtualización. Open Source.  ©Template Blogger Green by Dicas Blogger .

TOPO