0

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.

Improve this question
3
  • I think this might be wordpress related Commented Mar 13, 2018 at 12:13
  • Do you have any caching plugins enabled? Commented Mar 13, 2018 at 12:13
  • please check Is there any break present in CSS? Validate your CSS Commented Mar 13, 2018 at 12:15

2 Answers 2

Reset to default
1

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".

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Check wp_enqueue_style and wp_enueue_script

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.