CODEWITHSUNDEEP
cssbrowser-cache
user4108368
user4108368

Reputation:

CSS won't update in the browser

So I'm having this really weird bug with my new server where the CSS won't update in the browser. Refreshing and clearing the cache doesn't work. I then opened up FileZilla to see if the updated CSS file is actually being uploaded to server using FTP, which it is, and then when I drag a copy of the css file to my desktop, the css file magically updates. The PHP file updates just fine.

Here's how I include the css: <link rel="stylesheet" type="text/css" href="css/stylesheet.css">

I have no idea what is happening and how to fix this so any help would be greatly appreciated!

Upvotes: 0

Views: 15106

Answers (2)

scunliffe
scunliffe

Reputation: 63580

You could have any number of issues, but I'd like to point out a cool tip when using Chrome.

On your page, with the developer tools open if you press and hold the reload button you get a great option to clear the cache and hard reload!

enter image description here

This is very handy to make sure you have the "freshest" copy while developing.

Update: As for your scenario (after reading updates) it sounds like an HTTP header issue with your CSS file.

Check what HTTP headers are being sent with your CSS file response. If you are not specifying a cache header it will likely try to cache for you. Set an expires header (in the past) when in development, but far in the future when in production. In the Network tab of your developer tools (most browsers) you should be able to see these headers, or you can use a too like Fiddler that will let you deeply inspect your network traffic.

Alternatively if you can't easily tweak the HTTP Headers, then set a far expires header, but ensure the path to the file changes whenever you make a code change. Options include:

  • adding a time() stamp (always changes (yeah!) but doesn't cache (boo))
  • add the version control # to the file URL (works great, but you need to manage the updates properly within your tooling)
  • something fancier that creates a generated "fake" path to the file that auto changes on any modification to the file... but also loads the URL as expected, and sets the cache to "forever" (max 365 days according to the HTTP specs)

Upvotes: 9

CodeRomeos
CodeRomeos

Reputation: 2448

You may try queries to force the browser to load fresh CSS when it loads. To do this 

<link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">

If you are comfortable with php you may try below code to force the browser to load most updated CSS to load. To do this 

<link rel="stylesheet" type="text/css" href="http://example.com/style.css?d=<?php echo time(); ?>" />

This will ensure browsers always load fresh CSS with last modified time stamp.

Hope this help you.

Upvotes: 1

Related Questions