0

My website is loading style.css?ver=1.0

style.css?ver=1.0 had different content to style.css, even after a hard refresh of style.css?ver=1.0

Deleting the browser cache didn't fix the problem.

Loading style.css?ver=1.0 in a different browser did.

Going back to the first browser showed style.css?ver=1.0 now matched style.css.

Here's the problem:

I've updated style.css once more, and uploaded it.

If I load this file in the browser, it shows the old version. If I do a hard refresh, it shows the old version. If I clear the browser cache, it shows the old version. If I load style.css in a different browser, it shows the old version. If I clear that different browser's cache, it shows the old version.

In FileZilla, if I view/edit the remote style.css, it is showing the changes that won't show in the browser.

If I wait 5 minutes, I see the new version of style.css in the browser.

Is this caused by web server caching?

  • 1
    Your style doesn't seem to have particularly aggressive caching headers, so it's likely to be server caching - maybe varnish or nginx microcaching. I would inquire with hosting support or whoever is taking care of you server's configuration. – Rarst Jan 12 '14 at 12:26
1

If you update your WordPress theme's style.css, you may have noticed that you have to "force-reload" your site in your browser to see the changes. This is because your browser keeps a copy of the CSS cached on your hard drive. Depending on how your server is set up, it may not check for a new version of the stylesheet for a couple hours, or longer! And even if you force-reload to see the changes, visitors who have previously accessed your site may still get the old CSS. One way to solve this is to "version" your CSS file, by adding ?v=123 to the URL in the to your stylesheet. This is rather a pain to have to do by hand every time, so here is a much better way:

<?php
$file = get_bloginfo( 'stylesheet_url' )
    . '?' . filemtime( get_stylesheet_directory() . '/style.css' );
?>
<link rel="stylesheet" href="<?php echo $file; ?>" type="text/css" />

This automatically updates the ?12345678 ending part every time you modify the file. Now everyone instantly sees your changes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.