pon css en tu vida!

Aunque no creo que existan datos oficiales, creo que si no todo el mundo, el 95% de los que nos dedicamos al mundo web utilizamos Firebug.
Personalmente, ¡no soy capaz de imaginar cómo maquetar una web sin utilizarlo!

Una de las funcionalidades que echo en falta es poder ver el CSS en formato plano. Me explico:
Cuando durante la maquetación modificas propiedades de 4 o 5 elementos, después me resulta muy engorroso tener que acordarme de qué he hecho, y dónde.
Y, ¿a que viene todo esto?

Ayer descubrí una extensión para firefox, que si bien no está destinada a reemplazar a firebug, puede ser un gran complemento.

Phoenix permite editar el código CSS y Javascript de cualquier web, y ejecutar esas modificaciones para observar los resultados. También podremos ver el código HTML, tanto el original como el generado después de ejecutar el javascript. Eso sí, no podemos hacer modificaciones en el HTML.

Pero eso no es todo, Phoenix nos muestra los archivos CSS y js que se cargan en la página y su tamaño. Su editor de código, que colorea la sintaxis, es capaz de comprimir y minificar cualquier CSS o javascript, y también hacerlo a la inversa. Cualquier script de javascript comprimido (con packer ) o minificado (minify), Phoenix es capaz de descomprimirlo para que sea perfectamente legible.

Podremos ver en vivo los cambios que realicemos, tanto en CSS como en javascript. No tan “en vivo” como con Firebug, pero sí después de activarlo a través de “Execute CSS” o “Execute JS”.

Por último, Phoenix también permite guardar en nuestro ordenador los archivos.

Recordad que Phoenix está todavía en versión experimiental, por lo que, dicho finamente, tiene licencia para pegar todos los petardazos que quiera Sin embargo, a mí todavía no me ha fallado en los días que llevo utilizándola.

Eso sí, aún tiene un problema con la codificación de caracteres, al menos en los CSS: > que convierte en > , etc…

Sin embargo, es una extensión totalmente recomendable, con la que se pueden hacer grandes cosas si se acompaña con firebug, y alguna que otro add-on interesante.

Animaos a probarla, y contadme que os ha parecido.

Web del proyecto Phoenix.

Descarga la extensión para Firefox Phoenix.

Vía @vladocar

Vía ribosomatic encuentro un artículo muy interesante sobre esas técnicas CSS que, aunque no sepamos al dedillo, es interesante conocerlas, ya que algún día vamos a necesitarlas.

Concretamente, el autor a destacado las siguientes:

• inline-block cross browser.
• Cómo desactivar el autoresize de los textarea en safari.
• Esquinas redondeadas cross browser.
• min-height cross browser.
• Imágenes con bordes “internos”, para no romper el layout.
• Elementos con transparencia cross browser.
• Lightbox mediante CSS.
• Tooltips con CSS.
• Modificar el color de fondo al seleccionar texto (solo Safari y Firefox)
• Añadir un icono diferente a cada tipo de enlace.

Como veis, algunas están en el menú diario de cualquier maquetador, y otras simplemente son más “específicas”… pero estoy seguro que todas pueden llegar a ser muy útiles en el momento oportuno.

Artículo completo en Cats Who Code

BrowserLab es una nueva herramienta de Adobe que proporciona bajo demanda, imágenes renderizadas de como se verán nuestras webs en distintos navegadores, corriendo en sistemas operativos diferentes.

Actualmente, soporta los siguientes navegadores:

• Firefox 2.X y 3.X (Windows XP y Mac OS X)
• Internet Explorer 6.X y 7.X (Windows XP)
• Safari 3.X (Mac OS X)

Las capturas realizadas, pueden verse una por una, comparando los resultados de dos navegadores o superponiendo los resultados mediante transparencias que podemos ajustar a nuestro gusto.

BrowserLab también es capaz de guardar la configuración de navegadores que nos interesa.

Además, para rematar la faena, BrowserLab puede integrarse con Dreamweaver CS4 mediante una extensión, que nos permitirá comparar nuestra maquetación en local.

Más información sobre BrowserLab (ingles)

Prueba BrowserLab

Via | @vladocar