File Manager - CSS badly taken into account [Solved]

[Leg2027]

Hello,

I have a problem. When I edit my css, the changes don't show up.
In fact the css code is only loaded once, when you go to the website for the first time in a browser.
If then I modify my css file, and I refresh the page, the modifications do not appear.
However, if I delete the browser cache or go to another browser and go to the site for the first time, it works. Closing the browser and reopening it is not enough.

There is no such problem with my html code.

The following code is located in the head tag:

<link rel="stylesheet" href="style.css">

 

Can you help me solve this problem?

Edited May 27, 2022 by Leg2027
problem solved

[Burke Knight]

Css is one of the things that your browser caches. If change the css, you'll 99.9% of the time have to clear the cache in your browser.

[Wizacr]

When you visit a website your browser will cache certain files (in this case your CSS file) to limit bandwidth usage on both the user and server ends.

When you've made changes to a cached file, use CTR + F5 to ignore your browsers cache and reload all content from the server.

[Leg2027]

Ok, thank you for this explanation.

So it does that with all the hosts I guess.

The ctrl+F5 is very handy, I'm going to use that now.

No way to force browsers to delete site cache non-manually during an update?
Because if we modify our website and some pages or elements are not formatted, users will not find it pretty...

[Wizacr]

5 hours ago, Leg2027 said:

Ok, thank you for this explanation.

So it does that with all the hosts I guess.

The ctrl+F5 is very handy, I'm going to use that now.

No way to force browsers to delete site cache non-manually during an update?
Because if we modify our website and some pages or elements are not formatted, users will not find it pretty...

You can manually append a version number (if you will) to your CSS url that will cause the browser to update it as if it was a new file.

Just add ?v=X.XX after style.css (see examples below) to force this behavior.

So for each update to your css file change the version number in your main HTML file, this will cause every users browser to recache the css file.

Example:

<link rel="stylesheet" href="style.css?v=1.0">

Upon update:

<link rel="stylesheet" href="style.css?v=1.1">

[Leg2027]

Thanks very much !
That's exactly what I wanted.

[TinkerMan]

2 hours ago, Wizacr said:

So for each update to your css file change the version number in your main HTML file, this will cause every users browser to recache the css file.

Example:

<link rel="stylesheet" href="style.css?v=1.0">

Upon update:

<link rel="stylesheet" href="style.css?v=1.1">

Note that this will only work if the browser is not caching the html file. If the HTML file is cached, the browser will not see the updated URL, and will not fetch the updated style sheet. 

[Leg2027]

I tested on many browsers, so far none cache the HTML file 😀.

Afterwards the problem would be less since the user would see the whole content as soon as his cache is deleted, some time goes by but at least he doesn't see any draft pages (without CSS).

[TinkerMan]

5 hours ago, Leg2027 said:

so far none cache the HTML file 😀.

Unless you are using cache headers or something, don’t count on the fact that it will stay this way. Always assume that static pages (HTML, CSS, JS) will be cached unless you explicitly instruct the browser not to, and it listens. 

[Wizacr]

9 hours ago, TinkerMan said:

Note that this will only work if the browser is not caching the html file. If the HTML file is cached, the browser will not see the updated URL, and will not fetch the updated style sheet. 

Your browser should not be cacheing an entire HTML file.

 

When you revisit a site, your browser receives the HTML file from the server everytime.

The browser checks to see what assets that HTML file links to and whether it has them cached or not.

Having your browser cache an HTML file would be considered bad practice and thus is not a default action.