Reload CSS stylesheets without reloading the page?

开发者_运维百科I've been using Safari as my development browser and I find it quite difficult to preview CSS changes in a heavy javascript environment.

My web application and development environment is as follows:

• Mac OSX Snow Leapord
• Safari
• TextMate
• Mootools
  • MochaUI
• XHTML 1.1 Transitional
• CSS3

I haven't tried it, but this bookmarket promises to do the job: ReCSS. I'm sure you could repurpose the code in there.

I created a tool called Vogue http://aboutcode.net/vogue/

Vogue watches the file system for changes to CSS files used by your web page. It then tells the web browser, in real-time, to reload just the stylesheets.

It works in all browsers and requires no plug-ins (it's all javascript).

Nice bookmarklet! Works great! Now I'm wondering if I even need to mention how to do it manually...

1. Chrome Developer Tools.
2. Right click on the css file that appears in the head.
3. Select Edit as HTML.
4. Let's say the file name is style.css. Change it to style.css?something. Make sure to use the ? after the filename.
5. Click outside the area and walla, tada!

http://youtu.be/-OYk5p5pSvM

During development, I've found you can also just toss a question mark after your CSS file name reference, ... which serves to trick someone in the path of serving the CSS to you that it's dynamically built (so it will fetch it every time). I'm not sure if it's Safari, or my specific web server that's being tricked, however, so YMMV.