Editar el CSS “on the fly”

Publicado el Saturday 8 de October de 2005. | 6 comentarios
Categoría: Noticias | Tags:

Paso 1: Usa mozilla firefox. Si no conoces el mejor navegador que hay, bajatelo de aqui.

Paso 2: Bajate la extensión Web Developer de aqui. La instalas y reinicias Firefox.

Paso 3: Utiliza un buen color picker. Tras mucho buscar, el mejor que he encontrado es el de pkworld. Descarga directa desde aqui.
Si conoces un Color Picker mejor, dimelo.

Un buen color picker es imprescindible

Paso 4: Abre tu pagina cuyo CSS quieras editar (asegurate de que la extension Web Developer esta instalada)

Paso 5: Pulsa CTRL+MAYUS+Y (CSS, View style information). Con esto conseguiras que al pasar el cursor por encima de cualquier parte del html, la barra de estado te muestra el estilo CSS que se aplica.

Paso 6: Pulsa CTRL+MAYUS+E (CSS, Edit CSS). Te abre un panel lateral donde puedes modificar al vuelo las CSS de la pagina html que se este mostrando. Ojo, si cambias de pagina en el navegador, se perderan los cambios del CSS cuando vuelvas a la pagina inicial cuyo CSS estabas editando. Asegurate de copiar y pegar a tu editor de textos favoritos los cambios que vayas haciendo en los CSS.

Paso 7: Disfruta

Popularity: 4% [?]

6 Responses to “Editar el CSS “on the fly””

  1. guardafaro says:

    Paso a probar esta extensión.
    Con respecto al pkworld no lo he utilizado. De momento uso el ColorPic. No sé si lo conocerás. Me resulta sencillo para mis necesdades ocasionales.

  2. [...] Una vez hecho todo esto, nos queda ir fichero por fichero y modificarlo para darle el aspecto que queramos y traducirlo. Si quieres, puedes utilizar este truco para modificar los css “on the fly” de tu blog desde el propio navegador. Te ahorrarás muchísimo tiempo. [...]

  3. [...] Si eres programador-diseñador web creo imprescindible esta extensión para Firefox. Entre la multitud de opciones podrás editar el CSS “on the fly”. [...]

  4. [...] Si eres programador-diseñador web creo imprescindible esta extensión para Firefox. Entre la multitud de opciones podrás editar el CSS “on the fly”. [...]

  5. Hilario says:

    No conocia el colorpicker en cuestión, pero si el webdeveloper de firefox. Pero para utilidad total a la hora de gestionar y cambiar tanto los css como las etiquetas html al vuelo, os recomiendo la extensión Firebug, Una vez instalado pulsas F12 y se te abre un frame en la zona de abajo del navegador, con el código html del sitio, segun vas abriendo los selectores, te va marcando en la página con un recuadro a que parte del codigo se refiere, y en un panel lateral los css heredados y actuales. Lo mejor es que haciendo doble clic sobre cualquier elemento te permite cambiarlo al vuelo…
    Una pasad, tan util o mas que el webdeveloper.
    Un saludo

  6. [...] Si eres programador-diseñador web creo imprescindible esta extensión para Firefox. Entre la multitud de opciones podrás editar el CSS “on the fly”. [...]

Leave a Reply