CODEWITHSUNDEEP
cssfirefoxcachinggoogle-chrome
Kyle Hyde
Kyle Hyde

Reputation: 11

Web browser not loading full stylesheet after CSS changes on first refresh? Caching?

In both chrome and Firefox, the browser doesn't load the full stylesheet after a change is made. I have to refresh the browser twice. The styles are all in one stylesheet, so this makes no sense to me.

The main culprit is that ul elements set to display:none are over-ridden by the user agent styles of ul,menu display block. However, if I refresh again, then my entire stylesheet loads. All my files and folders are stored on the work server. Is it a caching problem?

Upvotes: 1

Views: 3250

Answers (2)

yonran
yonran

Reputation: 19134

In Chrome, you can disable the cache when you're developing. Open the developer tools (F12, or Ctrl-Shift-J), click on the Gear at the very bottom right, and check "Disable cache".

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

To prevent caching of css files you can append a querystring. I do this when we update our main website.

<link rel="stylesheet" type="text/css" href="http://mysite.com/all.css?v=1.3">

I increment this whenever we do a release. If you are just testing your web server you can put in some dynamic code that generates the current time.

Upvotes: 1

Related Questions