La extensión de Firefox Web Developer incluye en su barra de herramientas un menú específico que facilita la visualización, información y edición de las Hojas de Estilo en Cascada, CSS, vinculadas a una página web. Las posibilidades de experimentación, que respecto a las CSS, ofrece esta herramienta son amplias y de notable interés para el diseño y desarrollo web. Visualizar una página sin ninguna especificación sobre estilo, acceder a todo el desarrollo de las CSS asociadas a una página o vincular una Hoja de Estilo en Cascada, desarrollada por el usuario, a una página web cualquiera son algunas de las posibilidades que ofrece la extensión de Firefox Web Developer. (Celia Crespo / CDTinternet.net)

Funcionalidades de Web Developer respecto a las CSS:

La primera opción del menú CSS permite desactivar y activar estilos bien de manera general “desactivar todos los estilos”, bien de manera parcial. Se pueden desactivar, y por tanto visualizar una página, sin los estilos que por defecto define el navegador, sin las hojas de estilo incrustadas, que se definen en la cabecera de un documento HTML y se aplican a la totalidad del mismo y sin las hojas de estilo en linea, con las que se aplica el estilo directemente, dentro de las etiquetas HTML.

Por otro lado una página web puede tener enlazadas hojas de estilo distintas para que el usuario elija cual de ellas aplica a la hora de visualizar la página, Firefox permite esta selección al usuario a través del menú “Ver” “Estilo de página”.

Todas estas opciones permiten reconocer y facilitan información sobre los métodos utilizados para definir los estilos CSS vinculados a una página web. En este sentido se puede separar, de manera muy rápida, la estructura y la presentación de un sitio web.

Mediente “Ver codigo CSS” Web Developer genera un documento con todas las CSS vinculadas a una página web. Sin embargo, si sólo se desea conocer las especificaciones sobre estilo de un elemento concreto de la página. A su vez, “Ver información sobre estilos” permite seleccionar un elemento concreto de la página y ver las especificaciones concretas que sobre estilo tiene ese elemento.

Web Developer da al usuario amplias posibilidades de edición a partir de las CSS asociadas a páginas web. Mediante “editar código CSS” se puede modificar cualquiera de los estilos definidos para una página y a continuación visualizarla con las modificaciones introducidas. En éste sentido “Añadir estilo personal” permite vincular una hoja de estilo desarrollada por el usuario a una página web con la opción.

Hojas de Estilo en Cascada:

Las Hojas de Estilo en Cascada, Cascading Style Sheets o CSS son un lenguaje de diseño estándar para la Web. Define los colores, la tipografía, el tamaño y la ubicación de todos los elementos e imágenes que integran una página web. El W3C da la siguiente definición de las CSS: “es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos”. Las Hojas de estilo en Cascada, CSS, definen el formato de documentos estrictos de HTML y XML y separan el contenido de la presentación de las páginas. Así los contenidos estarán desarrollados en un documento HTML, sin embargo la apariencia de los mismos se establece mediante el archivo de las CSS.

(Continuaremos analizando otros aspectos de esta extensión en próximos artículos)

---

Enlaces de interés:

Firefox Add-ons. Sitio web oficial para la descarga de la extensión Web Developer

Firefox Add-ons. Sitio web oficial para la descarga de extensiones y temas de Firefox.

W3C: Guia Breve de CSS


Noticias Relacionadas:

Web Developer la extensión imprescindible para el desarrollo web (I)

Web Developer la extensión imprescindible para el desarrollo web (III)

Web Developer la extensión imprescindible para el desarrollo web (IV)

Web Developer la extensión imprescindible para el desarrollo web (V)

Web Developer la extensión imprescindible para el desarrollo web (VI)

SeoQuake: Extensión de Firefox sobre posicionamiento en Google y Yahoo! y MSN

Las extensiones de Firefox que dan nombre al color (I)

Selección de las mejores extensiones de Firefox para el diseño y desarrollo web