CSS file changes

Hi Juan,

The problem you are running into is your browser's cache. As long as the stylesheet looks the same to your browser, it uses the cached version stored locally instead of the updated version from the server. You could verify this by going into Chrome's settings and selecting the option to delete cached images and files then reloading the page. You should see your changes reflected.

Obviously, this is not something you want to do every time you update your stylesheet and this is why you've seen some of the suggestions that you mention on the internet. Specifically, the most common suggested workaround is to add a dummy query string at the end of the url to your stylesheet, usually to something like the timestamp of the change you made. As a query string, it won't change anything about how your stylesheet is loaded, but it will look like a change to your browser, which will trigger it to invalidate its cache.

Example:

your current stylesheet link:

<link rel="stylesheet" href="/static/styles.css">

Now, suppose you make a change on 2017-09-27 at 5pm, you could add a query string to the end of the url like so:

<link rel="stylesheet" href="/static/styles.css?q=20170927.1700">

Later, you decide to make another change to the stylesheet, you would go back to the layout.html and change the query string to the new timestamp, let's say 2017-09-27 at 8pm:

<link rel="stylesheet" href="/static/styles.css?q=20170927.2000">

I think the reason you have not seen this approach work is it looks like you've added a query string once and then left it with the same value. If you leave it with the same value, in your example parameter=1, it will only appear as a change to the browser the first time you add this and not with every subsequent change to the CSS (since as long as your html continues to say parameter=1, the browser won't think to reload the CSS).

There's some really helpful discussion of this issue on Stack Overflow.

Hope that helps.

Regards,

Alex