Highlighted

Active CSS values not going live when uploaded

Contributor ,
Apr 12, 2018

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

218

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Active CSS values not going live when uploaded

Contributor ,
Apr 12, 2018

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

219

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 12, 2018 0
Adobe Community Professional ,
Apr 12, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2018 0
LEGEND ,
Apr 12, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2018 1
Contributor ,
Apr 12, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2018 0
Contributor ,
Apr 12, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2018 0
Adobe Community Professional ,
Apr 12, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2018 0
Contributor ,
Apr 12, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2018 0
Adobe Community Professional ,
Apr 12, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2018 1
Contributor ,
Apr 13, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0
Adobe Community Professional ,
Apr 13, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2018 0