The Refresh CSS Bookmarklet -or- How to iterate quickly when debugging CSS
January 21st, 2008
Firebug is my tool of choice to fiddle with CSS. I'll edit the elements on the page, and then copy my changes back to the .css file. Then save.
If you're in a webapp, refreshing the page could take a while, so here's a great way to reload the freshest copies of the stylesheets. Drag this bookmarklet link to your toolbar:
>>> Refresh CSS <<<
Clicking it will modify any <link rel="stylesheet"> tags and append a timestamp at the end of each href attribute, thereby dropping the cache and grabbing a new one. It's quick and beautiful.
Follow me on twitter: @paul_irish
Bonus: firebug will refresh its display with the new styles as well.
Brilliant. Added it to my list of tools (increment/decrement page number, XRAY, and image zoomers)
Hi, I followed your comment on my own site and found this post. Bah! You beat me to it. I'm working on a similar bookmarklet that reloads style sheets (though it does a little bit more too).
Great work though!
If you have a mac, check out CSSEdit. It can be used like a firebug/textmate that saves changes back out to the CSS directly. More interestingly, it can 'extract' style sheets from any site in order to let you start fiddling with changes. It's value completion is excellent as well.
Was just going to write this, but you came to my rescue. :D Note, there are some unhappy quotes in the bookmarklet above.
Unfortunately, this bookmarklet doesn't work on Facebook. The styles get messed up, and don't recover until you do a page refresh.
When it works as intended, buy Viagra online causes a cuff who is sexually stimulated to tender with an erection.