CSS does not update

Hosting Support
1

Username (e.g. epiz_XXX) or Website URL

epiz_30032189
(please specify the website or account you are asking about)

Error Message

So basically i have a separate css file called “home-2020.css” in a different folder. I linked the html with that css. However, although the html was able to get the css, the css file is old even tho i updated it. The only way this fixes is if i refresh the css file url tab 2 times OR clear my cache. This is a BIG no no! Comparing it towards another host (aka 000webhost) they don’t experience this problem. This problem seems to be coming from infinityfree!

So in general, how do i fix the site so it only reads the latest css file and the old one? Without keep clearing my cache or refreshing the page twice.
(please share the FULL error message you see)

Other Information

(other information and details relevant to your question)

2

Add this a query string to the link tag: ?v=51

https://yourdomain.com/path-to-css/home-2020.css?v=51

Or

You can press CTRL + SHIFT + R on your keyboard. It will load the latest file, no big clearing cache steps!

3 Likes
3

Yes , I have also have the same issue the CSS File Does not update if it have a same name ?

4

No, it will work, your browser has cached an older version of the CSS file, that’s the reason, use the tips I shared earlier:

6 Likes
5

Changing the URL of the style sheet will not work unless the browser also updated the index file from its cache. Setting cache headers will prevent this in the future.

1 Like
6

Is there a alternative? Why does other hosting providers dont need this tag included?

7

The cache timeout is probably set for less time.
You can manually set the cache headers for less time, like Greenreader9 suggested and guided you to do.

8

You don’t need the tag, you only need to setup cache headers. Cache headers will allow you to control how long browsers hold copies of your website for.

Other hosting providers may not require these headers to be set because their servers may be configured differently. The alternative is to just set the cache headers today, then totally forget about them because you won’t have to do it again (Unless you want to change the cache timeout).

2 Likes
9

I tried the link you sent.
I did:

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault "access plus 1 month"
  ExpiresByType text/html "access plus 7 days"
  ExpiresByType text/css "access plus 7 days"
  ExpiresByType text/php "access plus 7 days"
  ExpiresByType text/js "access plus 14 days"
  ExpiresByType text/javascript "access plus 14 days"
  ExpiresByType application/javascript "access plus 14 days" 
  ExpiresByType image/gif "access plus 12 months"
  ExpiresByType image/jpeg "access plus 12 months"
  ExpiresByType image/png "access plus 12 months"
  ExpiresByType image/webp "access plus 12 months"
  ExpiresByType image/x-icon "access plus 12 months"
  ExpiresByType application/x-icon "access plus 12  months"
  ExpiresByType application/rss+xml "access plus 1 hour"
  ExpiresByType application/atom+xml "access plus 1 hour"
</IfModule>

Which didnt work!

10

Remember that you have to clear your cache to put the code into affect.

Also, you currently have to only clear the cache on the CSS files after 7 days. So it will work, it will just take 7 days to work.

If you want the change near immediate, change that “access plus 7 days” to “access plus 7 seconds”.

3 Likes
11

Why does wordpress dont experience these issues?

12

Because WordPress runs dynamically, and is build completely differently.

1 Like
13

It seems like reusing “?v=30” does not update it.

14

Of course, because the browser cached v=30. That is why you must update it as you make changes. A good way to make sure this does not happen is to use the milliseconds date (which will never be the same twice). At the time of posting this, it is 1647565590135 and is now 1647565625406. See, within 5 seconds, it has changed drastically.

2 Likes
15

We configured our servers to enable browser caching by default. That’s because leveraging browser caching is often a very good idea: it saves bandwidth for both your site and the visitor, it reduces server load and speeds up your website.

The only downside is that changes to your code are not visible immediately. But most code gets accessed a lot more often that it gets changed, so caching is almost always worth it.

You don’t need this tag for your site to work. Your site will work better without it. So before disabling cache, please think long and hard whether you really, absolutely need it, and are willing to accept the consequences.

3 Likes
16

on my website lovebug.cf I have an index.php which has this for loading the css file

		<link rel='stylesheet' href='/lovebug.css?<?php echo filemtime($_SERVER["DOCUMENT_ROOT"] . "/lovebug.css"); ?>' />

which appends the file creation time after lovebug.css?

when I upload changes to the css file the browser will see a new name on page load so the changes will be instantly visible

this has solved the css caching issue for me

3 Likes
17

So how do I disable this?

18

You cannot, as it is set on the server level, not the website level. That is why I suggested adding cache headers.

2 Likes
19

You can disable it by setting your own caching headers to lower values using .htaccess rules. This article provides a very simple snippet you could try (haven’t tested it myself):

Just, again, please be aware of the consequences.

2 Likes
20

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.