CODEWITHSUNDEEP
htmlcsscachingreload
Kristián Filo
Kristián Filo

Reputation: 865

CSS not updating in all browsers

I have a WordPress website which I am working on, and all changes in my .CSS file does NOT appear in Chrome, Firefox or Edge.

I load my CSS directly from the tag:

<link href="/wp-content/themes/mytheme/css/style.css" type="text/css" rel="stylesheet">

If I make changes to the CSS file, the changes do not appear in the browser. When I inspect the website using DevTools, I can clearly see the older/cached version of CSS is loaded.

I have already tried: Ctrl+F5, disabling cache when DevTools is open, manually clearning cache, hard reloads...

Nothing works. Not even clearing the cache.

The only solution for me is to either wait 10-15 minutes and then reload the page, or rename the .css file and relink it. I've read there is a workarond for this when using CSS versioning (style.css?v=1.0 etc.) but I refuse to get used to these annoying workarounds.

I just don't get why is this happening. Any help? Thank you.

Upvotes: 0

Views: 139

Answers (2)

IFebles
IFebles

Reputation: 338

This happens because it's faster for the user to load an already saved resource than downloading it again. This is the reason behind the resource caching. The time stablished for it to be used is finite and can be set to none at all disabling your cache (client-side); the time can also be set from the server.

The "trick" behind the style.css?version=1.0 is so that the browser gets a "new" URL to download according to your CSS "version". This being: if you have the file style.css?version=1.0 and you navigate to your page, that URL is going to be saved as an already loaded resource; when you change the file version to style.css?version=1.1 and you navigate to your page again, the browser doesn't have that "exact" URL registered, so it request that resource for the first time.

If you are working with a Back-End language you can do an easy workaround like style.css?version={getFileLastModificationTime}. With this, the resulting link will have the last time the file was modified as your "file version".

Upvotes: 1

Juan
Juan

Reputation: 5589

Wordpress has its own mechanism for fitting the js and css into the pages it serves.

Check wp_enqueue_style and wp_enueue_script

Upvotes: 0

Related Questions