Stylesheet Versioning

  • Resolved jfeaz

    (@jfeaz)


    11 years, 1 month ago

    Hey Community!

    I am having a very difficult time with stylesheet versioning, and was hoping someone could explain how it works and why I might be experiencing this problem.

    I edit my main theme stylesheet via FTP through a desktop app. Usually, when I upload the modified version and refresh the browser, no changes are reflected.

    Using a cache-clearing refresh does nothing. Deleting my cache through the browser settings does nothing. Using a browser I haven’t opened in months does nothing.

    Even when no version argument can be seen in the page source, Chrome Developer Tools seems to append one in the stylesheet reference in the styles pane. If the stylesheet is modified, the version number reverts by 1 upon refresh, and the changes aren’t reflected. Why would it do that?

    For one of my themes (one where the stylesheet is loaded in header.php), I finally added a version argument to the URL in the link tag, and that seemed to help get a fresh copy on each load. But why would I need to do that?

    And if I’m using FTP to edit the stylesheet, how would WordPress know to advance the version number?

    Any guidance that can help me be able to edit my CSS efficiently once again is appreciated. I am also interested in a fundamental explanation of how versioning works in WordPress.

    Thank you so much!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Tim Nash

    (@tnash)

    Spam hunter

    11 years, 1 month ago

    Ok to answer “how does versioning work in WordPress” the answer is there is no versioning in WordPress at least not in the way you describe.

    What I suspect you are seeing is the WordPress version number for the version of the core of WordPress being appended to the string. That said some webserver automatically add timestamps to strings, to aid CDN or proxy server to invlaidate static objects which may also account for the versioning numbers.

    With regards to whats happening 5 things immediately spring to mind:

    1. You are using a proxy cache like Varnish or Cloudflare and they are caching the stylesheet, the adding a version number is invalidating the cache, or more likely generating a new cached object.
    2. If you are using a CDN and the CSS is being loaded remotely the CDN is not picking up the changes.
    3. Your theme, or a plugin is making use of appcache and this is not reflecting the changes
    4. Your web server is set to aggressively cache, for example Nginx can be set to cache static objects
    5. You are using a concatenation or minification plugin, which is misbehaving and is rendering two versions of the CSS.

    There are other options but these feel the most likely, if I had to guess I would suspect its 1 or 4. Do you know if you have any caching layer within your stack? Do you control the HTTP server?

    Thread Starter jfeaz

    (@jfeaz)

    11 years, 1 month ago

    You nailed it. I’m using Cloudflare. And there was a correlation between the time I started using the proxy and when this problem began to occur, now that I think about it.

    I mainly started using it to fight referrer spam in my analytics.

    So, Cloudflare is delivering outdated versions of my css. Anything I can do about it, short of using a timestamp to reversion it on every load?

    Thank you so much, Tim!

    Tim Nash

    (@tnash)

    Spam hunter

    11 years, 1 month ago

    I don’t use Cloudflare myself but looks simple to manually clear the cache for a single sheet https://support.cloudflare.com/hc/en-us/articles/200169246-How-do-I-purge-my-cache-

    Thread Starter jfeaz

    (@jfeaz)

    11 years, 1 month ago

    This is the answer. Thank you!

    Thread Starter jfeaz

    (@jfeaz)

    11 years, 1 month ago

    I just wanted to add one more thing I just found out –

    If you use Cloudflare, you can log in and put your site into “Development Mode”, which will suspend caching of your CSS (and other types of files) for 3 hours. That way you can update your CSS like normal and see the changes immediately in your browser.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Stylesheet Versioning’ is closed to new replies.