Indispensables.

Si recién arrancas con CSS quiero ayudarte a encontrar algunas herramientas. Estas van a serte de suma utilidad en el proceso de aprendizaje y desarrollo.

Cualquiera que este en un nivel avanzado puede saltearse este post. Lo encontrara tedioso y aburrido.

Firebug.

La herramienta imprescindible para cualquier diseñador Web. Disponible para Firefox y Google Chrome.

Podemos ver con mucha comodidad como esta maquetada una Web. Y por supuesto lo que nos interesa la hoja de estilo en cascada o CSS.

Al pasar el ratón sobre el nombre de un elemento en la ficha HTML, este queda resaltado en la pagina. Vemos el área de contenido, los margenes y el relleno mediante regiones de color.

En la parte derecha de la ficha HTML podemos ver el código CSS correspondiente. Las reglas que se muestran en la ficha estilo se enumeran en orden inverso de especificidad. Es decir, la primera es la regla mas especifica que se aplica al elemento seleccionado. La segunda es la siguiente mas especifica. Y así sucesivamente.

Se puede inspeccionar cualquier elemento haciendo click derecho sobre el. Y luego seleccionando Inspeccionar Elemento.

Si hacemos click en el pequeño icono con un puntero señalando una caja, que encontramos junto al icono de Firebug, cambiamos al modo de Inspección. Conforme nos movemos por la pagina, se marcan los distintos elementos. Y cuando hacemos click en uno comienza su inspección.

Cuando queremos analizar como interaccionan las propiedades entre si, podemos desactivar las que consideremos pertinentes.

La ficha Maquetación nos dirá las dimensiones y tamaños exactos de los componentes del modelo de cajas de un elemento. Alto, ancho, relleno o margenes que se mostraran en pixeles.

Web Developer Toolbar.

Segundo instrumento esencial de desarrollo. Muchas de las opciones de trabajo con CSS están disponibles en Firebug. Pero es interesante la opción que tiene de desactivar:

• Estilos Incrustados.
• Hojas de Estilo entrelazadas.
• Estilos en linea.
• Estilos por defecto del navegador.

En el menú Información hay opciones muy interesantes. Tenemos la posibilidad de mostrar la información de clase e ID del documento. También el orden de los DIV o un resumen de los colores usados.

Con el menú Resaltar, podemos resaltar diversas clases de elementos:

• Elementos de bloque.
• Desaprobados.
• Posicionados.
• Tablas.
• Y mucho mas.

Sin duda es un menú que a simple vista parece simple. Pero es muy potente cuando lo exploramos en profundidad.

El menú Herramientas proporciona, validadores, comprobadores de errores y consolas de depuración. Las mas destacadas son:

• Validar Archivo Local HTML.
• Validar Archivo Local CSS.

Esto es fantástico para validar paginas alojadas en un servidor detrás de un cortafuegos o fuera del disco duro de nuestro equipo. Es decir paginas que no están en la Web publica y que, por lo tanto, el servicio de validación no puede alcanzar. Con la validación local esto ya no sera un problema.

Internet Explorer Developer Toolbar.

Útil de instalar si utilizamos IE7, que en su versión posterior no funciona. Concluida la instalación accederemos a ella a través del menú Herramientas que esta en la esquina superior derecha del navegador. No el menú Herramientas del browser. Al desplegarla veremos opciones similares a las de Web Developer Toolbar.

Una opción importante, de estas herramientas es que se puede alternar con facilidad entre mostrar los estilos interpretados y solo los declarados al activar la casilla de verificación Show Default Styles Values.

También podemos usar Show Read Only Properties para ver todos los aspectos del DOM del elemento seleccionado.

El menú View cuenta con una opción muy útil llamada CSS Selector Matches. Se abrirá una nueva ventana que muestra las reglas CSS y las veces que cada una coincide con los elementos del documento.

Dragonfly para Opera.

Si sos fanático de Opera. Esta es una buena alternativa.

El diseño es muy similar a Firebug y varia en cosas muy simples. No hay demasiado para decir.

Inspector Web para Safari.

Se activa yendo a Preferencias de Safari -> Avanzado. Ahí hay que activar la casilla de verificación que dice “Mostrar el menú Desarrollo en la barra de menús”. Hecho esto hay que activar el inspector Web presionando Control-Mayus-I.

Al igual que en Firebug lo que aparece no es lo que se declaro, ya que las propiedades abreviadas se expanden en propiedades individuales.

Selectoracle

Esta herramienta a mi modo de ver es GE-NIAL.

Lo que hace es traducir selectores validos. Sin importar que tan complejos sean. Por ejemplo si tenemos:

body > ol > li p;
:not(a);
p:not(.section);
body > h2:not(:first-of-type):not(:last-of-type);
ul li:nth-child(2n+3):not(:last-child);
ol li:nth-child(-3n+9);
ol li:nth-child(7n-3);
button:not([DISABLED]);
html|*:not(:link);

Y hacemos click en el botón Explain This!

Obtendremos lo siguiente:

Selector 1: body > ol > li p

Selecciona cualquier elemento p que es descendiente de un elemento li que es hijo de un elemento ol que es hijo de un elemento body.

Selector 2: *:not(a)

Selecciona cualquier elemento que no sea un elemento a.

Selector 3: p:not(.section)

Selecciona cualquier elemento p sin un atributo class que contiene la palabra section.

Selector 4: body > h2:not(:first-of-type):not(:last-of-type)

Selecciona cualquier elemento h2 que no es un primer hijo de su tipo y que no es un último hijo de su tipo que es hijo de un elemento body.

Selector 5: ul li:nth-child(2n+3):not(:last-child)

Selecciona cualquier elemento li que es un hijo de número impar empezando por el tercero hijo y que no es un último hijo que es descendiente de un elemento ul.

Selector 6: ol li:nth-child(-3n+9)

Eric Meyer:

Hojas de estilo de diagnostico. Y el tan conocido reset CSS.

IE9.JS

Es sin duda LA herramienta para conseguir que las versiones de Explorer que van de la 5 a la 8, gestionen CSS y HTML como si fuera el 9.

Disponible para utilizar y bajar de aquí.

Sería agradable si llegaste hasta el final de esto, y conoces alguna mas para aportar. Lo digas en los comentarios! Las devoluciones son muy importantes aquí!