Reload CSS stylesheets without reloading the page?

Question

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

theazureshadow · Accepted Answer · 2010-11-09 05:21:38Z

11

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

answered Nov 9, 2010 at 5:21

theazureshadow

10.2k6 gold badges36 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kobe Over a year ago

in IE , FF and chrome , Cntr "R" does the complete refresh right

theazureshadow Over a year ago

And it's Google FTW! :) Cheers!

Peter Ehrlich Over a year ago

worked in chrome. Great! Can we do the same for javascripts?

Andrew Davey · Accepted Answer · 2011-01-10 15:53:49Z

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).

user1552119 · Accepted Answer · 2012-08-05 01:46:01Z

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

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

http://youtu.be/-OYk5p5pSvM

Hmmm... I must have missed the question, above the fold on my browser window, and responded to the answer. My bad. Web Inspector doesn't seem to work in Safari today but I'm going to assume you can edit the markup to get the css file to refresh without refreshing the page.

James Boutcher · Accepted Answer · 2014-01-29 14:36:39Z

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.

Collectives™ on Stack Overflow

Reload CSS stylesheets without reloading the page?

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Related