Active CSS values not going live when uploaded

[P_B3]

Hello!

I'm trying to debug a site that isn't loading the Bootstrap sticky footer correctly and I keep experiencing a very frustrating situation in which I make changes to stylesheets, upload them, reload the page in the browser, and NOT see the changes take effect.  I don't see them in the browser rendering OR when inspecting the elements in the browser's dev console.     I keep seeing the same CSS properties and values displayed in the dev console, although I can clearly see different properties and values  in the css stylesheet, at the same position referenced in the dev console.

I feel certain I'm uploading the right documents but I don't know if something has become mixed up with the DW Site or what else could be causing this.  Anybody have any ideas??

I'm using CS6.  Thanks!

[Jon Fritz · Accepted solution]

It almost sounds like a sticky cache in your browser.

Are you using Chrome by chance?

If so, turn off caching in the dev console. When you hit F12 to open the console, across the top are items like Elements, Console, Sources, etc. click the Network tab and make sure Disable Cache is checked, then reload the page.

[WolfShade]

To add to what Jon said, every time I make any changes, whether content, structure, or CSS, I _always_ refresh the browser using CTRL-F5 (I don't know what the Mac equivalent is) to grab fresh data and not use cached content.

But certainly Jon's suggestion is a "one and done" solution, assuming cache is the culprit.

V/r,

^ _ ^

[P_B3]

Wolfshade,

Thanks also for jumping in and sharing that tip.  I didn't know I had the option of grabbing fresh content with just a couple of keystrokes instead of dumping all browser cache.  Thanks!

[P_B3]

Jon,

Sticky cache it was.  Did as you said and it updated right away.  Didn't know that could happen.  Thanks for jumping in so quick and getting me unstuck!

Do you happen to know if that setting will reset back to default everytime I launch the console?

[Jon Fritz]

The setting will stick, however, it's only disabled as long as the dev tools are open.

Once you close them to take a look at your page, it will start caching again until you open F12.

[P_B3]

Thanks again, Jon.  Nice to have the wind back in my sails.

[BenPleysier]

This is going to be a big problem going forward; I used to constantly get complaints from my customers that they do not see the changes that I had made. Frequent users to the site also missed out on the new styling. Being oblivious to the change they (the users) will not refresh their cache or use the F12 key to neutralise the cache.

At the moment it is Chrome that hangs onto the cache, but the others will soon follow.

This calls for the Cache-Buster:

A simple method that I use, (please do not take this as the gospel, Google the subject for yourself) is to place a query string at the end of my link(s) to the CSS. for example

<link rel="stylesheet" href="css/styles.css?v=<?php echo $cssVersion; ?>">

Then in an included PHP file I have

$cssVersion = "1.4.1";

which I change whenever I upload the updated CSS. The interpreted document will show

<link rel="stylesheet" href="css/styles.css?v=1.4.1">

For a minor change, I will go to the included file and change the version to 1.4.2. Older browsers, IE<9, may not recognise the change, they do not have a sticky cache problem anyhow, all modern browsers do download the fresh copy.

Changes that I make locally for testing purposes, I will use a method as Jon has explained.

[P_B3]

Thanks for jumping in Ben.  This seems like a really good idea.  Why do you say you believe the sticky caching problem is going to increase?

[BenPleysier]

All browsers have a cache of sorts. In older browsers, this is usually very basic (read: ineffective), in later browsers; they are more sophisticated. Chrome is generally regarded as the fastest of the browsers, this is partially due to its aggressive cache. Other browsers, in an attempt to keep market share, will try to replicate or better this speed which would require them to beef up their caching mechanism.

I did read an article on this topic, unfortunately I cannot find it right now. But even if other browsers do not follow suit, Chrome's market share is about 60%, which makes it imperative to use a cache busting system for your site.